@design-factory/design-factory 17.0.2 → 17.1.0

package/lib/angular/sidenav/sidenav.service.d.ts

@@ -30,6 +30,7 @@ export declare enum DfNavItemType {
  * Creating a sidenav is straightforward: use [DfSideNavComponent](#/components/sidenav/api#DfSideNavComponent) component
  */
 export declare class DfSideNavService implements OnDestroy {
+    private readonly config;
     type: typeof DfNavItemType;
     private readonly _sideNavItems$;
     private readonly _isMinmized$;

package/package.json

@@ -2,26 +2,23 @@
   "name": "@design-factory/design-factory",
   "description": "Amadeus design system",
   "license": "BSD-3-Clause",
-  "version": "17.0.2",
+  "version": "17.1.0",
   "dependencies": {
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@agnos-ui/angular": "^0.1.1",
+    "@agnos-ui/angular": "^0.2.0",
     "@angular/common": "^17.1.0",
     "@angular/core": "^17.1.0",
     "@angular/localize": "^17.1.0",
     "@angular/router": "^17.1.0",
     "@ng-bootstrap/ng-bootstrap": "~16.0.0",
-    "@ng-select/ng-select": "~12.0.6",
-    "ag-grid-angular": "~31.0.2",
-    "ag-grid-community": "~31.0.2",
-    "bootstrap": "5.3.2"
+    "@ng-select/ng-select": "~12.0.7",
+    "ag-grid-angular": "~31.1.1",
+    "ag-grid-community": "~31.1.1",
+    "bootstrap": "5.3.3"
   },
   "peerDependenciesMeta": {
-    "@agnos-ui/angular": {
-      "optional": true
-    },
     "@angular/router": {
       "optional": true
     },

package/styles/scss/_variables.scss

@@ -3,6 +3,7 @@
 
 // File to override bootstrap variables
 @import 'bootstrap/variables';
+@import 'bootstrap/variables-dark';
 @import 'bootstrap/scss/variables';
 
 // File to override agnosui variables

package/styles/scss/bootstrap/_variables-dark.scss

@@ -0,0 +1,86 @@
+// stylelint-disable scss/dollar-variable-pattern
+// Dark color mode variables
+//
+// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+
+//
+// Global colors
+//
+
+// scss-docs-start sass-dark-mode-vars
+// scss-docs-start theme-text-dark-variables
+// $primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
+// $secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
+// $success-text-emphasis-dark:        tint-color($success, 40%) !default;
+// $info-text-emphasis-dark:           tint-color($info, 40%) !default;
+// $warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
+// $danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
+// $light-text-emphasis-dark:          $gray-100 !default;
+// $dark-text-emphasis-dark:           $gray-300 !default;
+// scss-docs-end theme-text-dark-variables
+
+// scss-docs-start theme-bg-subtle-dark-variables
+// $primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
+// $secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
+// $success-bg-subtle-dark:            shade-color($success, 80%) !default;
+// $info-bg-subtle-dark:               shade-color($info, 80%) !default;
+// $warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
+// $danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
+// $light-bg-subtle-dark:              $gray-800 !default;
+// $dark-bg-subtle-dark:               mix($gray-800, $black) !default;
+// scss-docs-end theme-bg-subtle-dark-variables
+
+// scss-docs-start theme-border-subtle-dark-variables
+// $primary-border-subtle-dark:        shade-color($primary, 40%) !default;
+// $secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
+// $success-border-subtle-dark:        shade-color($success, 40%) !default;
+// $info-border-subtle-dark:           shade-color($info, 40%) !default;
+// $warning-border-subtle-dark:        shade-color($warning, 40%) !default;
+// $danger-border-subtle-dark:         shade-color($danger, 40%) !default;
+// $light-border-subtle-dark:          $gray-700 !default;
+// $dark-border-subtle-dark:           $gray-800 !default;
+// scss-docs-end theme-border-subtle-dark-variables
+
+// $body-color-dark:                   $gray-300 !default;
+// $body-bg-dark:                      $gray-900 !default;
+// $body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
+// $body-secondary-bg-dark:            $gray-800 !default;
+// $body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
+// $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
+// $body-emphasis-color-dark:          $white !default;
+// $border-color-dark:                 $gray-700 !default;
+// $border-color-translucent-dark:     rgba($white, .15) !default;
+// $headings-color-dark:               inherit !default;
+// $link-color-dark:                   tint-color($primary, 40%) !default;
+// $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
+$code-color-dark: tint-color($pink, 40%) !default;
+// $mark-color-dark:                   $body-color-dark !default;
+// $mark-bg-dark:                      $yellow-800 !default;
+
+//
+// Forms
+//
+
+// $form-select-indicator-color-dark:  $body-color-dark !default;
+// $form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
+
+// $form-switch-color-dark:            rgba($white, .25) !default;
+// $form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
+
+// scss-docs-start form-validation-colors-dark
+// $form-valid-color-dark:             $green-300 !default;
+// $form-valid-border-color-dark:      $green-300 !default;
+// $form-invalid-color-dark:           $red-300 !default;
+// $form-invalid-border-color-dark:    $red-300 !default;
+// scss-docs-end form-validation-colors-dark
+
+//
+// Accordion
+//
+
+// $accordion-icon-color-dark:         $primary-text-emphasis-dark !default;
+// $accordion-icon-active-color-dark:  $primary-text-emphasis-dark !default;
+
+// $accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+// $accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+// scss-docs-end sass-dark-mode-vars

package/styles/scss/components/fonts/_fonts.root.scss

@@ -17,6 +17,7 @@
   --#{$prefix}recommend-border-bottom-width: #{$df-recommend-border-bottom-width};
   --#{$prefix}recommend-color: #{$df-recommend-color};
   --#{$prefix}recommend-not-color: #{$df-recommend-not-color};
+  --#{$prefix}recommend-warning-color: #{$df-recommend-warning-color};
   --#{$prefix}caption-letter-spacing: #{$df-caption-letter-spacing};
   --#{$prefix}caption-font-size: #{$df-caption-font-size};
   --#{$prefix}blockquote-letter-spacing: #{$df-blockquote-letter-spacing};
@@ -24,4 +25,4 @@
   --#{$prefix}blockquote-line-height: #{$df-blockquote-line-height};
   --#{$prefix}mark-color: #{$df-mark-color};
   --#{$prefix}font-weight-semi-bold: #{$df-font-weight-semi-bold};
-}
+}

package/styles/scss/components/fonts/_fonts.scss

@@ -64,19 +64,38 @@ mark {
 }
 
 .df-recommend,
-.df-not-recommend {
+.df-not-recommend,
+.df-warning {
   font-size: var(--#{$prefix}recommend-font-size);
   font-weight: var(--#{$prefix}recommend-font-weight);
   line-height: var(--#{$prefix}recommend-line-height);
   border-bottom: var(--#{$prefix}recommend-border-bottom-width) solid;
   padding-bottom: var(--#{$prefix}recommend-padding-bottom);
   margin-bottom: var(--#{$prefix}recommend-margin-bottom);
+  &:before {
+    @extend %df-icon-style;
+    font-weight: $df-icon-solid-font-weight;
+    margin-inline-end: $df-recommend-icon-margin-inline-end;
+  }
 }
 
 .df-recommend {
   color: var(--#{$prefix}recommend-color);
+  &:before {
+    content: '\ea19'; // icon-check-circle
+  }
 }
 
 .df-not-recommend {
   color: var(--#{$prefix}recommend-not-color);
+  &:before {
+    content: '\ec97'; // icon-minus-circle
+  }
+}
+
+.df-warning {
+  color: var(--#{$prefix}recommend-warning-color);
+  &:before {
+    content: '\eafc'; // icon-exclamation-triangle
+  }
 }

package/styles/scss/components/fonts/_fonts.variables.scss

@@ -18,6 +18,8 @@ $df-recommend-margin-bottom: 1rem !default;
 $df-recommend-border-bottom-width: 3 * $border-width !default;
 $df-recommend-color: shades-css-var('success', 'text-color') !default;
 $df-recommend-not-color: shades-css-var('danger', 'text-color') !default;
+$df-recommend-warning-color: shades-css-var('warning', 'text-color') !default;
+$df-recommend-icon-margin-inline-end: 0.5rem !default;
 
 $df-caption-letter-spacing: 0.025rem !default;
 $df-caption-font-size: 0.875rem !default;

package/styles/scss/themes/brand2023/_variables.scss

@@ -469,8 +469,6 @@ $df-btn-focus-box-shadow:
   0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
 $df-btn-focus-box-shadow-color: rgba(var(--#{$prefix}btn-focus-shadow-rgb), 1) !default;
 $df-btn-check-active-property: 'bg-active-color' !default;
-$df-btn-bg-color: var(--#{$prefix}white) !default;
-$df-btn-focus-only-bg-color: var(--#{$prefix}white) !default;
 $df-btn-outline-focus-box-shadow-color: var(--#{$prefix}btn-color) !default;
 
 // Button close