@natec/mef-dev-ui-kit 20.1.22 → 20.1.23

package/index.d.ts

@@ -9,10 +9,10 @@ import * as i5 from '@angular/forms';
 import { ControlValueAccessor, AbstractControl, FormGroupDirective, NgForm, NgControl, Validator, ValidationErrors } from '@angular/forms';
 import * as i7 from '@angular/cdk/bidi';
 import { Directionality, Direction } from '@angular/cdk/bidi';
-import { FocusableOption, FocusOrigin, ActiveDescendantKeyManager, FocusKeyManager } from '@angular/cdk/a11y';
 import { CdkAccordion, CdkAccordionItem } from '@angular/cdk/accordion';
 import * as i3 from '@angular/cdk/portal';
 import { TemplatePortal, ComponentPortal, CdkPortalOutlet, CdkPortal } from '@angular/cdk/portal';
+import { FocusableOption, FocusOrigin, ActiveDescendantKeyManager, FocusKeyManager } from '@angular/cdk/a11y';
 import * as i1$3 from '@angular/cdk/dialog';
 import { DialogConfig, CdkDialogContainer, DialogRef, Dialog } from '@angular/cdk/dialog';
 import * as i1$2 from '@angular/cdk/scrolling';
@@ -161,7 +161,7 @@ declare class CollapseSetComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<CollapseSetComponent, "mefdev-collapse-set", never, { "expandAny": { "alias": "expandAny"; "required": false; }; "Accordion": { "alias": "Accordion"; "required": false; }; "Horizontal": { "alias": "Horizontal"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 
-declare const mefDevCollapseModuleComponents: (typeof CollapseSetComponent | typeof CollapseComponent)[];
+declare const mefDevCollapseModuleComponents: (typeof CollapseComponent | typeof CollapseSetComponent)[];
 declare class MefDevCollapseModule {
     static forRoot(): ModuleWithProviders<MefDevCollapseModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MefDevCollapseModule, never>;
@@ -2050,7 +2050,7 @@ declare class MDAccordion extends CdkAccordion implements AccordionBase, AfterCo
     static ngAcceptInputType_hideToggle: unknown;
 }
 
-declare const components: (typeof ExpansionPanelDescription)[];
+declare const components: (typeof ExpansionPanelActionRow)[];
 declare class MDCollapseModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MDCollapseModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<MDCollapseModule, never, [typeof i1.CommonModule, typeof MDAccordion, typeof MDExpansionPanel, typeof ExpansionPanelActionRow, typeof MDExpansionPanelHeader, typeof ExpansionPanelTitle, typeof ExpansionPanelDescription, typeof MDExpansionPanelContent], [typeof MDAccordion, typeof MDExpansionPanel, typeof ExpansionPanelActionRow, typeof MDExpansionPanelHeader, typeof ExpansionPanelTitle, typeof ExpansionPanelDescription, typeof MDExpansionPanelContent]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@natec/mef-dev-ui-kit",
-  "version": "20.1.22",
+  "version": "20.1.23",
   "description": "MEF.DEV UI Kit Library",
   "author": {
     "name": "NATEC"

package/src/lib/styles/core.scss

@@ -2,10 +2,7 @@
 @use 'fonts.scss' as *;
 @use 'icons.scss' as *;
 
-@use 'pg/_color.scss' as *;
-@use 'pg/_mixins.scss' as *;
-
-// depricated styles, to be removed in future releases
+// Deprecated styles, to be removed in future releases
 @use 'pg/modules/_tabs_accordian.scss' as *;
 @use 'pg/modules/_tabs.scss' as *;
 @use 'pg/modules/_switch.scss' as *;
@@ -24,6 +21,32 @@
 @use 'pg/vendor/md-grid.scss' as *;
 @use 'pg/toaster.scss' as *;
 
+// Bootstrap CSS custom properties override
+:root {
+  // Colors
+  --bs-primary: #{$Link};
+  --bs-secondary: #{$Light-Gray-1};
+  --bs-success: #{$Green};
+  --bs-danger: #{$Red};
+  --bs-warning: #{$Yellow};
+  --bs-info: #{$Link-on-dark};
+  --bs-light: #{$Light-Gray-3};
+  --bs-dark: #{$Black-Color};
+
+  // Typography
+  --bs-body-font-family: #{$font-body};
+  --bs-body-color: #{$Black-Color};
+  --bs-body-bg: #{$White};
+
+  // Links
+  --bs-link-color: #{$Link};
+  --bs-link-hover-color: #{$Red};
+
+  // Borders
+  --bs-border-color: #{$Light-Gray-2};
+  --bs-border-radius: #{$default-border-size};
+}
+
 .ql-container {
     height: 240px;
 }
@@ -35,18 +58,18 @@ a:hover * {
 .ql-toolbar.ql-snow {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
-    border-color: #f3f3f3;
-    background: white;
+    border-color: $Light-Gray-3;
+    background: $White;
 }
 
 .ql-toolbar.ql-snow + .ql-container.ql-snow {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
-    background-color: white;
-    border-color: #f3f3f3;
+    background-color: $White;
+    border-color: $Light-Gray-3;
 }
 
 .badge {
   --bs-badge-padding-x: 1.0em;
   --bs-badge-padding-y: 0.5em;
-}
+}

package/src/lib/styles/pg/modules/_cards.scss

@@ -3,13 +3,12 @@
 $assets-url: "../../assets" ;
 */
 @use '../../vars.scss' as *;
-@use '../_mixins.scss' as mix;
 @use 'sass:color' as color;
 
 .card {
-  @include mix.box-shadow(none);
-  @include mix.border-radius(1px);
-  @include mix.transition(all 0.2s ease);
+  box-shadow: none;
+  border-radius: 1px;
+  transition: all 0.2s ease;
   position: relative;
   margin-bottom: 20px;
   width: 100%;
@@ -47,7 +46,7 @@ $assets-url: "../../assets" ;
       text-overflow: ellipsis;
       -webkit-text-stroke: 0px;
       filter: alpha(opacity=40);
-      @include mix.transition(opacity 0.3s ease);
+      transition: opacity 0.3s ease;
     }
     .card-controls {
       float: right;
@@ -116,7 +115,7 @@ $assets-url: "../../assets" ;
   &.card-transparent {
     background: transparent;
     border: none;
-    @include mix.box-shadow(none);
+    box-shadow: none;
     .card-body {
       background: transparent;
     }
@@ -130,7 +129,7 @@ $assets-url: "../../assets" ;
     }
   }
   &.card-featured {
-    @include mix.box-shadow(-1px 1px 3px 0px rgba(121, 129, 135, 0.14));
+    box-shadow: -1px 1px 3px 0px rgba(121, 129, 135, 0.14);
     width: calc(100% - 50px);
     float: right;
     .card-title {
@@ -176,7 +175,7 @@ $assets-url: "../../assets" ;
       height: 38px;
       margin-left: -39px;
       float: left;
-      @include mix.box-shadow(inset -3px 0px 3px 0px rgba(0, 0, 0, 0.14));
+      box-shadow: inset -3px 0px 3px 0px rgba(0, 0, 0, 0.14);
       &.green {
         background: $color-complete;
       }
@@ -275,7 +274,7 @@ $assets-url: "../../assets" ;
   padding-top: 10px;
   padding-bottom: 10px;
   &.card-refresh {
-    @include mix.transition(opacity 0.3s ease);
+    transition: opacity 0.3s ease;
     &.refreshing {
       opacity: 1;
     }
@@ -333,7 +332,7 @@ $assets-url: "../../assets" ;
   height: 15px;
   display: block;
   background-size: cover;
-  @include mix.transition(opacity 0.3s ease);
+  transition: opacity 0.3s ease;
   &.fade {
     opacity: 0.1;
   }
@@ -347,7 +346,7 @@ $assets-url: "../../assets" ;
   display: block;
   background-size: cover;
   opacity: 0;
-  @include mix.transition(opacity 0.3s ease);
+  transition: opacity 0.3s ease;
   &.active {
     opacity: 1;
   }

package/src/lib/styles/pg/modules/_select.scss

@@ -1,5 +1,4 @@
 @use '../../vars.scss' as *;
-@use '../_mixins.scss' as mix;
 @use "sass:color" as color;
 
 $select-prefix-cls: "pg-select";
@@ -291,7 +290,14 @@ $background-color-base:$color-master-lighter;
     min-height: $input-height-base;
     cursor: text;
     padding-bottom: 3px;
-    @include mix.clearfix;
+    &:before,
+    &:after {
+      content: " ";
+      display: table;
+    }
+    &:after {
+      clear: both;
+    }
     .pg-select-selection__placeholder{
       left: 6px;
     }

package/src/lib/styles/pg/modules/_sidebar.scss

@@ -3,7 +3,6 @@
 */
 @use 'sass:color';
 @use '../../vars.scss' as *;
-@use '../_mixins.scss' as mix;
 
 body {
     &.mobile {

package/src/lib/styles/pg/modules/_switch.scss

@@ -1,6 +1,5 @@
 @use "sass:color";
 @use '../../vars.scss' as *;
-@use '../_mixins.scss' as mix;
 
 $disabled-color_:$color-master-lighter;
 $font-size-base:14px;
@@ -51,7 +50,7 @@ $ease-in-out-circ:ease;
   }
 
   &:focus {
-    box-shadow: 0 0 0 2px fade($color-master-light, 20%);
+    box-shadow: 0 0 0 2px rgba($color-master-light, 0.2);
     outline: 0;
   }
 

package/src/lib/styles/pg/modules/_tabs.scss

@@ -1,7 +1,6 @@
 @use "sass:color";
 @use '../../vars.scss' as *;
 @use '../../fonts.scss' as *;
-@use '../_mixins.scss' as mix;
 
 mefdev-tab, mefdev-tabs-nav, mefdev-tabset {
     display: block;

package/src/lib/styles/pg/modules/_tabs_accordian.scss

@@ -8,7 +8,6 @@
 
 @use "sass:color";
 @use '../../vars.scss' as *;
-@use '../_mixins.scss' as mix;
 
 .nav-tabs {
   position: relative;
@@ -35,7 +34,7 @@
       font-family: Montserrat;
       font-weight: 500;
       letter-spacing: 0.06em;
-      color: fade($color-master, 70%);
+      color: rgba($color-master, 0.7);
       font-size: 10.5px;
       min-width: 70px;
       border-color: transparent;
@@ -57,20 +56,20 @@
     & > .tab-pane {
       &.slide-left,
       &.slide-right {
-        @include mix.transition(all .3s ease);
+        transition: all .3s ease;
         &.sliding {
           opacity: 0 !important;
         }
         &.active {
-          @include mix.translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
           opacity: 1;
         }
       }
       &.slide-left.sliding {
-        @include mix.translate3d(10%, 0, 0);
+        transform: translate3d(10%, 0, 0);
       }
       &.slide-right.sliding {
-        @include mix.translate3d(-10%, 0, 0);
+        transform: translate3d(-10%, 0, 0);
       }
     }
   }
@@ -135,8 +134,8 @@
     & > a{
       &:after {
         position: absolute;
-        @include mix.transition(all 0.1s linear 0s);
-        -webkit-backface-visibility: hidden;
+        transition: all 0.1s linear 0s;
+        backface-visibility: hidden;
         width: 100%;
         display: block;
         background-color: $color-danger;
@@ -268,7 +267,7 @@
       &:hover,
       &:focus {
         overflow: visible;
-        @include mix.transition( color 0.2s ease 0s);
+        transition: color 0.2s ease 0s;
       }
     }
   }
@@ -346,16 +345,16 @@
 */
 
 .nav-tabs-fillup {
-  @include mix.backface-visibility(hidden);
-  @include mix.perspective(1000);
+  backface-visibility: hidden;
+  perspective: 1000px;
   & > li {
     overflow: hidden;
     & > a {
-      @include mix.backface-visibility(hidden);
-      @include mix.transition(color 0.3s ease 0s);
+      backface-visibility: hidden;
+      transition: color 0.3s ease 0s;
       background: transparent;
       &:after {
-        @include mix.backface-visibility(hidden);
+        backface-visibility: hidden;
         background: none repeat scroll 0 0 $color-success;
         border: 1px solid $color-success;
         content: "";
@@ -363,13 +362,7 @@
         left: 0;
         position: absolute;
         top: 0;
-        -webkit-transform: translate3d(0,
-        100%,
-        0px);
-        transform: translate3d(0,
-        100%,
-        0px);
-        -webkit-transition: -webkit-transform 0.3s ease 0s;
+        transform: translate3d(0, 100%, 0px);
         transition: transform 0.3s ease 0s;
         width: 100%;
         z-index: -1;
@@ -399,10 +392,8 @@
         }
       }
       span {
-        @include mix.backface-visibility(hidden);
-        -webkit-transform: translate3d(0px, 5px, 0px);
+        backface-visibility: hidden;
         transform: translate3d(0px, 5px, 0px);
-        -webkit-transition: -webkit-transform 0.5s ease 0s;
         transition: transform 0.5s ease 0s;
         display: block;
         font-weight: 700;
@@ -418,17 +409,17 @@
           color: #fff;
         }
         &:after {
-          @include mix.translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
         }
         span {
-          @include mix.translate3d(0px, -5px, 0px);
+          transform: translate3d(0px, -5px, 0px);
         }
       }
     }
   }
   .icon:before {
-    @include mix.translate3d(0px, 5px, 0px);
-    @include mix.transition(transform 0.5s ease 0s);
+    transform: translate3d(0px, 5px, 0px);
+    transition: transform 0.5s ease 0s;
     display: block;
     margin: 0;
   }
@@ -451,7 +442,7 @@
       }
       &.active {
         a{&:after {
-            @include mix.translate3d(0px, 0px, 0px);
+            transform: translate3d(0px, 0px, 0px);
           }
         }
       }
@@ -461,19 +452,19 @@
     & > li {
       & > a {
         &:after {
-          @include mix.translate3d(100%, 0, 0);
+          transform: translate3d(100%, 0, 0);
         }
         span {
-          @include mix.translate3d(5px, 0, 0px);
+          transform: translate3d(5px, 0, 0px);
         }
       }
       &.active {
         a{span {
-            @include mix.translate3d(-5px, 0, 0px);
+            transform: translate3d(-5px, 0, 0px);
           }
         }
         .icon:before {
-          @include mix.translate3d(-5px, 0, 0px);
+          transform: translate3d(-5px, 0, 0px);
         }
       }
     }
@@ -482,20 +473,20 @@
     & > li {
       & > a {
         &:after {
-          @include mix.translate3d(-100%, 0, 0);
+          transform: translate3d(-100%, 0, 0);
           left: -1px;
         }
         span {
-          @include mix.translate3d(-5px, 0, 0px);
+          transform: translate3d(-5px, 0, 0px);
         }
       }
       &.active {
         a{span {
-            @include mix.translate3d(5px, 0, 0px);
+            transform: translate3d(5px, 0, 0px);
           }
         }
         .icon:before {
-          @include mix.translate3d(5px, 0, 0px);
+          transform: translate3d(5px, 0, 0px);
         }
       }
     }
@@ -599,12 +590,11 @@
           color: $color-master;
         }
         &.collapsed {
-          color: fade($color-master,
-          70%);
+          color: rgba($color-master, 0.7);
           opacity: 1;
           &:after {
             content: "\f055";
-            color: fade($color-master, 70%);
+            color: rgba($color-master, 0.7);
             opacity: .7;
           }
           &:hover {

package/src/lib/styles/pg/modules/_typography.scss

@@ -6,7 +6,6 @@
 --------------------------------------------------
 */
 @use '../../vars.scss' as *;
-@use '../_mixins.scss' as mix;
 @use 'sass:color' as color;
 
 html {