@soyfri/template 1.0.6 → 1.0.8

package/dist/assets/sass/core/components/components.scss

@@ -3,70 +3,79 @@
 //
 
 // Extended bootstrap utilities
-@import "utilities";
+@use "utilities" as *; // Using `as *` to merge utilities directly into this scope
 
 // Bootstrap components
-@import "bootstrap/scss/bootstrap";
+// Bootstrap's main SCSS file is designed to be @used.
+// By default, it exposes a lot of things globally if you import it this way,
+// but for a cleaner approach, you could import specific modules and use their functions/mixins.
+// However, for simplicity and common usage, importing the main bootstrap.scss and then other components
+// often means you still want some level of global access for standard Bootstrap elements.
+// If you encounter issues, you might need to import specific bootstrap modules (e.g., @use "bootstrap/scss/mixins" as bs-mixins;)
+// or configure Bootstrap's own @use statements in its entry point.
+@use "bootstrap/scss/bootstrap" as *; // Assuming you want all Bootstrap components globally available
 
 // Custom components
-@import "root";
-@import "reboot";
-@import "type";
-@import "theme-mode";
-@import "animation";
-@import "alert";
-@import "dropdown";
-@import "toasts";
-@import "nav";
-@import "nav-line-tabs";
-@import "nav-pills-custom";
-@import "pagination";
-@import "separator";
-@import "carousel";
-@import "menu";
-@import "anchor";
-@import "card";
-@import "breadcrumb";
-@import "buttons";
-@import "modal";
-@import "code";
-@import "forms";
-@import "progress";
-@import "tables";
-@import "popover";
-@import "tooltip";
-@import "accordion";
-@import "image-input";
-@import "symbol";
-@import "pulse";
-@import "page-loader";
-@import "scrolltop";
-@import "svg-icon";
-@import "fixed";
-@import "timeline";
-@import "timeline-label";
-@import "overlay";
-@import "bullet";
-@import "drawer";
-@import "badge";
-@import "indicator";
-@import "hover";
-@import "rotate";
-@import "scroll";
-@import "rating";
-@import "stepper";
-@import "toggle";
-@import "shape";
-@import "ribbon";
-@import "blockui";
-@import "explore";
-@import "engage";
-@import "cookiealert";
-@import "print";
-@import "helpers";
-@import "tree";
-@import "testimonials-slider";
-@import "bootstrap-icon";
-@import "wizard";
-@import "title-reports";
-@import "image.scss"
+// Using `as *` for each custom component to make their styles, variables, and mixins
+// available directly without needing a prefix like `root.$variable`.
+@use "root" as *;
+@use "reboot" as *;
+@use "type" as *;
+@use "theme-mode" as *;
+@use "animation" as *;
+@use "alert" as *;
+@use "dropdown" as *;
+@use "toasts" as *;
+@use "nav" as *;
+@use "nav-line-tabs" as *;
+@use "nav-pills-custom" as *;
+@use "pagination" as *;
+@use "separator" as *;
+@use "carousel" as *;
+@use "menu" as *;
+@use "anchor" as *;
+@use "card" as *;
+@use "breadcrumb" as *;
+@use "buttons" as *;
+@use "modal" as *;
+@use "code" as *;
+@use "forms" as *;
+@use "progress" as *;
+@use "tables" as *;
+@use "popover" as *;
+@use "tooltip" as *;
+@use "accordion" as *;
+@use "image-input" as *;
+@use "symbol" as *;
+@use "pulse" as *;
+@use "page-loader" as *;
+@use "scrolltop" as *;
+@use "svg-icon" as *;
+@use "fixed" as *;
+@use "timeline" as *;
+@use "timeline-label" as *;
+@use "overlay" as *;
+@use "bullet" as *;
+@use "drawer" as *;
+@use "badge" as *;
+@use "indicator" as *;
+@use "hover" as *;
+@use "rotate" as *;
+@use "scroll" as *;
+@use "rating" as *;
+@use "stepper" as *;
+@use "toggle" as *;
+@use "shape" as *;
+@use "ribbon" as *;
+@use "blockui" as *;
+@use "explore" as *;
+@use "engage" as *;
+@use "cookiealert" as *;
+@use "print" as *;
+@use "helpers" as *;
+@use "tree" as *;
+@use "testimonials-slider" as *;
+@use "bootstrap-icon" as *;
+@use "wizard" as *;
+@use "title-reports" as *;
+@use "image.scss" as *;

