@ng-nest/ui 18.0.12 → 19.0.0

package/style/core/index.css

@@ -1,177 +1,3 @@
-.cdk-overlay-container,
-.cdk-global-overlay-wrapper {
-  pointer-events: none;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-
-.cdk-overlay-container {
-  position: fixed;
-  z-index: 1000;
-}
-
-.cdk-overlay-container:empty {
-  display: none;
-}
-
-.cdk-global-overlay-wrapper {
-  display: flex;
-  position: absolute;
-  z-index: 1000;
-}
-
-.cdk-overlay-pane {
-  position: absolute;
-  pointer-events: auto;
-  box-sizing: border-box;
-  z-index: 1000;
-  display: flex;
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.cdk-overlay-backdrop {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  pointer-events: auto;
-  -webkit-tap-highlight-color: transparent;
-  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
-  opacity: 0;
-}
-
-.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
-  opacity: 1;
-}
-
-@media screen and (-ms-high-contrast: active) {
-  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
-    opacity: 0.6;
-  }
-}
-.cdk-overlay-dark-backdrop {
-  background: rgba(0, 0, 0, 0.32);
-}
-
-.cdk-overlay-transparent-backdrop,
-.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
-  opacity: 0;
-}
-
-.cdk-overlay-connected-position-bounding-box {
-  position: absolute;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  min-width: 1px;
-  min-height: 1px;
-}
-
-.cdk-global-scrollblock {
-  position: fixed;
-  width: 100%;
-  overflow-y: scroll;
-}
-.cdk-global-scrollblock::-webkit-scrollbar {
-  width: 0;
-}
-
-@media only screen and (max-width: 767px) {
-  [x-hidden-xs-only] {
-    display: none !important;
-  }
-}
-
-@media only screen and (min-width: 768px) {
-  [x-hidden-sm-and-up] {
-    display: none !important;
-  }
-}
-
-@media only screen and (max-width: 991px) {
-  [x-hidden-sm-only] {
-    display: none !important;
-  }
-}
-
-@media only screen and (max-width: 991px) {
-  [x-hidden-sm-and-down] {
-    display: none !important;
-  }
-}
-
-@media only screen and (min-width: 992px) {
-  [x-hidden-md-and-up] {
-    display: none !important;
-  }
-}
-
-@media only screen and (max-width: 1199px) {
-  [x-hidden-md-only] {
-    display: none !important;
-  }
-}
-
-@media only screen and (max-width: 1199px) {
-  [x-hidden-md-and-down] {
-    display: none !important;
-  }
-}
-
-@media only screen and (min-width: 1200px) {
-  [x-hidden-lg-and-up] {
-    display: none !important;
-  }
-}
-
-@media only screen and (max-width: 1919px) {
-  [x-hidden-lg-only] {
-    display: none !important;
-  }
-}
-
-@media only screen and (max-width: 1919px) {
-  [x-hidden-lg-and-down] {
-    display: none !important;
-  }
-}
-
-@media only screen and (min-width: 1920px) {
-  [x-hidden-xl-only] {
-    display: none !important;
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-body,
-input,
-textarea {
-  font-family: var(--x-font-family);
-  font-size: var(--x-font-size);
-  color: var(--x-text);
-  line-height: var(--x-line-height);
-}
-
-code,
-pre,
-tt {
-  font-family: var(--x-font-code-family);
-}
-
-.x-portal-resizable {
-  display: inline-block;
-}
-
 .x-ripple {
   overflow: hidden;
   position: relative;
@@ -420,4 +246,91 @@ tt {
   text-decoration: underline;
 }
 
+@media only screen and (max-width: 767px) {
+  [x-hidden-xs-only] {
+    display: none !important;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  [x-hidden-sm-and-up] {
+    display: none !important;
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  [x-hidden-sm-only] {
+    display: none !important;
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  [x-hidden-sm-and-down] {
+    display: none !important;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  [x-hidden-md-and-up] {
+    display: none !important;
+  }
+}
+
+@media only screen and (max-width: 1199px) {
+  [x-hidden-md-only] {
+    display: none !important;
+  }
+}
+
+@media only screen and (max-width: 1199px) {
+  [x-hidden-md-and-down] {
+    display: none !important;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  [x-hidden-lg-and-up] {
+    display: none !important;
+  }
+}
+
+@media only screen and (max-width: 1919px) {
+  [x-hidden-lg-only] {
+    display: none !important;
+  }
+}
+
+@media only screen and (max-width: 1919px) {
+  [x-hidden-lg-and-down] {
+    display: none !important;
+  }
+}
+
+@media only screen and (min-width: 1920px) {
+  [x-hidden-xl-only] {
+    display: none !important;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body,
+input,
+textarea {
+  font-family: var(--x-font-family);
+  font-size: var(--x-font-size);
+  color: var(--x-text);
+  line-height: var(--x-line-height);
+}
+
+code,
+pre,
+tt {
+  font-family: var(--x-font-code-family);
+}
+
 /*# sourceMappingURL=index.css.map */

package/style/core/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../lib/ng-nest/ui/style/core/cdk.scss","../../../../../lib/ng-nest/ui/style/mixins/hidden.scss","../../../../../lib/ng-nest/ui/style/core/base.scss","../../../../../lib/ng-nest/ui/style/params/primary.scss","../../../../../lib/ng-nest/ui/style/core/portal.scss","../../../../../lib/ng-nest/ui/style/directives/ripple/index.scss","../../../../../lib/ng-nest/ui/style/directives/ripple/mixin.scss","../../../../../lib/ng-nest/ui/style/directives/resizable/index.scss","../../../../../lib/ng-nest/ui/style/directives/resizable/mixin.scss","../../../../../lib/ng-nest/ui/style/directives/keyword/mixin.scss"],"names":[],"mappings":"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","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../lib/ng-nest/ui/style/directives/ripple/index.scss","../../../../../lib/ng-nest/ui/style/directives/ripple/mixin.scss","../../../../../lib/ng-nest/ui/style/params/index.scss","../../../../../lib/ng-nest/ui/style/directives/resizable/index.scss","../../../../../lib/ng-nest/ui/style/directives/resizable/mixin.scss","../../../../../lib/ng-nest/ui/style/directives/keyword/mixin.scss","../../../../../lib/ng-nest/ui/style/mixins/hidden.scss","../../../../../lib/ng-nest/ui/style/core/index.scss"],"names":[],"mappings":"AAIA;ECCE;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;;AAaA;EACE,kBC8Gc;;AD/GhB;EACE,kBCnBU;;ADkBZ;EACE;;AADF;EACE,kBCmBU;;ADpBZ;EACE,kBCsCS;;ADvCX;EACE,kBCyDO;;AD1DT;EACE,kBANyB;;;AEvB/B;ECCE;;AACA;EACE;;AAmIF;EACE;EACA,QAjIA;EAkIA,OAjIA;EAkIA,QAjIA;EAkIA,MA9HA;EAgIA,QAjIA;EAmIA,SAjIA;;AAkIA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA,cF5JI;;AEuIV;EACE;EACA,QApHA;EAqHA,OApHA;EAqHA,QApHA;EAqHA,MAjHA;EAoHA,KAvHA;EAwHA,SApHA;;AAqHA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA,cF5JI;;AEuIV;EACE;EACA,QAvGA;EAwGA,OAvGA;EAwGA,QAvGA;EAwGA,MApGA;EAuGA,KA1GA;EA2GA,SAvGA;;AAwGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA,cF5JI;;AEuIV;EACE;EACA,QA1FA;EA2FA,OA1FA;EA2FA,QA1FA;EA4FA,OA1FA;EA4FA,KA7FA;EA8FA,SA1FA;;AA2FA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA,cF5JI;;AEuIV;EACE;EACA,QA7EA;EA8EA,OA7EA;EA8EA,QA7EA;EA8EA,MA1EA;EA6EA,KAhFA;EAiFA,SA7EA;;AA8EA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA,cF5JI;;AEuIV;EACE;EACA,QAhEA;EAiEA,OAhEA;EAiEA,QAhEA;EAkEA,OAhEA;EAkEA,KAnEA;EAoEA,SAhEA;;AAiEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA,cF5JI;;AEuIV;EACE;EACA,QAnDA;EAoDA,OAnDA;EAoDA,QAnDA;EAoDA,MAhDA;EAkDA,QAnDA;EAqDA,SAnDA;;AAoDA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA,cF5JI;;AEuIV;EACE;EACA,QAtCA;EAuCA,OAtCA;EAuCA,QAtCA;EAwCA,OAtCA;EAuCA,QAtCA;EAwCA,SAtCA;;AAuCA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA,cF5JI;;AE+GR;EACE,cFhHM;;AEoHR;EACE;;;ACxGF;EACE,OHyHS;EGxHT;;AAFF;EACE,OHdM;EGeN;;AAFF;EACE,OHKM;EGJN;;AAFF;EACE,OHwBM;EGvBN;;AAFF;EACE,OH2CK;EG1CL;;AAFF;EACE,OH8DG;EG7DH;;AAFF;EACE,OAN0B;EAO1B;;;ACXA;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;ACDR;AAAA;AAAA;EAGE;;;AAGF;AAAA;AAAA;EAGE,aLiJc;EKhJd,WL8IY;EK7IZ,OLgFO;EK/EP,aLqJc;;;AKlJhB;AAAA;AAAA;EAGE,aLyImB","file":"index.css"}

package/style/core/index.scss

@@ -1,6 +1,33 @@
 @charset "UTF-8";
-@import './cdk';
-@import './var';
-@import './base';
-@import './portal';
-@import '../directives/index';
+@use '../mixins/hidden' as *;
+@use '../params/index' as *;
+@use '../directives/index' as *;
+
+@include var-size-hidden($x-size-range-only);
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body,
+input,
+textarea {
+  font-family: $x-font-family;
+  font-size: $x-font-size;
+  color: $x-text;
+  line-height: $x-line-height;
+}
+
+code,
+pre,
+tt {
+  font-family: $x-font-code-family;
+}
+
+// .x-portal {
+//   &-resizable {
+//     display: inline-block !important;
+//   }
+// }

package/style/directives/index.scss

@@ -1,4 +1,4 @@
 // Directives
-@import './ripple/index';
-@import './resizable/index';
-@import './keyword/index';
+@use './ripple/index' as *;
+@use './resizable/index' as *;
+@use './keyword/index' as *;

package/style/directives/keyword/index.scss

@@ -1,6 +1,7 @@
 // Keyword
-@import './mixin';
+@use './mixin' as *;
+@use './param' as *;
 
-.#{$--x-keyword-prefix} {
+.#{$x-keyword-prefix} {
   @include keyword();
 }

package/style/directives/keyword/mixin.scss

@@ -1,22 +1,20 @@
 // Keyword
-
-@import '../../themes/default';
-@import '../../mixins/index';
-@import './param';
+@use '../../params/index' as *;
+@use './param' as *;
 
 @mixin keyword {
-  @include keyword-type('initial', $--x-background);
-  @include keyword-type('primary', $--x-primary);
-  @include keyword-type('success', $--x-success);
-  @include keyword-type('warning', $--x-warning);
-  @include keyword-type('danger', $--x-danger);
-  @include keyword-type('info', $--x-info);
+  @include keyword-type('initial', $x-background);
+  @include keyword-type('primary', $x-primary);
+  @include keyword-type('success', $x-success);
+  @include keyword-type('warning', $x-warning);
+  @include keyword-type('danger', $x-danger);
+  @include keyword-type('info', $x-info);
   @include keyword-type('text', rgba(0, 0, 0, 0.1));
 }
 
 @mixin keyword-type($type, $color) {
   &-#{$type} {
-    > .#{$--x-keyword-prefix}-text {
+    > .#{$x-keyword-prefix}-text {
       color: $color;
       text-decoration: underline;
     }

package/style/directives/keyword/param.scss

@@ -1,3 +1,4 @@
 // Keyword style paramters
+@use '../../params/index' as *;
 
-$--x-keyword-prefix: $--x-prefix + '-keyword';
+$x-keyword-prefix: $x-prefix + '-keyword';

package/style/directives/resizable/index.scss

@@ -1,6 +1,7 @@
 // Resizable
-@import './mixin';
+@use './mixin' as *;
+@use './param' as *;
 
-.#{$--x-resizable-prefix} {
+.#{$x-resizable-prefix} {
   @include resizable();
 }

package/style/directives/resizable/mixin.scss

@@ -1,25 +1,119 @@
 // Resizable
-
-@import '../../themes/default';
-@import '../../mixins/index';
-@import './param';
+@use '../../params/index' as *;
+@use './param' as *;
 
 @mixin resizable {
   position: relative;
   &-resizing {
     user-select: none;
   }
-  @include resizable-position('bottom', s-resize, 100%, 0.625rem, null, null, -0.375rem, 0, 0.25rem 0, border-bottom, 0.0625rem);
-  @include resizable-position('top', n-resize, 100%, 0.625rem, -0.375rem, null, null, 0, 0.25rem 0, border-top, 0.0625rem);
-  @include resizable-position('left', w-resize, 0.625rem, 100%, 0, null, null, -0.375rem, 0 0.25rem, border-left, 0.0625rem);
-  @include resizable-position('right', e-resize, 0.625rem, 100%, 0, -0.375rem, null, null, 0 0.25rem, border-right, 0.0625rem);
-  @include resizable-position('top-start', nw-resize, 0.625rem, 0.625rem, -0.375rem, null, null, -0.375rem, 0 0, border, 0);
-  @include resizable-position('top-end', ne-resize, 0.625rem, 0.625rem, -0.375rem, -0.375rem, null, null, 0 0, border, 0);
-  @include resizable-position('bottom-start', sw-resize, 0.625rem, 0.625rem, null, null, -0.375rem, -0.375rem, 0 0, border, 0);
-  @include resizable-position('bottom-end', se-resize, 0.625rem, 0.625rem, null, -0.375rem, -0.375rem, null, 0 0, border, 0);
+  @include resizable-position(
+    'bottom',
+    s-resize,
+    100%,
+    0.625rem,
+    null,
+    null,
+    -0.375rem,
+    0,
+    0.25rem 0,
+    border-bottom,
+    0.0625rem
+  );
+  @include resizable-position(
+    'top',
+    n-resize,
+    100%,
+    0.625rem,
+    -0.375rem,
+    null,
+    null,
+    0,
+    0.25rem 0,
+    border-top,
+    0.0625rem
+  );
+  @include resizable-position(
+    'left',
+    w-resize,
+    0.625rem,
+    100%,
+    0,
+    null,
+    null,
+    -0.375rem,
+    0 0.25rem,
+    border-left,
+    0.0625rem
+  );
+  @include resizable-position(
+    'right',
+    e-resize,
+    0.625rem,
+    100%,
+    0,
+    -0.375rem,
+    null,
+    null,
+    0 0.25rem,
+    border-right,
+    0.0625rem
+  );
+  @include resizable-position(
+    'top-start',
+    nw-resize,
+    0.625rem,
+    0.625rem,
+    -0.375rem,
+    null,
+    null,
+    -0.375rem,
+    0 0,
+    border,
+    0
+  );
+  @include resizable-position(
+    'top-end',
+    ne-resize,
+    0.625rem,
+    0.625rem,
+    -0.375rem,
+    -0.375rem,
+    null,
+    null,
+    0 0,
+    border,
+    0
+  );
+  @include resizable-position(
+    'bottom-start',
+    sw-resize,
+    0.625rem,
+    0.625rem,
+    null,
+    null,
+    -0.375rem,
+    -0.375rem,
+    0 0,
+    border,
+    0
+  );
+  @include resizable-position(
+    'bottom-end',
+    se-resize,
+    0.625rem,
+    0.625rem,
+    null,
+    -0.375rem,
+    -0.375rem,
+    null,
+    0 0,
+    border,
+    0
+  );
   &-activating {
     &::before {
-      border-color: $--x-primary;
+      border-color: $x-primary;
     }
   }
   &-disabled {
@@ -29,7 +123,19 @@
   }
 }
 
-@mixin resizable-position($type, $cursor, $width, $height, $top, $right, $bottom, $left, $padding, $border, $border-width) {
+@mixin resizable-position(
+  $type,
+  $cursor,
+  $width,
+  $height,
+  $top,
+  $right,
+  $bottom,
+  $left,
+  $padding,
+  $border,
+  $border-width
+) {
   &-#{$type} {
     position: absolute;
     cursor: $cursor;
@@ -50,8 +156,8 @@
     }
     &:hover {
       &::before {
-        transition: border-color $--x-animation-duration-base ease-in $--x-animation-duration-base;
-        border-color: $--x-primary;
+        transition: border-color $x-animation-duration-base ease-in $x-animation-duration-base;
+        border-color: $x-primary;
       }
     }
   }

package/style/directives/resizable/param.scss

@@ -1,3 +1,4 @@
 // Resizable style paramters
+@use '../../params/index' as *;
 
-$--x-resizable-prefix: $--x-prefix + '-resizable';
+$x-resizable-prefix: $x-prefix + '-resizable';

package/style/directives/ripple/index.scss

@@ -1,6 +1,7 @@
 // Ripple
-@import './mixin';
+@use './mixin' as *;
+@use './param' as *;
 
-.#{$--x-ripple-prefix} {
+.#{$x-ripple-prefix} {
   @include ripple();
 }

package/style/directives/ripple/mixin.scss

@@ -1,8 +1,6 @@
 // Ripple
-
-@import '../../themes/default';
-@import '../../mixins/index';
-@import './param';
+@use '../../params/index' as *;
+@use './param' as *;
 
 @mixin ripple {
   overflow: hidden;
@@ -16,21 +14,23 @@
     pointer-events: none;
     z-index: -1;
     background-color: rgba(0, 0, 0, 0.1);
-    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
+    transition:
+      opacity,
+      transform 0ms cubic-bezier(0, 0, 0.2, 1);
     transform: scale(0);
   }
-  @include ripple-type('initial', $--x-background-a500);
-  @include ripple-type('primary', $--x-primary-200);
-  @include ripple-type('success', $--x-success-200);
-  @include ripple-type('warning', $--x-warning-200);
-  @include ripple-type('danger', $--x-danger-200);
-  @include ripple-type('info', $--x-info-200);
+  @include ripple-type('initial', $x-background-a500);
+  @include ripple-type('primary', $x-primary-200);
+  @include ripple-type('success', $x-success-200);
+  @include ripple-type('warning', $x-warning-200);
+  @include ripple-type('danger', $x-danger-200);
+  @include ripple-type('info', $x-info-200);
   @include ripple-type('text', rgba(0, 0, 0, 0.1));
 }
 
 @mixin ripple-type($type, $background) {
   &-#{$type} {
-    .#{$--x-ripple-prefix}-element {
+    .#{$x-ripple-prefix}-element {
       background-color: $background;
     }
   }

package/style/directives/ripple/param.scss

@@ -1,3 +1,4 @@
 // Ripple style paramters
+@use '../../params/index' as *;
 
-$--x-ripple-prefix: $--x-prefix + '-ripple';
+$x-ripple-prefix: $x-prefix + '-ripple';

package/style/mixins/compatibility.scss

@@ -1,26 +1,28 @@
 // Placeholder text
+@use '../params/index' as *;
+
 @mixin placeholder() {
   // Firefox
   &::-moz-placeholder {
-    color: $--x-placeholder-color;
+    color: $x-placeholder-color;
     opacity: 1;
   }
   // Internet Explorer 10+
   &:-ms-input-placeholder {
-    color: $--x-placeholder-color;
+    color: $x-placeholder-color;
   }
   // Safari and Chrome
   &::-webkit-input-placeholder {
-    color: $--x-placeholder-color;
+    color: $x-placeholder-color;
   }
 }
 
 // Element hover
 @mixin hover() {
-  border-color: $--x-primary-300;
+  border-color: $x-primary-300;
 }
 
 // Element focus
 @mixin focus() {
-  border-color: $--x-primary;
+  border-color: $x-primary;
 }

package/style/mixins/form.scss

@@ -1,3 +1,5 @@
+@use '../params/index' as *;
+
 @mixin border-error() {
   .x-border-error {
     position: absolute;
@@ -13,16 +15,16 @@
 
 @mixin border-error-focus() {
   .x-border-error {
-    border-width: $--x-border-width !important;
+    border-width: $x-border-width !important;
   }
 }
 
 @mixin border-placement($first, $second) {
   &.x-#{$first}-#{$second} {
-    border-#{$first}-#{$second}-radius: $--x-border-radius;
+    border-#{$first}-#{$second}-radius: $x-border-radius;
     #{$first}: 0;
     #{$second}: 0;
-    border-#{$first}: $--x-border-width solid $--x-danger;
-    border-#{$second}: $--x-border-width solid $--x-danger;
+    border-#{$first}: $x-border-width solid $x-danger;
+    border-#{$second}: $x-border-width solid $x-danger;
   }
 }