@bravobit/bb-foundation 0.42.5 → 0.42.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bravobit/bb-foundation",
-  "version": "0.42.5",
+  "version": "0.42.8",
   "description": "The Angular core foundation of the Bravobit team.",
   "author": {
     "name": "Stan van Heumen",
@@ -8,15 +8,15 @@
     "url": "https://bravobit.nl"
   },
   "peerDependencies": {
-    "@angular/common": "^18.1.0",
-    "@angular/core": "^18.1.0",
-    "@angular/cdk": "^18.1.0"
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0",
+    "@angular/cdk": "^18.2.0"
   },
   "dependencies": {
     "tslib": "^2.6.3",
     "inputmask": "^5.0.9",
     "@types/grecaptcha": "^3.0.9",
-    "@ng-select/ng-select": "~13.0.4"
+    "@ng-select/ng-select": "^13.7.0"
   },
   "sideEffects": false,
   "module": "fesm2022/bravobit-bb-foundation.mjs",
@@ -37,36 +37,36 @@
       "esm": "./esm2022/auth/bravobit-bb-foundation-auth.mjs",
       "default": "./fesm2022/bravobit-bb-foundation-auth.mjs"
     },
+    "./collections": {
+      "types": "./collections/index.d.ts",
+      "esm2022": "./esm2022/collections/bravobit-bb-foundation-collections.mjs",
+      "esm": "./esm2022/collections/bravobit-bb-foundation-collections.mjs",
+      "default": "./fesm2022/bravobit-bb-foundation-collections.mjs"
+    },
     "./dashboard": {
       "types": "./dashboard/index.d.ts",
       "esm2022": "./esm2022/dashboard/bravobit-bb-foundation-dashboard.mjs",
       "esm": "./esm2022/dashboard/bravobit-bb-foundation-dashboard.mjs",
       "default": "./fesm2022/bravobit-bb-foundation-dashboard.mjs"
     },
-    "./combobox": {
-      "types": "./combobox/index.d.ts",
-      "esm2022": "./esm2022/combobox/bravobit-bb-foundation-combobox.mjs",
-      "esm": "./esm2022/combobox/bravobit-bb-foundation-combobox.mjs",
-      "default": "./fesm2022/bravobit-bb-foundation-combobox.mjs"
-    },
     "./dialog": {
       "types": "./dialog/index.d.ts",
       "esm2022": "./esm2022/dialog/bravobit-bb-foundation-dialog.mjs",
       "esm": "./esm2022/dialog/bravobit-bb-foundation-dialog.mjs",
       "default": "./fesm2022/bravobit-bb-foundation-dialog.mjs"
     },
-    "./collections": {
-      "types": "./collections/index.d.ts",
-      "esm2022": "./esm2022/collections/bravobit-bb-foundation-collections.mjs",
-      "esm": "./esm2022/collections/bravobit-bb-foundation-collections.mjs",
-      "default": "./fesm2022/bravobit-bb-foundation-collections.mjs"
-    },
     "./http": {
       "types": "./http/index.d.ts",
       "esm2022": "./esm2022/http/bravobit-bb-foundation-http.mjs",
       "esm": "./esm2022/http/bravobit-bb-foundation-http.mjs",
       "default": "./fesm2022/bravobit-bb-foundation-http.mjs"
     },
+    "./combobox": {
+      "types": "./combobox/index.d.ts",
+      "esm2022": "./esm2022/combobox/bravobit-bb-foundation-combobox.mjs",
+      "esm": "./esm2022/combobox/bravobit-bb-foundation-combobox.mjs",
+      "default": "./fesm2022/bravobit-bb-foundation-combobox.mjs"
+    },
     "./elements": {
       "types": "./elements/index.d.ts",
       "esm2022": "./esm2022/elements/bravobit-bb-foundation-elements.mjs",

package/select/lib/select/select.component.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, OnDestroy, OnInit, TemplateRef } from '@angular/core';
-import { ControlValueAccessor, FormControl } from '@angular/forms';
 import { NgSelectComponent } from '@ng-select/ng-select';