package/dist/assets/sass/core/components/helpers/_background.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 //
 // Custom background helpers
 //
@@ -216,7 +217,7 @@
 }
 
 // Responsive helpers
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
     @include media-breakpoint-up($breakpoint) {
 		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 		

package/dist/assets/sass/core/components/helpers/_flex.scss

@@ -1,9 +1,10 @@
+@use "sass:map";
 //
 // Flex Utilities
 //
 
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
     @include media-breakpoint-up($breakpoint) {
         $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/menu/_base.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 //
 // Menu Base
 //
@@ -147,7 +148,7 @@
 
 // Responsive 
 @each $direction in (up, down) {
-    @each $breakpoint in map-keys($grid-breakpoints) {
+    @each $breakpoint in map.keys($grid-breakpoints) {
         $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
         @if $infix and $direction == down {

package/dist/assets/sass/core/components/mixins/_menu.scss

@@ -1,3 +1,5 @@
+@use "svg-bg-icon";
+
 //
 // Label
 //
@@ -166,9 +168,9 @@
 	@if ( $arrow-color != null ) {
 		// Arrow
 		.menu-arrow:after {
-			@include svg-bg-icon(arrow-start, $arrow-color);
+			@include svg-bg-icon.svg-bg-icon(arrow-start, $arrow-color);
 			/*rtl:begin:remove*/
-			@include svg-bg-icon(arrow-end, $arrow-color);
+			@include svg-bg-icon.svg-bg-icon(arrow-end, $arrow-color);
 			/*rtl:end:remove*/
 		}
 	}

package/dist/assets/sass/core/components/wizard.scss

@@ -3,4 +3,4 @@
 //
 
 // Import Dependencies
-@import "wizard/wizard";
+@use "wizard/wizard";

package/dist/assets/sass/core/layout/base/_layout.scss

@@ -2,28 +2,28 @@
 // App Layout
 //
 
-@import "mixins/layout-minimize";
-@import "mixins/layout-transition";
-@import "root";
-@import "reboot";
-@import "page";
-@import "page-loader";
-@import "container";
-@import "print";
-@import "navbar";
-@import "header/header";
-@import "header/header-primary";
-@import "header/header-secondary";
-@import "header/header-tertiary";
-@import "toolbar";
-@import "hero";
-@import "sidebar/sidebar";
-@import "sidebar/sidebar-primary";
-@import "sidebar/sidebar-secondary";
-@import "sidebar/sidebar-panel";
-@import "aside/aside";
-@import "wrapper";
-@import "main";
-@import "content";
-@import "footer";
-@import "layout-builder";
+@use "mixins/layout-minimize";
+@use "mixins/layout-transition";
+@use "root";
+@use "reboot";
+@use "page";
+@use "page-loader";
+@use "container";
+@use "print";
+@use "navbar";
+@use "header/header";
+@use "header/header-primary";
+@use "header/header-secondary";
+@use "header/header-tertiary";
+@use "toolbar";
+@use "hero";
+@use "sidebar/sidebar";
+@use "sidebar/sidebar-primary";
+@use "sidebar/sidebar-secondary";
+@use "sidebar/sidebar-panel";
+@use "aside/aside";
+@use "wrapper";
+@use "main";
+@use "content";
+@use "footer";
+@use "layout-builder";

package/dist/assets/sass/core/vendors/plugins/_mixins.scss

@@ -2,4 +2,4 @@
 // Mixins
 //
 
-@import "mixins/nouislider";
+@use "mixins/nouislider";

package/dist/assets/sass/core/vendors/plugins/_plugins.angular.scss

@@ -3,10 +3,10 @@
 //
 
 // Import Dependencies
-@import "root";
-@import "prismjs";
-@import "nouislider";
-@import "apexcharts";
-@import "fslightbox";
-@import "tiny-slider";
-@import "fullcalendar";
+@use "root";
+@use "prismjs";
+@use "nouislider";
+@use "apexcharts";
+@use "fslightbox";
+@use "tiny-slider";
+@use "fullcalendar";

package/dist/assets/sass/core/vendors/plugins/_plugins.react.scss

@@ -3,10 +3,10 @@
 //
 
 // Import Dependencies
-@import "root";
-@import "prismjs";
-@import "nouislider";
-@import "apexcharts";
-@import "fslightbox";
-@import "tiny-slider";
-@import "fullcalendar";
+@use "root";
+@use "prismjs";
+@use "nouislider";
+@use "apexcharts";
+@use "fslightbox";
+@use "tiny-slider";
+@use "fullcalendar";

package/dist/assets/sass/core/vendors/plugins/_plugins.scss

@@ -3,32 +3,32 @@
 //
 
 // Import Dependencies
-@import "root";
-@import "prismjs";
-@import "fslightbox";
-@import "select2";
-@import "formvalidation";
-@import "daterangepicker";
-@import "flatpickr";
-@import "tagify";
-@import "bootstrap-maxlength";
-@import "ckeditor";
-@import "datatables";
-@import "dropzone";
-@import "gmaps";
-@import "nouislider";
-@import "quill";
-@import "recaptcha";
-@import "sweetalert2";
-@import "tinymce";
-@import "toastr";
-@import "draggable";
-@import "apexcharts";
-@import "leaflet";
-@import "tiny-slider";
-@import "fullcalendar";
-@import "jkanban";
-@import "jstree";
-@import "vis-timeline";
-@import "tempus-dominus";
-@import "keenicons";
+@use "root";
+@use "prismjs";
+@use "fslightbox";
+@use "select2";
+@use "formvalidation";
+@use "daterangepicker";
+@use "flatpickr";
+@use "tagify";
+@use "bootstrap-maxlength";
+@use "ckeditor";
+@use "datatables";
+@use "dropzone";
+@use "gmaps";
+@use "nouislider";
+@use "quill";
+@use "recaptcha";
+@use "sweetalert2";
+@use "tinymce";
+@use "toastr";
+@use "draggable";
+@use "apexcharts";
+@use "leaflet";
+@use "tiny-slider";
+@use "fullcalendar";
+@use "jkanban";
+@use "jstree";
+@use "vis-timeline";
+@use "tempus-dominus";
+@use "keenicons";

package/dist/assets/sass/core/vendors/plugins/_plugins.vue.scss

@@ -3,10 +3,10 @@
 //
 
 // Import Dependencies
-@import "root";
-@import "prismjs";
-@import "nouislider";
-@import "apexcharts";
-@import "fslightbox";
-@import "tiny-slider";
-@import "fullcalendar";
+@use "root";
+@use "prismjs";
+@use "nouislider";
+@use "apexcharts";
+@use "fslightbox";
+@use "tiny-slider";
+@use "fullcalendar";

package/dist/assets/sass/core/vendors/plugins/_variables-dark.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 //
 // 3rd-party config
 //
@@ -8,11 +9,11 @@ $prismjs-bg-dark: #151521;
 
 $prismjs-border-dark: rgba($white, 0.1);
 
-$prismjs-btn-bg-dark: lighten($prismjs-bg-dark, 9%);
-$prismjs-btn-bg-hover-dark: lighten($prismjs-bg-dark, 9%);
+$prismjs-btn-bg-dark: color.adjust($prismjs-bg-dark, $lightness: 9%);
+$prismjs-btn-bg-hover-dark: color.adjust($prismjs-bg-dark, $lightness: 9%);
 
 $prismjs-btn-color-dark: rgba($white, 0.75);
 $prismjs-btn-color-hover-dark: $primary;
 
-$prismjs-scrollbar-color-dark: lighten($prismjs-bg-dark, 12%);
-$prismjs-scrollbar-color-hover-dark: lighten($prismjs-bg-dark, 15%);
+$prismjs-scrollbar-color-dark: color.adjust($prismjs-bg-dark, $lightness: 12%);
+$prismjs-scrollbar-color-hover-dark: color.adjust($prismjs-bg-dark, $lightness: 15%);

package/dist/assets/sass/core/vendors/plugins/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 //
 // 3rd-party config
 //
@@ -8,14 +9,14 @@ $prismjs-bg: #1e1e3f;
 
 $prismjs-border: rgba($white, 0.1);
 
-$prismjs-btn-bg: lighten($prismjs-bg, 9%);
-$prismjs-btn-bg-hover: lighten($prismjs-bg, 9%);
+$prismjs-btn-bg: color.adjust($prismjs-bg, $lightness: 9%);
+$prismjs-btn-bg-hover: color.adjust($prismjs-bg, $lightness: 9%);
 
 $prismjs-btn-color: rgba($white, 0.75);
 $prismjs-btn-color-hover: $primary;
 
-$prismjs-scrollbar-color: lighten($prismjs-bg, 12%);
-$prismjs-scrollbar-color-hover: lighten($prismjs-bg, 15%);
+$prismjs-scrollbar-color: color.adjust($prismjs-bg, $lightness: 12%);
+$prismjs-scrollbar-color-hover: color.adjust($prismjs-bg, $lightness: 15%);
 
 // Bootstrap Maxlength
 $bootstrap-maxlength-z-index: 1040;

package/dist/assets/sass/layout/_layout.scss

@@ -2,16 +2,16 @@
 // Layout
 //
 
-@import "root";
-@import "sidebar/sidebar";
-@import "sidebar/sidebar-minimize";
-@import "sidebar/sidebar-dark";
-@import "sidebar/sidebar-light";
-@import "aside";
-@import "header/header";
-@import "header/header-dark";
-@import "header/header-sidebar-light";
-@import "content";
-@import "toolbar";
-@import "main";
-@import "page-title";
+@use "root";
+@use "sidebar/sidebar";
+@use "sidebar/sidebar-minimize";
+@use "sidebar/sidebar-dark";
+@use "sidebar/sidebar-light";
+@use "aside";
+@use "header/header";
+@use "header/header-dark";
+@use "header/header-sidebar-light";
+@use "content";
+@use "toolbar";
+@use "main";
+@use "page-title";

package/dist/assets/sass/layout/_variables.custom.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 //
 // Variables
 //
@@ -43,7 +44,7 @@ $app-header-light-separator-color-dark: $border-color-dark;
 $app-header-dark-bg-color:$coal-600;
 $app-header-dark-separator-color: #282a3d;
 $app-header-dark-scrollbar-color: #3b3b64;
-$app-header-dark-scrollbar-color-hover: lighten($app-header-dark-scrollbar-color, 3%);
+$app-header-dark-scrollbar-color-hover: color.adjust($app-header-dark-scrollbar-color, $lightness: 3%);
 $app-header-dark-menu-active-link-bg-color: #242424;
 
 // Sidebar base
@@ -88,7 +89,7 @@ $app-sidebar-light-header-menu-link-bg-color-active-dark: $gray-100-dark;
 // Sidebar dark
 $app-sidebar-dark-bg-color: $coal-500;
 $app-sidebar-dark-separator-color: $light-light-dark;
-$app-sidebar-dark-scrollbar-color-hover: lighten($app-sidebar-dark-separator-color, 2%);
+$app-sidebar-dark-scrollbar-color-hover: color.adjust($app-sidebar-dark-separator-color, $lightness: 2%);
 $app-sidebar-dark-menu-heading-color: $gray-500-dark;
 $app-sidebar-dark-menu-sub-link-color: $gray-600-dark;;
 $app-sidebar-dark-menu-link-bg-color-active: #1C1C21;

package/dist/assets/sass/style.react.scss

@@ -17,12 +17,16 @@
 ////////////////////////////////////////////////////////////////
 
 // Initialize
-@import "init";
+// Asumimos que 'init' no expone miembros para ser usados con prefijo, o que Metronic los espera globales.
+// Si expone mixins/variables que usas directamente en otros archivos sin prefijo, podrías necesitar `as *`.
+@use "init"; 
 
 // Plugins
-@import "./core/vendors/plugins/plugins";
-@import "vendors/react-select.scss";
+// Similar al anterior, si no usas explícitamente sus miembros con prefijo.
+// 'react-select.scss' es un buen candidato para usar `as *` si sus estilos no tienen prefijos únicos.
+@use "./core/vendors/plugins/plugins";
+@use "vendors/react-select.scss" as *; // Usamos `as *` para importar sus estilos sin prefijo.
 
 #root {
   display: contents;
-}
+}

package/dist/assets/sass/style.scss

@@ -3,12 +3,12 @@
 //
 
 // Initialize
-@import "init";
+@use "init"; // Cambiado de @import "init";
 
 // Components
-@import "./core/components/components";
-@import "components/components";
+@use "./core/components/components"; // Cambiado de @import "./core/components/components";
+@use "components/components"; // Cambiado de @import "components/components";
 
 // Layout
-@import "./core/layout/base/layout";
-@import "layout/layout";
+@use "./core/layout/base/layout"; // Cambiado de @import "./core/layout/base/layout";
+@use "layout/layout"; // Cambiado de @import "layout/layout";

package/dist/partials/index.d.ts

@@ -13,7 +13,6 @@ export * from './layout/theme-mode/ThemeModeSwitcher';
 export * from './content/dropdown/Dropdown1';
 export * from './content/dropdown/Dropdown2';
 export * from './content/editor/EditorToolbar';
-export * from './content/code-highlight/CodeBlock';
 export * from './content/portal/Portal';
 export * from './modals/create-app-stepper/CreateAppModal';
 export * from './modals/select-location/SelectLocationModal';

package/dist/partials/index.js

@@ -15,7 +15,7 @@ export * from './content/dropdown/Dropdown1';
 export * from './content/dropdown/Dropdown2';
 // editors
 export * from './content/editor/EditorToolbar';
-export * from './content/code-highlight/CodeBlock';
+// export * from './content/code-highlight/CodeBlock'
 export * from './content/portal/Portal';
 // modals
 export * from './modals/create-app-stepper/CreateAppModal';

package/dist/partials/widgets/charts/ChartsWidget1.js

@@ -108,23 +108,15 @@ function getChartOptions(height) {
             opacity: 1,
         },
         states: {
-            normal: {
-                filter: {
-                    type: 'none',
-                    value: 0,
-                },
-            },
             hover: {
                 filter: {
-                    type: 'none',
-                    value: 0,
+                    type: 'none'
                 },
             },
             active: {
                 allowMultipleDataPointsSelection: false,
                 filter: {
-                    type: 'none',
-                    value: 0,
+                    type: 'none'
                 },
             },
         },

package/dist/partials/widgets/charts/ChartsWidget2.js

@@ -106,23 +106,15 @@ function getChartOptions(height) {
             opacity: 1,
         },
         states: {
-            normal: {
-                filter: {
-                    type: 'none',
-                    value: 0,
-                },
-            },
             hover: {
                 filter: {
-                    type: 'none',
-                    value: 0,
+                    type: 'none'
                 },
             },
             active: {
                 allowMultipleDataPointsSelection: false,
                 filter: {
-                    type: 'none',
-                    value: 0,
+                    type: 'none'
                 },
             },
         },

package/dist/partials/widgets/charts/ChartsWidget3.js

@@ -113,23 +113,15 @@ function getChartOptions() {
             },
         },
         states: {
-            normal: {
-                filter: {
-                    type: 'none',
-                    value: 0,
-                },
-            },
             hover: {
                 filter: {
-                    type: 'none',
-                    value: 0,
+                    type: 'none'
                 },
             },
             active: {
                 allowMultipleDataPointsSelection: false,
                 filter: {
-                    type: 'none',
-                    value: 0,
+                    type: 'none'
                 },
             },
         },