main

.circleci/config.yml

@@ -151,6 +151,7 @@ jobs:
             - run:
                   name: Check git diff to see if builds should skip e2e
                   command: |
+                      circleci-agent step halt
                       if [ -f packages/bits/package-cached ] && [ "$USE_CACHE" == "true" ]; then
                           echo "This package was restored from cache so we're skipping e2e tests"
                           circleci-agent step halt
@@ -637,9 +638,9 @@ jobs:
         working_directory: ~/nova
         environment:
             SOURCE_BRANCH: main
-            CREATE_RELEASE_BRANCH: "false"
-            RELEASE_BRANCH: release/v17.0.x
-            INCREMENT_TYPE: patch
+            CREATE_RELEASE_BRANCH: "true"
+            RELEASE_BRANCH: release/v19.0.x
+            INCREMENT_TYPE: major
         steps:
             - add_ssh_keys
             - checkout:

.npmrc

@@ -1 +1,2 @@
 max-old-space-size=16384
+registry=https://registry.npmjs.org/

docs/CHANGELOG.md

@@ -1,18 +1,25 @@
 # Changelog
 
+## [19.0.0] 📅 2025-09-30
+### Added
+- `@nova-ui/bits` | Added colorpicker
+- `@nova-ui/bits` | Added nui-tab heading is accessible with keyboard 
+
+## [17.0.1] 📅 2025-07-31
+### Added
+- `@nova-ui/dashboards` | Added ability to globaly disable refreshers
+
 ## [17.0.0] 📅 2025-04-20
 ### Angular upgrade 17
 
 ## [16.0.9] 📅 2025-04-02
 ### Fixes
--
 - `@nova-ui/dashboards` | Fix kpi scale for values
 - `@nova-ui/dashboards` | Fix editor preview component
 - `@nova-ui/dashboards` | Fix search addon listening chagnes
 
 ## [16.0.8] 📅 2025-04-02
 ### Fixes
--
 - `@nova-ui/dashboards` | Fix selection config
 - `@nova-ui/dashboards` | Added ability to listen preview component through the cloner
 

package.json

@@ -24,11 +24,11 @@
     "@angular/platform-browser": "19.2.7",
     "@angular/platform-browser-dynamic": "19.2.7",
     "@angular/router": "19.2.7",
-    "@schematics/angular": "19.2.8",
     "@axe-core/webdriverjs": "4.10.1",
     "@compodoc/compodoc": "1.1.26",
     "@percy/cli": "1.30.2",
     "@percy/protractor": "2.0.1",
+    "@schematics/angular": "19.2.8",
     "@stackblitz/sdk": "1.11.0",
     "@stylistic/eslint-plugin-ts": "3.1.0",
     "@types/jasmine": "5.1.4",

packages/bits/demo/src/components/app/app-routing.module.ts

@@ -62,6 +62,10 @@ const appRoutes: Routes = [
         path: "chips",
         loadChildren: async () => import("../demo/chips/chips.module"),
     },
