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">
-
\ 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"
]
}
},
|