diff --git a/angular.json b/angular.json index 6515316a98..fd59ca0e60 100644 --- a/angular.json +++ b/angular.json @@ -1225,7 +1225,7 @@ "builder": "@nrwl/workspace:run-commands", "outputs": [], "options": { - "command": "sass src:node_modules/ngx-bootstrap --source-map" + "command": "npx sass src:node_modules/ngx-bootstrap --source-map" } }, "docs": { diff --git a/apps/ngx-bootstrap-docs/src/assets/css/_reboot.scss b/apps/ngx-bootstrap-docs/src/assets/css/_reboot.scss index e81c453da9..07e234025c 100644 --- a/apps/ngx-bootstrap-docs/src/assets/css/_reboot.scss +++ b/apps/ngx-bootstrap-docs/src/assets/css/_reboot.scss @@ -1,121 +1,115 @@ -// scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix - -// Reboot -// -// Normalization of HTML elements, manually forked from Normalize.css to remove -// styles targeting irrelevant browsers while applying new styles. -// -// Normalize is licensed MIT. https://github.com/necolas/normalize.css - - -// Document -// -// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. -// 2. Change the default font family in all browsers. -// 3. Correct the line height in all browsers. -// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. -// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so -// we force a non-overlapping, non-auto-hiding scrollbar to counteract. -// 6. Change the default tap highlight to be completely transparent in iOS. +/* scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix */ +/* Reboot */ +/* Normalization of HTML elements, manually forked from Normalize.css to remove */ +/* styles targeting irrelevant browsers while applying new styles. */ +/* Normalize is licensed MIT. https://github.com/necolas/normalize.css */ + +/* Document */ +/* 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. */ +/* 2. Change the default font family in all browsers. */ +/* 3. Correct the line height in all browsers. */ +/* 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */ +/* 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so */ +/* we force a non-overlapping, non-auto-hiding scrollbar to counteract. */ +/* 6. Change the default tap highlight to be completely transparent in iOS. */ html { - box-sizing: border-box; // 1 - font-family: sans-serif; // 2 - line-height: 1.15; // 3 - -webkit-text-size-adjust: 100%; // 4 - -ms-text-size-adjust: 100%; // 4 - -ms-overflow-style: scrollbar; // 5 - -webkit-tap-highlight-color: rgba(0,0,0,0); // 6 + box-sizing: border-box; + font-family: sans-serif; + line-height: 1.15; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -ms-overflow-style: scrollbar; + -webkit-tap-highlight-color: rgba(0,0,0,0); } *, *::before, *::after { - box-sizing: inherit; // 1 + box-sizing: inherit; } -// IE10+ doesn't honor `` in some cases. +/* IE10+ doesn't honor `` in some cases. */ @at-root { @-ms-viewport { width: device-width; } } -// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) +/* Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) */ article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } -// Body -// -// 1. Remove the margin in all browsers. -// 2. As a best practice, apply a default `background-color`. +/* Body */ +/* 1. Remove the margin in all browsers. */ +/* 2. As a best practice, apply a default `background-color`. */ body { - margin: 0; // 1 + margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem; font-weight: normal; line-height: 1.5; color: #212529; - background-color: #fff; // 2 + background-color: #fff; } -// Suppress the focus outline on elements that cannot be accessed via keyboard. -// This prevents an unwanted focus outline from appearing around elements that -// might still respond to pointer events. -// -// Credit: https://github.com/suitcss/base +/* Suppress the focus outline on elements that cannot be accessed via keyboard. */ +/* This prevents an unwanted focus outline from appearing around elements that */ +/* might still respond to pointer events. */ + +/* Credit: https://github.com/suitcss/base */ [tabindex="-1"]:focus { outline: none !important; } -// Content grouping -// -// 1. Add the correct box sizing in Firefox. -// 2. Show the overflow in Edge and IE. +/* Content grouping */ + +/* 1. Add the correct box sizing in Firefox. */ +/* 2. Show the overflow in Edge and IE. */ hr { - box-sizing: content-box; // 1 - height: 0; // 1 - overflow: visible; // 2 + box-sizing: content-box; + height: 0; + overflow: visible; } -// -// Typography -// -// Remove top margins from headings -// -// By default, `

`-`

` all receive top and bottom margins. We nuke the top -// margin for easier control within type scales as it avoids margin collapsing. +/* Typography */ + + +/* Remove top margins from headings */ + +/* By default, `

`-`

` all receive top and bottom margins. We nuke the top */ +/* margin for easier control within type scales as it avoids margin collapsing. */ h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; } -// Reset margins on paragraphs -// -// Similarly, the top margin on `

`s get reset. However, we also reset the -// bottom margin to use `rem` units instead of `em`. +/* Reset margins on paragraphs */ + +/* Similarly, the top margin on `

`s get reset. However, we also reset the */ +/* bottom margin to use `rem` units instead of `em`. */ p { margin-top: 0; margin-bottom: 1rem; } -// Abbreviations -// -// 1. Remove the bottom border in Firefox 39-. -// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. -// 3. Add explicit cursor to indicate changed behavior. -// 4. Duplicate behavior to the data-* attribute for our tooltip plugin +/* Abbreviations */ + +/* 1. Remove the bottom border in Firefox 39-. */ +/* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ +/* 3. Add explicit cursor to indicate changed behavior. */ +/* 4. Duplicate behavior to the data-* attribute for our tooltip plugin */ abbr[title], -abbr[data-original-title] { // 4 - text-decoration: underline; // 2 - text-decoration: underline dotted; // 2 - cursor: help; // 3 - border-bottom: 0; // 1 +abbr[data-original-title] { + text-decoration: underline; + text-decoration: underline dotted; + cursor: help; + border-bottom: 0; } address { @@ -144,7 +138,7 @@ dt { dd { margin-bottom: .5rem; - margin-left: 0; // Undo browser default + margin-left: 0; /* Undo browser default */ } blockquote { @@ -152,22 +146,22 @@ blockquote { } dfn { - font-style: italic; // Add the correct font style in Android 4.3- + font-style: italic; /* Add the correct font style in Android 4.3- */ } b, strong { - font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari + font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */ } small { - font-size: 80%; // Add the correct font size in all browsers + font-size: 80%; /* Add the correct font size in all browsers */ } -// -// Prevent `sub` and `sup` elements from affecting the line height in -// all browsers. -// + +/* Prevent `sub` and `sup` elements from affecting the line height in */ +/* all browsers. */ + sub, sup { @@ -181,15 +175,15 @@ sub { bottom: -.25em; } sup { top: -.5em; } -// -// Links -// + +/* Links */ + a { color: #007bff; text-decoration: none; - background-color: transparent; // Remove the gray background on active links in IE 10. - -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+. + background-color: transparent; /* Remove the gray background on active links in IE 10. */ + -webkit-text-decoration-skip: objects; /* Remove gaps in links underline in iOS 8+ and Safari 8+. */ &:hover { color: #0056b3; @@ -197,11 +191,11 @@ a { } } -// And undo these styles for placeholder links/named anchors (without href) -// which have not been made explicitly keyboard-focusable (without tabindex). -// It would be more straightforward to just use a[href] in previous block, but that -// causes specificity issues in many other styles that are too complex to fix. -// See https://github.com/twbs/bootstrap/issues/19402 +/* And undo these styles for placeholder links/named anchors (without href) */ +/* which have not been made explicitly keyboard-focusable (without tabindex). */ +/* It would be more straightforward to just use a[href] in previous block, but that */ +/* causes specificity issues in many other styles that are too complex to fix. */ +/* See https://github.com/twbs/bootstrap/issues/19402 */ a:not([href]):not([tabindex]) { text-decoration: none; @@ -217,61 +211,61 @@ a:not([href]):not([tabindex]) { } -// -// Code -// + +/* Code */ + pre, code, kbd, samp { - font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers. - font-size: 1em; // Correct the odd `em` font sizing in all browsers. + font-family: monospace, monospace; /* Correct the inheritance and scaling of font size in all browsers. */ + font-size: 1em; /* Correct the odd `em` font sizing in all browsers. */ } pre { - // Remove browser default top margin + /* Remove browser default top margin */ margin-top: 0; - // Reset browser default of `1em` to use `rem`s + /* Reset browser default of `1em` to use `rem`s */ margin-bottom: 1rem; - // Don't allow content to break outside + /* Don't allow content to break outside */ overflow: auto; } -// -// Figures -// + +/* Figures */ + figure { - // Apply a consistent margin strategy (matches our type styles). + /* Apply a consistent margin strategy (matches our type styles). */ margin: 0 0 1rem; } -// -// Images and content -// + +/* Images and content */ + img { vertical-align: middle; - border-style: none; // Remove the border on images inside links in IE 10-. + border-style: none; /* Remove the border on images inside links in IE 10-. */ } svg:not(:root) { - overflow: hidden; // Hide the overflow in IE + overflow: hidden; /* Hide the overflow in IE */ } -// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. -// -// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 -// DON'T remove the click delay when `` is present. -// However, they DO support removing the click delay via `touch-action: manipulation`. -// See: -// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch -// * http://caniuse.com/#feat=css-touch-action -// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay +/* Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. */ + +/* In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 */ +/* DON'T remove the click delay when `` is present. */ +/* However, they DO support removing the click delay via `touch-action: manipulation`. */ +/* See: */ +/* * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch */ +/* * http://caniuse.com/#feat=css-touch-action */ +/* * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay */ a, area, @@ -286,12 +280,12 @@ textarea { } -// -// Tables -// + +/* Tables */ + table { - border-collapse: collapse; // Prevent double borders + border-collapse: collapse; /* Prevent double borders */ } caption { @@ -303,25 +297,25 @@ caption { } th { - // Matches default `` alignment + /* Matches default `` alignment */ text-align: left; } -// -// Forms -// + +/* Forms */ + label { - // Allow labels to use `margin` for spacing. + /* Allow labels to use `margin` for spacing. */ display: inline-block; margin-bottom: .5rem; } -// Work around a Firefox/IE bug where the transparent `button` background -// results in a loss of the default `button` focus styles. -// -// Credit: https://github.com/suitcss/base/ +/* Work around a Firefox/IE bug where the transparent `button` background */ +/* results in a loss of the default `button` focus styles. */ + +/* Credit: https://github.com/suitcss/base/ */ button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; @@ -332,7 +326,7 @@ button, select, optgroup, textarea { - margin: 0; // Remove the margin in Firefox and Safari + margin: 0; /* Remove the margin in Firefox and Safari */ font-family: inherit; font-size: inherit; line-height: inherit; @@ -340,25 +334,25 @@ textarea { button, input { - overflow: visible; // Show the overflow in Edge + overflow: visible; /* Show the overflow in Edge */ } button, select { - text-transform: none; // Remove the inheritance of text transform in Firefox + text-transform: none; /* Remove the inheritance of text transform in Firefox */ } -// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` -// controls in Android 4. -// 2. Correct the inability to style clickable types in iOS and Safari. +/* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` */ +/* controls in Android 4. */ +/* 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html [type="button"], // 1 +html [type="button"], /* 1 */ [type="reset"], [type="submit"] { - -webkit-appearance: button; // 2 + -webkit-appearance: button; /* 2 */ } -// Remove inner border and padding from Firefox, but don't restore the outline like Normalize. +/* Remove inner border and padding from Firefox, but don't restore the outline like Normalize. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, @@ -369,8 +363,8 @@ button::-moz-focus-inner, input[type="radio"], input[type="checkbox"] { - box-sizing: border-box; // 1. Add the correct box sizing in IE 10- - padding: 0; // 2. Remove the padding in IE 10- + box-sizing: border-box; /* 1. Add the correct box sizing in IE 10- */ + padding: 0; /* 2. Remove the padding in IE 10- */ } @@ -378,103 +372,103 @@ input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { - // Remove the default appearance of temporal inputs to avoid a Mobile Safari - // bug where setting a custom line-height prevents text from being vertically - // centered within the input. - // See https://bugs.webkit.org/show_bug.cgi?id=139848 - // and https://github.com/twbs/bootstrap/issues/11266 + /* Remove the default appearance of temporal inputs to avoid a Mobile Safari */ + /* bug where setting a custom line-height prevents text from being vertically */ + /* centered within the input. */ + /* See https://bugs.webkit.org/show_bug.cgi?id=139848 */ + /* and https://github.com/twbs/bootstrap/issues/11266 */ -webkit-appearance: listbox; } textarea { - overflow: auto; // Remove the default vertical scrollbar in IE. - // Textareas should really only resize vertically so they don't break their (horizontal) containers. + overflow: auto; /* Remove the default vertical scrollbar in IE. */ + /* Textareas should really only resize vertically so they don't break their (horizontal) containers. */ resize: vertical; } fieldset { - // Browsers set a default `min-width: min-content;` on fieldsets, - // unlike e.g. `

`s, which have `min-width: 0;` by default. - // So we reset that to ensure fieldsets behave more like a standard block element. - // See https://github.com/twbs/bootstrap/issues/12359 - // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements + /* Browsers set a default `min-width: min-content;` on fieldsets, */ + /* unlike e.g. `
`s, which have `min-width: 0;` by default. */ + /* So we reset that to ensure fieldsets behave more like a standard block element. */ + /* See https://github.com/twbs/bootstrap/issues/12359 */ + /* and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements */ min-width: 0; - // Reset the default outline behavior of fieldsets so they don't affect page layout. + /* Reset the default outline behavior of fieldsets so they don't affect page layout. */ padding: 0; margin: 0; border: 0; } -// 1. Correct the text wrapping in Edge and IE. -// 2. Correct the color inheritance from `fieldset` elements in IE. +/* 1. Correct the text wrapping in Edge and IE. */ +/* 2. Correct the color inheritance from `fieldset` elements in IE. */ legend { display: block; width: 100%; - max-width: 100%; // 1 + max-width: 100%; /* 1 */ padding: 0; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; - color: inherit; // 2 - white-space: normal; // 1 + color: inherit; /* 2 */ + white-space: normal; /* 1 */ } progress { - vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera. + vertical-align: baseline; /* Add the correct vertical alignment in Chrome, Firefox, and Opera. */ } -// Correct the cursor style of increment and decrement buttons in Chrome. +/* Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { - // This overrides the extra rounded corners on search inputs in iOS so that our - // `.form-control` class can properly style them. Note that this cannot simply - // be added to `.form-control` as it's not specific enough. For details, see - // https://github.com/twbs/bootstrap/issues/11586. - outline-offset: -2px; // 2. Correct the outline style in Safari. + /* This overrides the extra rounded corners on search inputs in iOS so that our */ + /* `.form-control` class can properly style them. Note that this cannot simply */ + /* be added to `.form-control` as it's not specific enough. For details, see */ + /* https://github.com/twbs/bootstrap/issues/11586. */ + outline-offset: -2px; /* 2. Correct the outline style in Safari. */ -webkit-appearance: none; } -// -// Remove the inner padding and cancel buttons in Chrome and Safari on macOS. -// + +/* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } -// -// 1. Correct the inability to style clickable types in iOS and Safari. -// 2. Change font properties to `inherit` in Safari. -// + +/* 1. Correct the inability to style clickable types in iOS and Safari. */ +/* 2. Change font properties to `inherit` in Safari. */ + ::-webkit-file-upload-button { - font: inherit; // 2 - -webkit-appearance: button; // 1 + font: inherit; /* 2 */ + -webkit-appearance: button; /* 1 */ } -// -// Correct element displays -// + +/* Correct element displays */ + output { display: inline-block; } summary { - display: list-item; // Add the correct display in all browsers + display: list-item; /* Add the correct display in all browsers */ } template { - display: none; // Add the correct display in IE + display: none; /* Add the correct display in IE */ } -// Always hide an element with the `hidden` HTML attribute (from PureCSS). -// Needed for proper display in IE 10-. +/* Always hide an element with the `hidden` HTML attribute (from PureCSS). */ +/* Needed for proper display in IE 10-. */ [hidden] { display: none !important; } diff --git a/apps/ngx-bootstrap-docs/src/assets/css/style.scss b/apps/ngx-bootstrap-docs/src/assets/css/style.scss index 8fc8c498ea..2b2db9784a 100644 --- a/apps/ngx-bootstrap-docs/src/assets/css/style.scss +++ b/apps/ngx-bootstrap-docs/src/assets/css/style.scss @@ -297,7 +297,8 @@ a:hover { &-content { padding: 15px 19px 15px 20px; overflow: auto; - max-height: calc(100vh - 194px); // header + search field + bootstrap buttons field + /* header + search field + bootstrap buttons field */ + max-height: calc(100vh - 194px); } &-list { @@ -559,7 +560,7 @@ a:hover { position: fixed; width: 100%; top: 0; - z-index: 1090; // to overlap most positioned elements in bootstrap + z-index: 1090; } .header-dropdown { z-index: 1090; @@ -568,10 +569,10 @@ a:hover { padding-top: $header-height; } .modal-backdrop { - z-index: 2000; // to overlap header :) + z-index: 2000; } .modal { - z-index: 2001; // to overlap header :) + z-index: 2001; } .sidebar { position: fixed; @@ -677,7 +678,7 @@ a:hover { position: absolute; left: 100%; width: 100%; - height: calc(100vh - 123px); // search and header heights + height: calc(100vh - 123px); background: #fff; z-index: 2; transition: left 0.4s; diff --git a/apps/ngx-bootstrap-docs/src/ng-api-doc.ts b/apps/ngx-bootstrap-docs/src/ng-api-doc.ts index b4fd6ca666..a26587c87c 100644 --- a/apps/ngx-bootstrap-docs/src/ng-api-doc.ts +++ b/apps/ngx-bootstrap-docs/src/ng-api-doc.ts @@ -3762,19 +3762,33 @@ export const ngdoc: any = { "description": "", "selector": "bar", "inputs": [ + { + "name": "animate", + "defaultValue": "false", + "type": "boolean", + "description": "

if true changing value of progress bar will be animated

\n" + }, { "name": "max", "defaultValue": "100", "type": "number", - "description": "" + "description": "

maximum total value of progress element

\n" + }, + { + "name": "striped", + "defaultValue": "false", + "type": "boolean", + "description": "

If true, striped classes are applied

\n" }, { "name": "type", - "type": "string", + "defaultValue": "info", + "type": "ProgressbarType", "description": "

provide one of the four supported contextual classes: success, info, warning, danger

\n" }, { "name": "value", + "defaultValue": "0", "type": "number", "description": "

current value of progress bar

\n" } @@ -3798,16 +3812,19 @@ export const ngdoc: any = { "inputs": [ { "name": "animate", + "defaultValue": "false", "type": "boolean", "description": "

if true changing value of progress bar will be animated

\n" }, { "name": "max", + "defaultValue": "100", "type": "number", "description": "

maximum total value of progress element

\n" }, { "name": "striped", + "defaultValue": "false", "type": "boolean", "description": "

If true, striped classes are applied

\n" }, diff --git a/libs/doc-pages/typeahead/.eslintrc.json b/libs/doc-pages/typeahead/.eslintrc.json index ca7a16f1e9..57f6343ead 100644 --- a/libs/doc-pages/typeahead/.eslintrc.json +++ b/libs/doc-pages/typeahead/.eslintrc.json @@ -1 +1,51 @@ -{"extends":["../../../.eslintrc.json"],"ignorePatterns":["!**/*"],"overrides":[{"files":["*.ts"],"extends":["plugin:@nrwl/nx/angular","plugin:@angular-eslint/template/process-inline-templates"],"parserOptions":{"project":["libs/doc-pages/typeahead/tsconfig.*?.json"]},"rules":{"@angular-eslint/directive-selector":["error",{"type":"attribute","prefix":"ngx-bootstrap-base","style":"camelCase"}],"@angular-eslint/component-selector":["error",{"type":"element","prefix":"ngx-bootstrap-base","style":"kebab-case"}]}},{"files":["*.html"],"extends":["plugin:@nrwl/nx/angular-template"],"rules":{}}]} \ No newline at end of file +{ + "extends": [ + "../../../.eslintrc.json" + ], + "ignorePatterns": [ + "!**/*" + ], + "overrides": [ + { + "files": [ + "*.ts" + ], + "extends": [ + "plugin:@nrwl/nx/angular", + "plugin:@angular-eslint/template/process-inline-templates" + ], + "parserOptions": { + "project": [ + "libs/doc-pages/typeahead/tsconfig.*?.json" + ] + }, + "rules": { + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "demo", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "demo", + "style": "kebab-case" + } + ] + } + }, + { + "files": [ + "*.html" + ], + "extends": [ + "plugin:@nrwl/nx/angular-template" + ], + "rules": {} + } + ] +} diff --git a/libs/doc-pages/typeahead/src/lib/demos/on-select/on-select.html b/libs/doc-pages/typeahead/src/lib/demos/on-select/on-select.html index d0c94cd3fd..e614c3d246 100644 --- a/libs/doc-pages/typeahead/src/lib/demos/on-select/on-select.html +++ b/libs/doc-pages/typeahead/src/lib/demos/on-select/on-select.html @@ -9,8 +9,8 @@ class="form-control">
- Preview region: - {{previewOption?.region}} - N/A + Preview region: + {{previewOption?.region}} + N/A
-
\ No newline at end of file +
diff --git a/libs/doc-pages/typeahead/src/lib/demos/on-select/on-select.ts b/libs/doc-pages/typeahead/src/lib/demos/on-select/on-select.ts index b6314d7178..d3abd94079 100644 --- a/libs/doc-pages/typeahead/src/lib/demos/on-select/on-select.ts +++ b/libs/doc-pages/typeahead/src/lib/demos/on-select/on-select.ts @@ -10,7 +10,7 @@ import { DataSourceType } from '../interfaces/typeahead.interfaces'; export class DemoTypeaheadOnSelectComponent { selectedValue: string; selectedOption: any; - previewOption: any = null; + previewOption?: any; states: DataSourceType[] = [ { id: 1, name: 'Alabama', region: 'South' }, { id: 2, name: 'Alaska', region: 'West' }, diff --git a/src/datepicker/bs-datepicker.scss b/src/datepicker/bs-datepicker.scss index f7002a1848..c6e6a54d95 100644 --- a/src/datepicker/bs-datepicker.scss +++ b/src/datepicker/bs-datepicker.scss @@ -164,7 +164,7 @@ -ms-user-select: none; } - // todo: check first :not(.disabled) usage + /* todo: check first :not(.disabled) usage */ &:not(.disabled):not(.week) span:not(.disabled):not(.is-other-month) { cursor: pointer; } diff --git a/src/progressbar/bar.component.ts b/src/progressbar/bar.component.ts index 5641ffb60b..1ab157de28 100644 --- a/src/progressbar/bar.component.ts +++ b/src/progressbar/bar.component.ts @@ -1,107 +1,75 @@ import { + ChangeDetectionStrategy, Component, - Host, - HostBinding, - Input, - OnDestroy, - OnInit, ElementRef, - Renderer2, SimpleChanges, OnChanges + Input, + OnChanges, + Renderer2, + SimpleChanges } from '@angular/core'; -import { ProgressbarComponent } from './progressbar.component'; import { isBs3 } from 'ngx-bootstrap/utils'; +import { ProgressbarType } from './progressbar-type.interface'; -// todo: number pipe -// todo: use query from progress? @Component({ selector: 'bar', templateUrl: './bar.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, // eslint-disable-next-line @angular-eslint/no-host-metadata-property host: { role: 'progressbar', 'aria-valuemin': '0', + '[class.progress-bar]': 'true', '[class.progress-bar-animated]': '!isBs3 && animate', '[class.progress-bar-striped]': 'striped', '[class.active]': 'isBs3 && animate', '[attr.aria-valuenow]': 'value', '[attr.aria-valuetext]': 'percent ? percent.toFixed(0) + "%" : ""', '[attr.aria-valuemax]': 'max', - '[style.height.%]': '"100"' + '[style.height.%]': '"100"', + '[style.width.%]': 'percent' } }) -export class BarComponent implements OnInit, OnDestroy, OnChanges { +export class BarComponent implements OnChanges { + /** maximum total value of progress element */ @Input() max = 100; - /** provide one of the four supported contextual classes: `success`, `info`, `warning`, `danger` */ - @Input() type?: string; /** current value of progress bar */ - @Input() value?: number; + @Input() value? = 0; - @HostBinding('style.width.%') - get setBarWidth() { - this.recalculatePercentage(); + /** if `true` changing value of progress bar will be animated */ + @Input() animate? = false; - return this.percent; - } + /** If `true`, striped classes are applied */ + @Input() striped? = false; - @HostBinding('class.progress-bar') addClass = true; + /** provide one of the four supported contextual classes: `success`, `info`, `warning`, `danger` */ + @Input() type?: ProgressbarType = 'info'; + + percent = 100; get isBs3(): boolean { return isBs3(); } - striped?: boolean; - animate = false; - percent = 0; - progress: ProgressbarComponent; - private _prevType?: string; constructor( private el: ElementRef, - @Host() progress: ProgressbarComponent, private renderer: Renderer2 - ) { - this.progress = progress; - } - - ngOnInit(): void { - this.progress.addBar(this); - } - - ngOnDestroy(): void { - this.progress.removeBar(this); - } + ) {} ngOnChanges(changes: SimpleChanges) { - if (changes.value) { - if (!changes.value.currentValue && changes.value.currentValue !== 0) { - return; - } - this.value = changes.value.currentValue; - this.recalculatePercentage(); + if (changes.value || changes.max) { + this.percent = 100 * (Number(changes.value.currentValue || 0) + / Number((changes.max?.currentValue || this.max) || 100)); } if (changes.type) { - this.type = changes.type.currentValue; this.applyTypeClasses(); } } - recalculatePercentage(): void { - this.percent = +((this.value || 0) / this.progress.max * 100).toFixed(2); - - const totalPercentage = this.progress.bars - .reduce(function (total: number, bar: BarComponent): number { - return total + bar.percent; - }, 0); - - if (totalPercentage > 100) { - this.percent -= totalPercentage - 100; - } - } - private applyTypeClasses(): void { if (this._prevType) { const barTypeClass = `progress-bar-${this._prevType}`; diff --git a/src/progressbar/progressbar-type.interface.ts b/src/progressbar/progressbar-type.interface.ts index 00d35a1e6b..e3d5c7f617 100644 --- a/src/progressbar/progressbar-type.interface.ts +++ b/src/progressbar/progressbar-type.interface.ts @@ -1,4 +1,7 @@ +import { BarComponent } from './bar.component'; + export type ProgressbarType = 'success' | 'info' | 'warning' | 'danger'; + export interface BarValue { type: ProgressbarType; label: string; diff --git a/src/progressbar/progressbar.component.html b/src/progressbar/progressbar.component.html index d3d37da2f4..270f0125d0 100644 --- a/src/progressbar/progressbar.component.html +++ b/src/progressbar/progressbar.component.html @@ -1,6 +1,12 @@ - - - - - {{ item.label }} + + + + + + + + + + {{ item.label }} diff --git a/src/progressbar/progressbar.component.ts b/src/progressbar/progressbar.component.ts index 002fb3d9e8..4e78dc1f10 100644 --- a/src/progressbar/progressbar.component.ts +++ b/src/progressbar/progressbar.component.ts @@ -1,41 +1,35 @@ -import { Component, HostBinding, Input } from '@angular/core'; -import { ProgressbarConfig } from './progressbar.config'; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { BarValue, ProgressbarType } from './progressbar-type.interface'; -import { isBs3 } from 'ngx-bootstrap/utils'; -import { BarComponent } from './bar.component'; +import { ProgressbarConfig } from './progressbar.config'; @Component({ selector: 'progressbar', templateUrl: './progressbar.component.html', - styles: [ - ` + changeDetection: ChangeDetectionStrategy.OnPush, + // eslint-disable-next-line @angular-eslint/no-host-metadata-property + host: { + '[class.progress]': 'true', + '[attr.max]': 'max' + }, + styles: [` :host { width: 100%; display: flex; - } - ` - ] + } `] }) export class ProgressbarComponent { + /** maximum total value of progress element */ + @Input() max = 100; + /** if `true` changing value of progress bar will be animated */ - @Input() - set animate(value: boolean) { - this._animate = value; - this.bars.forEach((b: BarComponent) => { - b.animate = value; - }); - } + @Input() animate = false; + /** If `true`, striped classes are applied */ - @Input() - set striped(value: boolean) { - this._striped = value; - this.bars.forEach((b: BarComponent) => { - b.striped = value; - }); - } + @Input() striped = false; /** provide one of the four supported contextual classes: `success`, `info`, `warning`, `danger` */ @Input() type?: ProgressbarType; + /** current value of progress bar. Could be a number or array of objects * like {"value":15,"type":"info","label":"15 %"} */ @@ -50,46 +44,12 @@ export class ProgressbarComponent { this._values = value; } } - isStacked = false; - _striped?: boolean; - _animate = false; - _max = 100; - _value?: number; + isStacked = false; + _value? = 0; _values?: BarValue[]; - get isBs3(): boolean { - return isBs3(); - } - - /** maximum total value of progress element */ - @HostBinding('attr.max') - @Input() - get max(): number { - return this._max; - } - - set max(v: number) { - this._max = v; - this.bars.forEach((bar: BarComponent) => { - bar.recalculatePercentage(); - }); - } - - @HostBinding('class.progress') addClass = true; - - bars: BarComponent[] = []; constructor(config: ProgressbarConfig) { Object.assign(this, config); } - addBar(bar: BarComponent): void { - bar.animate = this._animate; - bar.striped = this._striped; - - this.bars.push(bar); - } - - removeBar(bar: BarComponent): void { - this.bars.splice(this.bars.indexOf(bar), 1); - } } diff --git a/src/progressbar/testing/progressbar.component.spec.ts b/src/progressbar/testing/progressbar.component.spec.ts index 2dd7ea9d98..854b9dd19b 100644 --- a/src/progressbar/testing/progressbar.component.spec.ts +++ b/src/progressbar/testing/progressbar.component.spec.ts @@ -20,12 +20,10 @@ describe('Component: Progress Bar', () => { }); fixture = TestBed.createComponent(TestProgressbarComponent); component = fixture.componentInstance; - component._animate = false; - component.bars = []; - + component.animate = false; component.animate = true; - expect(component._animate).toBeTruthy(); + expect(component.animate).toBeTruthy(); }); it('check striped setter when _striped is equal to setter\'s argument', () => { @@ -35,12 +33,10 @@ describe('Component: Progress Bar', () => { }); fixture = TestBed.createComponent(TestProgressbarComponent); component = fixture.componentInstance; - component._striped = false; - component.bars = []; - + component.striped = false; component.striped = true; - expect(component._striped).toBeTruthy(); + expect(component.striped).toBeTruthy(); }); it('should work correctly with default values', () => { @@ -55,8 +51,10 @@ describe('Component: Progress Bar', () => { fixture = TestBed.createComponent(TestProgressbarComponent); element = fixture.nativeElement; fixture.detectChanges(); - expect(element.classList).toContain('progress'); - expect(element.getAttribute('max')).toEqual('100'); + const progressElement = element.querySelector('bar')?.parentElement; + + expect(progressElement?.classList).toContain('progress'); + expect(progressElement?.getAttribute('max')).toEqual('100'); }); it('checking appropriate styles after setting up of type', () => { @@ -72,7 +70,6 @@ describe('Component: Progress Bar', () => { element = fixture.nativeElement; const context = fixture.debugElement.componentInstance; fixture.detectChanges(); - const barElement = element.querySelector('bar'); context.typeValue = 'warning'; fixture.detectChanges(); diff --git a/tsconfig.base.json b/tsconfig.base.json index 319810ba41..f8522f5660 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -71,6 +71,12 @@ ], "@ngx-bootstrap-doc/typeahead": [ "libs/doc-pages/typeahead/src/index.ts" + ], + "ngx-bootstrap/progressbar": [ + "src/progressbar/index.ts" + ], + "ngx-bootstrap/utils": [ + "src/utils/index.ts" ] } },