ngwr 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "license": "MIT",
   "description": "NGWR – Angular UI components library",
   "author": "Roman Khegay <rk@garuna.dev> (https://garuna.dev/)",
@@ -43,18 +43,18 @@
       "esm": "./esm2022/checkbox/ngwr-checkbox.mjs",
       "default": "./fesm2022/ngwr-checkbox.mjs"
     },
-    "./divider": {
-      "types": "./divider/index.d.ts",
-      "esm2022": "./esm2022/divider/ngwr-divider.mjs",
-      "esm": "./esm2022/divider/ngwr-divider.mjs",
-      "default": "./fesm2022/ngwr-divider.mjs"
-    },
     "./dialog": {
       "types": "./dialog/index.d.ts",
       "esm2022": "./esm2022/dialog/ngwr-dialog.mjs",
       "esm": "./esm2022/dialog/ngwr-dialog.mjs",
       "default": "./fesm2022/ngwr-dialog.mjs"
     },
+    "./divider": {
+      "types": "./divider/index.d.ts",
+      "esm2022": "./esm2022/divider/ngwr-divider.mjs",
+      "esm": "./esm2022/divider/ngwr-divider.mjs",
+      "default": "./fesm2022/ngwr-divider.mjs"
+    },
     "./form": {
       "types": "./form/index.d.ts",
       "esm2022": "./esm2022/form/ngwr-form.mjs",

package/skeleton/skeleton.scss

@@ -1,4 +1,4 @@
-@import '../styles/vars';
+@use '../styles/maps' as maps;
 
 $skeleton-prefix: wr-skeleton;
 
@@ -37,7 +37,7 @@ $skeleton-prefix: wr-skeleton;
   }
 }
 
-@each $color, $value in $theme-colors {
+@each $color, $value in maps.$theme-colors-map {
   .wr-skeleton--#{$color} {
     background: rgba(var(--wr-color-#{$color}-rgb), 0.125);
 

package/styles/{grid.scss → _grid.scss}

@@ -1,41 +1,22 @@
+@use 'maps';
+
 // Variables
 $columns-count: 12;
 $gap: #{var(--wr-grid-gutter)};
-$breakpoints-map: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px,
-  xga: 1600px,
-  fhd: 1920px,
-  rt: 2560px
-);
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1320px,
-  xga: 1530px,
-  fhd: 1830px,
-  rt: 2470px
-);
 
 // Helpers
-@function bp-min($name, $breakpoints: $breakpoints-map) {
+@function bp-min($name, $breakpoints: maps.$breakpoints-map) {
   $min: map-get($breakpoints, $name);
   @return if($min != 0, $min, null);
 }
-@function bp-max($name, $breakpoints: $breakpoints-map) {
+@function bp-max($name, $breakpoints: maps.$breakpoints-map) {
   $max: map-get($breakpoints, $name);
   @return if($max and $max > 0, $max - .02, null);
 }
-@function bp-infix($name, $breakpoints: $breakpoints-map) {
+@function bp-infix($name, $breakpoints: maps.$breakpoints-map) {
   @return if(bp-min($name, $breakpoints) == null, '', '-#{$name}');
 }
-@mixin media-breakpoint-up($name, $breakpoints: $breakpoints-map) {
+@mixin media-breakpoint-up($name, $breakpoints: maps.$breakpoints-map) {
   $min: bp-min($name, $breakpoints);
   @if $min {
     @media (min-width: $min) {
@@ -45,7 +26,7 @@ $container-max-widths: (
     @content;
   }
 }
-@mixin media-breakpoint-down($name, $breakpoints: $breakpoints-map) {
+@mixin media-breakpoint-down($name, $breakpoints: maps.$breakpoints-map) {
   $max: bp-max($name, $breakpoints);
   @if $max {
     @media (max-width: $max) {
@@ -62,7 +43,7 @@ $container-max-widths: (
   margin-left: auto;
   margin-right: auto;
 }
-@mixin make-grid($columns: $columns-count, $breakpoints: $breakpoints-map) {
+@mixin make-grid($columns: $columns-count, $breakpoints: maps.$breakpoints-map) {
   @each $bp in map-keys($breakpoints) {
     $infix: bp-infix($bp, $breakpoints);
 
@@ -82,21 +63,21 @@ $container-max-widths: (
   @include make-container();
 }
 
-@each $bp, $max-width in $container-max-widths {
+@each $bp, $max-width in maps.$container-widths-map {
   .container-#{$bp} {
     @extend .container-fluid;
   }
 
-  @include media-breakpoint-up($bp, $breakpoints-map) {
+  @include media-breakpoint-up($bp, maps.$breakpoints-map) {
     %responsive-container-#{$bp} {
       max-width: $max-width;
     }
 
     $extend-breakpoint: true;
 
-    @each $name, $width in $breakpoints-map {
+    @each $name, $width in maps.$breakpoints-map {
       @if ($extend-breakpoint) {
-        .container#{bp-infix($name, $breakpoints-map)} {
+        .container#{bp-infix($name, maps.$breakpoints-map)} {
           @extend %responsive-container-#{$bp};
         }
 

package/styles/cdk.scss

@@ -1 +1 @@
-@import '@angular/cdk/overlay-prebuilt.css';
+@use '@angular/cdk/overlay-prebuilt.css';

package/styles/maps.scss

@@ -0,0 +1,31 @@
+$theme-colors-map: (
+  'primary',
+  'secondary',
+  'light',
+  'medium',
+  'dark',
+  'success',
+  'warning',
+  'danger'
+);
+$breakpoints-map: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+  xga: 1600px,
+  fhd: 1920px,
+  rt: 2560px
+);
+$container-widths-map: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px,
+  xga: 1530px,
+  fhd: 1830px,
+  rt: 2470px
+);

package/tag/tag.scss

@@ -1,4 +1,4 @@
-@import '../styles/vars';
+@use '../styles/maps' as maps;
 
 .wr-tag {
   display: inline-block;
@@ -66,7 +66,7 @@
   }
 }
 
-@each $color in $theme-colors {
+@each $color in maps.$theme-colors-map {
   .wr-tag--#{$color} {
     color: var(--wr-color-#{$color}-contrast);
     background-color: var(--wr-color-#{$color});

package/styles/vars.scss

@@ -1,2 +0,0 @@
-/* Theme colors */
-$theme-colors: ('primary', 'secondary', 'light', 'medium', 'dark', 'success', 'warning', 'danger');