@cityway/basic-ui 1.0.2-beta003 → 1.0.2-beta005

package/lib/assets/styles/scss/components/_leaflet.scss

@@ -1,5 +1,5 @@
 @import "../variables/site";
-@import "bootstrap/scss/functions";
+
 @import "bootstrap/scss/variables";
 
 .map-container { // parent class for styles to apply

package/lib/assets/styles/scss/components/_ngx-intl-tel-input.scss

@@ -1,5 +1,5 @@
 @import "../variables/site";
-@import "bootstrap/scss/functions";
+
 @import "bootstrap/scss/variables";
 
 .intl-tel-input { width: 100%; }

package/lib/assets/styles/scss/components/_vis.scss

@@ -1,4 +1,4 @@
-@import "bootstrap/scss/functions";
+
 @import "bootstrap/scss/variables";
 
 .timeline {

package/lib/assets/styles/scss/components/_wizard-stepper.scss

@@ -1,7 +1,7 @@
 // styles of the external step component aw-wizard
 
 @import "../variables/site";
-@import "bootstrap/scss/functions";
+
 @import "bootstrap/scss/variables";
 @import "../../../fonts/optyweb/variables";
 

package/lib/assets/styles/scss/cw-ds/utilities/_grid.scss

@@ -1,15 +1,7 @@
 @use "sass:map";
 @use "@cityway/design-tokens/primitives" as p;
-
-// --- Mixins de Breakpoints ---
-@mixin media-breakpoint-up($name) {
-  $min: map.get(p.$grid, "breakpoints", $name);
-  @if $min and $min != 0 {
-    @media (min-width: $min) { @content; }
-  } @else {
-    @content;
-  }
-}
+@use "@cityway/design-tokens/functions" as f;
+@use "breakpoints" as m;
 
 // --- Container ---
 .container, .container-fluid {
@@ -17,8 +9,8 @@
   margin-right: auto;
   margin-left: auto;
   // Utilise la gutter de ta map colonnes
-  padding-right: var(--#{p.$prefix}-columns-gutter);
-  padding-left: var(--#{p.$prefix}-columns-gutter);
+  padding-right: calc(var(--#{p.$prefix}-columns-gutter) / 2);
+  padding-left: calc(var(--#{p.$prefix}-columns-gutter) / 2);
 }
 
 .container {
@@ -28,11 +20,16 @@
 
   @each $bp, $value in map.get(p.$grid, "breakpoints") {
     @if $value > 0 {
-      @include media-breakpoint-up($bp) {
-        max-width: calc(#{$value} - (var(--#{p.$prefix}-columns-gutter) * 2));
+      @include m.media-breakpoint-up($bp) {
+        max-width: calc(#{$value} - var(--#{p.$prefix}-columns-gutter));
       }
     }
   }
+
+  // MAIS on force le plafond à 1200px
+  @include m.media-breakpoint-up(xl) {
+    max-width: calc(f.grid("breakpoints", "xl") - var(--#{p.$prefix}-columns-gutter));
+  }
 }
 
 // --- Row & Columns (Grid) ---
@@ -46,18 +43,23 @@
   grid-column: span var(--#{p.$prefix}-columns-number);
 }
 
-// --- Générateur de colonnes et offsets ---
+// Générateur de colonnes & Offsets relatifs
 @each $name, $width in map.get(p.$grid, "breakpoints") {
-  @include media-breakpoint-up($name) {
+  @include m.media-breakpoint-up($name) {
     @for $i from 1 through map.get(p.$grid, "columns", "number") {
+
       .col-#{$name}-#{$i} {
-        grid-column: span #{$i};
+        // Définit la largeur (prend X colonnes)
+        grid-column-end: span #{$i};
       }
+
       .offset-#{$name}-#{$i} {
-        grid-column-start: #{$i + 1};
+        // Définit le décalage (saute X colonnes)
+        // Le +1 permet de dire "saute X cases et commence à la suivante"
+        grid-column-start: span #{$i + 1};
       }
     }
-    // Reset offset
+
     .offset-#{$name}-0 {
       grid-column-start: auto;
     }

package/lib/assets/styles/scss/styles-bo.scss

@@ -44,57 +44,57 @@
 //## Import de bootstrap contrôlé
 //--------------------------------------------------------
 //@import "bootstrap";
-@import "bootstrap/scss/mixins/banner";
-@include bsBanner("");
-
-
-// scss-docs-start import-stack
-// Configuration
-@import "bootstrap/scss/functions";
-@import "variables/custom";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
-
-// Layout & components
-@import "bootstrap/scss/root";
-//@import "bootstrap/scss/reboot";
-//@import "bootstrap/scss/type";
-//@import "bootstrap/scss/images";
-//@import "bootstrap/scss/containers";
-//@import "bootstrap/scss/grid";
-@import "bootstrap/scss/tables";
-@import "bootstrap/scss/forms";
-//@import "bootstrap/scss/buttons";
-//@import "bootstrap/scss/transitions";
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/button-group";
-//@import "bootstrap/scss/nav";
-//@import "bootstrap/scss/navbar";
-//@import "bootstrap/scss/card";
-//@import "bootstrap/scss/accordion";
-//@import "bootstrap/scss/breadcrumb";
-//@import "bootstrap/scss/pagination";
-//@import "bootstrap/scss/badge";
-//@import "bootstrap/scss/alert";
-@import "bootstrap/scss/progress";
-@import "bootstrap/scss/list-group";
-//@import "bootstrap/scss/close";
-//@import "bootstrap/scss/toasts";
-//@import "bootstrap/scss/modal";
-@import "bootstrap/scss/tooltip";
-@import "bootstrap/scss/popover";
-//@import "bootstrap/scss/carousel";
-//@import "bootstrap/scss/offcanvas";
-//@import "bootstrap/scss/placeholders";
-
-// Helpers
-//@import "bootstrap/scss/helpers";
-
-// Utilities
-@import "bootstrap/scss/utilities/api";
+// @import "bootstrap/scss/mixins/banner";
+// @include bsBanner("");
+
+
+// // scss-docs-start import-stack
+// // Configuration
+//
+// @import "variables/custom";
+// @import "bootstrap/scss/variables";
+// @import "bootstrap/scss/variables-dark";
+// @import "bootstrap/scss/maps";
+// @import "bootstrap/scss/mixins";
+// @import "bootstrap/scss/utilities";
+
+// // Layout & components
+// @import "bootstrap/scss/root";
+// //@import "bootstrap/scss/reboot";
+// //@import "bootstrap/scss/type";
+// //@import "bootstrap/scss/images";
+// //@import "bootstrap/scss/containers";
+// //@import "bootstrap/scss/grid";
+// @import "bootstrap/scss/tables";
+// @import "bootstrap/scss/forms";
+// //@import "bootstrap/scss/buttons";
+// //@import "bootstrap/scss/transitions";
+// @import "bootstrap/scss/dropdown";
+// @import "bootstrap/scss/button-group";
+// //@import "bootstrap/scss/nav";
+// //@import "bootstrap/scss/navbar";
+// //@import "bootstrap/scss/card";
+// //@import "bootstrap/scss/accordion";
+// //@import "bootstrap/scss/breadcrumb";
+// //@import "bootstrap/scss/pagination";
+// //@import "bootstrap/scss/badge";
+// //@import "bootstrap/scss/alert";
+// @import "bootstrap/scss/progress";
+// @import "bootstrap/scss/list-group";
+// //@import "bootstrap/scss/close";
+// //@import "bootstrap/scss/toasts";
+// //@import "bootstrap/scss/modal";
+// @import "bootstrap/scss/tooltip";
+// @import "bootstrap/scss/popover";
+// //@import "bootstrap/scss/carousel";
+// //@import "bootstrap/scss/offcanvas";
+// //@import "bootstrap/scss/placeholders";
+
+// // Helpers
+// //@import "bootstrap/scss/helpers";
+
+// // Utilities
+// @import "bootstrap/scss/utilities/api";
 // scss-docs-end import-stack
 
 //## Mixins
@@ -114,8 +114,8 @@
 
 //## Import styles
 //--------------------------------------------------------
-@import "custom-bootstrap";
-@import "components";
+//@import "custom-bootstrap";
+//@import "components";
 
 // Tools
 //--------------------------------------------------------

package/lib/assets/styles/scss/styles-fo.scss

@@ -44,58 +44,58 @@
 //## Import de bootstrap contrôlé
 //--------------------------------------------------------
 //@import "bootstrap";
-@import "bootstrap/scss/mixins/banner";
-@include bsBanner("");
-
-
-// scss-docs-start import-stack
-// Configuration
-@import "bootstrap/scss/functions";
-@import "variables/custom";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
-
-// Layout & components
-@import "bootstrap/scss/root";
-//@import "bootstrap/scss/reboot";
-//@import "bootstrap/scss/type";
-//@import "bootstrap/scss/images";
-//@import "bootstrap/scss/containers";
-//@import "bootstrap/scss/grid";
-@import "bootstrap/scss/tables";
-@import "bootstrap/scss/forms";
-//@import "bootstrap/scss/buttons";
-//@import "bootstrap/scss/transitions";
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/button-group";
-//@import "bootstrap/scss/nav";
-//@import "bootstrap/scss/navbar";
-//@import "bootstrap/scss/card";
-//@import "bootstrap/scss/accordion";
-//@import "bootstrap/scss/breadcrumb";
-//@import "bootstrap/scss/pagination";
-//@import "bootstrap/scss/badge";
-//@import "bootstrap/scss/alert";
-@import "bootstrap/scss/progress";
-@import "bootstrap/scss/list-group";
-//@import "bootstrap/scss/close";
-//@import "bootstrap/scss/toasts";
-//@import "bootstrap/scss/modal";
-@import "bootstrap/scss/tooltip";
-@import "bootstrap/scss/popover";
-//@import "bootstrap/scss/carousel";
-//@import "bootstrap/scss/offcanvas";
-//@import "bootstrap/scss/placeholders";
-
-// Helpers
-//@import "bootstrap/scss/helpers";
-
-// Utilities
-@import "bootstrap/scss/utilities/api";
-// scss-docs-end import-stack
+// @import "bootstrap/scss/mixins/banner";
+// @include bsBanner("");
+
+
+// // scss-docs-start import-stack
+// // Configuration
+//
+// @import "variables/custom";
+// @import "bootstrap/scss/variables";
+// @import "bootstrap/scss/variables-dark";
+// @import "bootstrap/scss/maps";
+// @import "bootstrap/scss/mixins";
+// @import "bootstrap/scss/utilities";
+
+// // Layout & components
+// @import "bootstrap/scss/root";
+// //@import "bootstrap/scss/reboot";
+// //@import "bootstrap/scss/type";
+// //@import "bootstrap/scss/images";
+// //@import "bootstrap/scss/containers";
+// //@import "bootstrap/scss/grid";
+// @import "bootstrap/scss/tables";
+// @import "bootstrap/scss/forms";
+// //@import "bootstrap/scss/buttons";
+// //@import "bootstrap/scss/transitions";
+// @import "bootstrap/scss/dropdown";
+// @import "bootstrap/scss/button-group";
+// //@import "bootstrap/scss/nav";
+// //@import "bootstrap/scss/navbar";
+// //@import "bootstrap/scss/card";
+// //@import "bootstrap/scss/accordion";
+// //@import "bootstrap/scss/breadcrumb";
+// //@import "bootstrap/scss/pagination";
+// //@import "bootstrap/scss/badge";
+// //@import "bootstrap/scss/alert";
+// @import "bootstrap/scss/progress";
+// @import "bootstrap/scss/list-group";
+// //@import "bootstrap/scss/close";
+// //@import "bootstrap/scss/toasts";
+// //@import "bootstrap/scss/modal";
+// @import "bootstrap/scss/tooltip";
+// @import "bootstrap/scss/popover";
+// //@import "bootstrap/scss/carousel";
+// //@import "bootstrap/scss/offcanvas";
+// //@import "bootstrap/scss/placeholders";
+
+// // Helpers
+// //@import "bootstrap/scss/helpers";
+
+// // Utilities
+// @import "bootstrap/scss/utilities/api";
+// // scss-docs-end import-stack
 
 //## Mixins
 //--------------------------------------------------------
@@ -114,8 +114,8 @@
 
 //## Import styles
 //--------------------------------------------------------
-@import "custom-bootstrap";
-@import "components";
+// @import "custom-bootstrap";
+// @import "components";
 
 // Tools
 //--------------------------------------------------------

package/lib/assets/styles/scss/variables/_custom.scss

@@ -1,4 +1,4 @@
-@import "bootstrap/scss/functions";
+
 @import "colors";
 // ATTENTION : ne pas inclure les variables bootstrap ici
 // sinon la surcharge ne fonctionne pas

package/lib/assets/styles/scss/variables/_site.scss

@@ -1,68 +1,68 @@
 
-@import "bootstrap/scss/functions";
-@import "custom";
 
-// Variables Theme
-//
-$transition-duration: 200ms !default;
-$sidebar-width: 17.5rem !default;
-$sidebar-small-menu-width: 5rem !default;
-$header-height: 3.5rem !default;
-$header-footer-height: ($header-height * 2) !default;
+// @import "custom";
 
-$font-size-base-icon: 1.1875rem !default;
+// // Variables Theme
+// //
+// $transition-duration: 200ms !default;
+// $sidebar-width: 17.5rem !default;
+// $sidebar-small-menu-width: 5rem !default;
+// $header-height: 3.5rem !default;
+// $header-footer-height: ($header-height * 2) !default;
 
-/////////////////////////////////////////////////////
-// Variables to US
+// $font-size-base-icon: 1.1875rem !default;
 
-$cw-font-size:              1.25rem;
+// /////////////////////////////////////////////////////
+// // Variables to US
 
-$loader-size:               3.75rem;
-$loader-color:              var(--bs-primary);
-$loader-border-size:        0.563rem;
-$loader-bg-color:         #dddddd;
-$loader-bg-color-opacity:   0.35;
-$loader-animation-duration: 0.8s;
+// $cw-font-size:              1.25rem;
 
-// Footer
-$footer-height: 3.5rem;
+// $loader-size:               3.75rem;
+// $loader-color:              var(--bs-primary);
+// $loader-border-size:        0.563rem;
+// $loader-bg-color:         #dddddd;
+// $loader-bg-color-opacity:   0.35;
+// $loader-animation-duration: 0.8s;
 
-// Menu
-$sidebar-menu-brand-font-size: 1.375rem;
-$sidebar-menu-bg: var(--bs-primary);
-$sidebar-menu-color: $white;
-$sidebar-menu-link-height: 3rem;
-$sidebar-menu-link-hover: var(--bs-primary)-hover;
-$sidebar-menu-link-font-size: 1.125rem;
-$sidebar-menu-submenu-link-font-size: 1rem;
-$sidebar-menu-submenu-link-height: 2.125rem;
-$sidebar-menu-collapsed-width: 3.25rem;
+// // Footer
+// $footer-height: 3.5rem;
 
-// Navs
-$nav-tabs-content-bg:             $white !default;
+// // Menu
+// $sidebar-menu-brand-font-size: 1.375rem;
+// $sidebar-menu-bg: var(--bs-primary);
+// $sidebar-menu-color: $white;
+// $sidebar-menu-link-height: 3rem;
+// $sidebar-menu-link-hover: var(--bs-primary)-hover;
+// $sidebar-menu-link-font-size: 1.125rem;
+// $sidebar-menu-submenu-link-font-size: 1rem;
+// $sidebar-menu-submenu-link-height: 2.125rem;
+// $sidebar-menu-collapsed-width: 3.25rem;
 
-// Form
-$form-group-margin-bottom: 1rem;
+// // Navs
+// $nav-tabs-content-bg:             $white !default;
 
-// Button
-$btn-min-width: 12.5rem;
-$btn-disabled-bg: $grey10;
-$btn-disabled-color: $white;
+// // Form
+// $form-group-margin-bottom: 1rem;
 
-// size 100% - margin
-$width-minus-container: calc(100% + #{$grid-gutter-width * 2});
-$width-minus-container-rwd: calc(100% + 2rem);
-$width-minus-card: calc(100% + #{$card-spacer-y * 2});
+// // Button
+// $btn-min-width: 12.5rem;
+// $btn-disabled-bg: $grey10;
+// $btn-disabled-color: $white;
 
-// Font size
-$font-sizes: () !default;
-$font-sizes: map-merge(
-  (
-    "xs": $font-size-base * 0.8,
-    "sm": $font-size-base * 0.9,
-    "md": $font-size-base * 1,
-    "lg": $font-size-base * 1.1,
-    "xl": $font-size-base * 1.2,
-  ),
-  $font-sizes
-);
+// // size 100% - margin
+// $width-minus-container: calc(100% + #{$grid-gutter-width * 2});
+// $width-minus-container-rwd: calc(100% + 2rem);
+// $width-minus-card: calc(100% + #{$card-spacer-y * 2});
+
+// // Font size
+// $font-sizes: () !default;
+// $font-sizes: map-merge(
+//   (
+//     "xs": $font-size-base * 0.8,
+//     "sm": $font-size-base * 0.9,
+//     "md": $font-size-base * 1,
+//     "lg": $font-size-base * 1.1,
+//     "xl": $font-size-base * 1.2,
+//   ),
+//   $font-sizes
+// );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cityway/basic-ui",
-  "version": "1.0.2-beta003",
+  "version": "1.0.2-beta005",
   "peerDependencies": {
     "@angular/common": "^20.3.0",
     "@angular/core": "^20.3.0",
@@ -8,12 +8,10 @@
     "@angular/animations": "^20.3.0",
     "@angular/cdk": "^20.2.2",
     "@angular/platform-browser": "^20.3.0",
-    "@cityway/design-tokens": "1.0.1-beta005"
+    "@cityway/design-tokens": "1.0.1-beta004"
   },
   "dependencies": {
-    "@ng-bootstrap/ng-bootstrap": "19.0.1",
     "@ng-select/ng-select": "20.0.1",
-    "bootstrap": "5.3.0",
     "@angular-slider/ngx-slider": "20.0.0",
     "tslib": "^2.8.0"
   },