+import { ControlValueAccessor, FormControl } from '@angular/forms';
 import { Observable, Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class BbSelect<T> implements ControlValueAccessor, OnInit, OnDestroy {

package/styles/theme.scss

@@ -61,14 +61,26 @@
         --bb-radio-outline-color: var(--bb-primary-color-100);
 
         // Form control
-        --bb-form-control-box-shadow: 0 0 0 0.1875rem var(--bb-primary-color-100);
+        --bb-form-control-border-color: hsla(213, 8%, 74%, 1);
+        --bb-form-control-focus-border-color: hsla(213, 8%, 50%, 1);
+        --bb-form-control-border-radius: 0.5rem;
+        --bb-form-control-background-color: white;
+        --bb-form-control-box-shadow: 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1);
+        --bb-form-control-focus-box-shadow: 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1), 0 0 0 0.1875rem var(--bb-primary-color-100);
 
         // Select
-        --select-box-shadow: 0 0 0 0.1875rem var(--bb-primary-color-100);
+        --bb-select-border-radius: 0.5rem;
+        --bb-select-background-color: white;
+        --bb-select-border-color: hsla(213, 8%, 74%, 1);
+        --bb-select-box-shadow: 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1);
+        --bb-select-focus-box-shadow: 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1), 0 0 0 0.1875rem var(--bb-primary-color-100);
 
         // File picker.
         --bb-file-picker-color: var(--bb-primary-color-550);
+        --bb-file-picker-border-radius: 0.5rem;
         --bb-file-picker-box-shadow: 0 0 0 0.1875rem var(--bb-primary-color-100);
+        --bb-file-picker-border-color: hsla(213, 8%, 74%, 1);
+        --bb-file-picker-background-color: white;
 
         // Multi file control.
         --bb-multi-file-control-color: var(--bb-primary-color-550);
@@ -86,3 +98,43 @@
         --bb-collections-table-label-color: var(--bb-primary-color-550);
     }
 }
+
+@mixin bb-legacy-theme($primary-color) {
+    @include bb-theme(('primary-color': $primary-color));
+
+    :root {
+        // Legacy button styling.
+        --bb-button-border-radius: 0.25rem;
+        --bb-button-color: #2d3c4d;
+        --bb-button-secondary-border-color: #d4d8e1;
+        --bb-button-secondary-hover-background-color: hsla(60, 0%, 99%, 1);
+        --bb-button-secondary-active-background-color: hsla(60, 0%, 99%, 1);
+        --bb-button-secondary-focus-box-shadow: 0 0 0 0.1875rem hsla(222, 6%, 91%, 0.5);
+
+        // Legacy general control styling.
+        --bb-form-label-color: #111111;
+        --bb-form-label-font-weight: 500;
+        --bb-form-label-font-size: 1rem;
+
+        // Legacy form control styling.
+        --bb-form-control-box-shadow: inset 0 0.1875rem hsla(213, 8%, 74%, 0.2), 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1);
+        --bb-form-control-focus-box-shadow: inset 0 0.1875rem hsla(213, 8%, 74%, 0.2), 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1), 0 0 0 0.1875rem hsla(211, 100%, 50%, 0.2);
+        --bb-form-control-border-color: hsla(213, 8%, 74%, 1);
+        --bb-form-control-focus-border-color: hsla(213, 8%, 74%, 1);
+        --bb-form-control-border-radius: 0.1875rem;
+        --bb-form-control-background-color: hsla(300, 100%, 99%, 1);
+
+        // Legacy select styling.
+        --bb-select-border-radius: 0.1875rem;
+        --bb-select-background-color: hsla(300, 100%, 99%, 1);
+        --bb-select-border-color: hsla(213, 8%, 74%, 1);
+        --bb-select-box-shadow: inset 0 0.1875rem hsla(213, 8%, 74%, 0.2), 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1);
+        --bb-select-focus-box-shadow: inset 0 0.1875rem hsla(213, 8%, 74%, 0.2), 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1), 0 0 0 0.1875rem hsla(211, 100%, 50%, 0.2);
+
+        // Legacy file picker styling.
+        --bb-file-picker-box-shadow: 0 0 0 0.1875rem hsla(211, 100%, 50%, 0.2);
+        --bb-file-picker-border-radius: 0.1875rem;
+        --bb-file-picker-border-color: hsla(213, 8%, 74%, 1);
+        --bb-file-picker-background-color: hsla(300, 100%, 99%, 1);
+    }
+}