+    {
+        path: "color-picker",
+        loadChildren: async () => import("../demo/color-picker/color-picker.module"),
+    },
     {
         path: "combobox",
         loadChildren: async () => import("../demo/combobox/combobox.module"),

packages/bits/demo/src/components/demo/color-picker/color-picker-basic/color-picker-basic.example.component.html

@@ -0,0 +1,9 @@
+<form [formGroup]="myForm">
+<nui-color-picker
+    formControlName="backgroundColor"
+    [colors]="colors"
+>
+</nui-color-picker>
+</form>
+
+<p class="my-3">You selected: {{ myForm.get('backgroundColor')?.value }}</p>

packages/bits/demo/src/components/demo/color-picker/color-picker-basic/color-picker-basic.example.component.ts

@@ -0,0 +1,61 @@
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to
+//  deal in the Software without restriction, including without limitation the
+//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+//  sell copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+
+import { Component } from "@angular/core";
+import {
+    FormBuilder,
+    FormControl,
+    FormGroup,
+} from "@angular/forms";
+
+const CHART_PALETTE_CS1: string[] = [
+    "var(--nui-color-bg-secondary)",
+    "var(--nui-color-chart-one)",
+    "var(--nui-color-chart-two)",
+    "var(--nui-color-chart-three)",
+    "var(--nui-color-chart-four)",
+    "var(--nui-color-chart-five)",
+    "var(--nui-color-chart-six)",
+    "var(--nui-color-chart-seven)",
+    "var(--nui-color-chart-eight)",
+    "var(--nui-color-chart-nine)",
+    "var(--nui-color-chart-ten)",
+];
+
+@Component({
+    selector: "nui-color-picker-basic-example",
+    templateUrl: "./color-picker-basic.example.component.html",
+    styles: [],
+    standalone: false,
+})
+export class ColorPickerBasicExampleComponent {
+    public myForm: FormGroup<{ backgroundColor: FormControl<string | null> }>;
+    public colors: string[] = CHART_PALETTE_CS1;
+
+    constructor(
+        private formBuilder: FormBuilder
+    ) {}
+
+    public ngOnInit(): void {
+        this.myForm = this.formBuilder.group({
+            backgroundColor: [this.colors[0]],
+        });
+    }
+}

packages/bits/demo/src/components/demo/color-picker/color-picker-docs/color-picker-docs.example.component.html

@@ -0,0 +1,31 @@
+<h2>Required Modules</h2>
+<ul>
+    <li>
+        <code>NuiColorPickerModule</code>
+    </li>
+</ul>
+
+<h2>Basic Usage with color</h2>
+<p>
+    <code>&lt;nui-color-picker&gt;</code> is a basic color picker input component.
+    Use the <code>colors</code> or <code>colorPalette</code> input to control the 
+    colors which will be displayed. Use the <code>cols</code> input to control the 
+    number of columns in the palette.
+</p>
+
+<nui-example-wrapper filenamePrefix="color-picker-basic" exampleTitle="Basic Usage">
+    <nui-color-picker-basic-example></nui-color-picker-basic-example>
+</nui-example-wrapper>
+
+<h2>Usage with <code>IPaletteColor</code></h2>
+<p>Interface <code>IPaletteColor</code> will provide additional information about color name in tooltip</p>
+<nui-example-wrapper filenamePrefix="color-picker-palette" exampleTitle="Usage with palette">
+    <nui-color-picker-palette-example></nui-color-picker-palette-example>
+</nui-example-wrapper>
+
+
+<h2>Usage with color select</h2>
+<p>Usage with color select will provide name of all colors in palete</p>
+<nui-example-wrapper filenamePrefix="color-picker-select" exampleTitle="Usage with color select">
+    <nui-color-picker-select-example></nui-color-picker-select-example>
+</nui-example-wrapper>

packages/bits/demo/src/components/demo/color-picker/color-picker-docs/color-picker-docs.example.component.ts

@@ -0,0 +1,28 @@
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to
+//  deal in the Software without restriction, including without limitation the
+//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+//  sell copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+
+import { Component } from "@angular/core";
+
+@Component({
+    selector: "nui-color-picker-docs-example",
+    templateUrl: "./color-picker-docs.example.component.html",
+    standalone: false,
+})
+export class ColorPickerExampleComponent {}

packages/bits/demo/src/components/demo/color-picker/color-picker-palette/color-picker-palette.example.component.html

@@ -0,0 +1,9 @@
+<form [formGroup]="myForm">
+<nui-color-picker
+    formControlName="backgroundColor"
+    [colorPalette]="colorPalette"
+>
+</nui-color-picker>
+</form>
+
+<p class="my-3">You selected: {{ myForm.get('backgroundColor')?.value }}</p>

packages/bits/demo/src/components/demo/color-picker/color-picker-palette/color-picker-palette.example.component.ts

@@ -0,0 +1,51 @@
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to
+//  deal in the Software without restriction, including without limitation the
+//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+//  sell copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+
+import { Component } from "@angular/core";
+import {
+    FormBuilder,
+    FormControl,
+    FormGroup,
+} from "@angular/forms";
+import { HTML_COLORS, IPaletteColor } from "../../../../../../src/constants/color-picker.constants";
+
+
+@Component({
+    selector: "nui-color-picker-palette-example",
+    templateUrl: "./color-picker-palette.example.component.html",
+    styles: [],
+    standalone: false,
+})
+export class ColorPickerPaletteExampleComponent {
+    public myForm: FormGroup<{ backgroundColor: FormControl<string | null> }>;
+    public colorPalette: IPaletteColor[] = Array.from(HTML_COLORS.entries())
+    .map(([label, color]) => ({label,color}));
+
+
+    constructor(
+        private formBuilder: FormBuilder
+    ) {}
+
+    public ngOnInit(): void {
+        this.myForm = this.formBuilder.group({
+            backgroundColor: [""],
+        });
+    }
+}

packages/bits/demo/src/components/demo/color-picker/color-picker-select/color-picker-select.example.component.html

@@ -0,0 +1,10 @@
+<form [formGroup]="myForm">
+<nui-color-picker
+    formControlName="backgroundColor"
+    [colorPalette]="colorPalette"
+    [isSelect]="true"
+>
+</nui-color-picker>
+</form>
+
+<p class="my-3">You selected: {{ myForm.get('backgroundColor')?.value.label}} -> {{ myForm.get('backgroundColor')?.value.color}}</p>

packages/bits/demo/src/components/demo/color-picker/color-picker-select/color-picker-select.example.component.ts

@@ -0,0 +1,51 @@
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to
+//  deal in the Software without restriction, including without limitation the
+//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+//  sell copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+
+import { Component } from "@angular/core";
+import {
+    FormBuilder,
+    FormControl,
+    FormGroup,
+} from "@angular/forms";
+import { HTML_COLORS, IPaletteColor } from "../../../../../../src/constants/color-picker.constants";
+
+
+@Component({
+    selector: "nui-color-picker-select-example",
+    templateUrl: "./color-picker-select.example.component.html",
+    styles: [],
+    standalone: false,
+})
+export class ColorPickerSelectExampleComponent {
+    public myForm: FormGroup<{ backgroundColor: FormControl<string | null> }>;
+    public colorPalette: IPaletteColor[] = Array.from(HTML_COLORS.entries())
+    .map(([label, color]) => ({label,color}));
+
+
+    constructor(
+        private formBuilder: FormBuilder
+    ) {}
+
+    public ngOnInit(): void {
+        this.myForm = this.formBuilder.group({
+            backgroundColor: [""],
+        });
+    }
+}