@ng-matero/extensions 12.4.0 → 12.5.3

package/slider/slider.scss

@@ -0,0 +1,514 @@
+@use 'sass:math';
+@use '~@angular/material/core/style/variables';
+@use '~@angular/material/core/style/vendor-prefixes';
+@use '~@angular/cdk/a11y';
+
+// This refers to the thickness of the slider. On a horizontal slider this is the height, on a
+// vertical slider this is the width.
+$thickness: 48px !default;
+$min-size: 128px !default;
+$padding: 8px !default;
+
+$track-thickness: 2px !default;
+$thumb-size: 20px !default;
+$thumb-border-width: 3px !default;
+$thumb-border-width-active: 2px !default;
+$thumb-border-width-disabled: 4px !default;
+
+$thumb-default-scale: .7 !default;
+$thumb-focus-scale: 1 !default;
+$thumb-disabled-scale: .5 !default;
+
+$thumb-arrow-gap: 12px !default;
+
+$thumb-label-size: 28px !default;
+
+$tick-size: 2px !default;
+
+$focus-ring-size: 30px !default;
+
+.mtx-slider {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  padding: $padding;
+  outline: none;
+  vertical-align: middle;
+
+  &:not(.mtx-slider-disabled):active,
+  &.mtx-slider-sliding:not(.mtx-slider-disabled) {
+    @include vendor-prefixes.cursor-grabbing;
+  }
+}
+
+.mtx-slider-wrapper {
+  // force browser to show background-color when using the print function
+  @include vendor-prefixes.private-color-adjust(exact);
+
+  position: absolute;
+}
+
+.mtx-slider-track-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.mtx-slider-track-fill {
+  position: absolute;
+  transform-origin: 0 0;
+  transition:
+    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+}
+
+.mtx-slider-track-background-left {
+  position: absolute;
+  transform-origin: 0 0;
+  transition:
+    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+}
+
+.mtx-slider-track-background-right {
+  position: absolute;
+  transform-origin: 100% 100%;
+  transition:
+    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+}
+
+.mtx-slider-ticks-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+
+.mtx-slider-ticks {
+  @include vendor-prefixes.private-background-clip(content-box);
+
+  background-repeat: repeat;
+  background-clip: content-box;
+  box-sizing: border-box;
+  opacity: 0;
+  transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+}
+
+.mtx-slider-thumb-container {
+  position: absolute;
+  z-index: 1;
+  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+}
+
+.mtx-slider-focus-ring {
+  position: absolute;
+  width: $focus-ring-size;
+  height: $focus-ring-size;
+  border-radius: 50%;
+  transform: scale(0);
+  opacity: 0;
+  transition:
+    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+
+  .mtx-slider.cdk-keyboard-focused &,
+  .mtx-slider.cdk-program-focused & {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+%_mtx-slider-cursor {
+  .mtx-slider:not(.mtx-slider-disabled):not(.mtx-slider-sliding) & {
+    @include vendor-prefixes.cursor-grab;
+  }
+}
+
+.mtx-slider-thumb {
+  @extend %_mtx-slider-cursor;
+
+  position: absolute;
+  right: -$thumb-size * .5;
+  bottom: -$thumb-size * .5;
+  box-sizing: border-box;
+  width: $thumb-size;
+  height: $thumb-size;
+  border: $thumb-border-width solid transparent;
+  border-radius: 50%;
+  transform: scale($thumb-default-scale);
+  transition:
+    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    border-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+}
+
+.mtx-slider-thumb-label {
+  @extend %_mtx-slider-cursor;
+
+  display: none;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  width: $thumb-label-size;
+  height: $thumb-label-size;
+  border-radius: 50%;
+  transition:
+    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    border-radius  variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    background-color  variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+
+  @include a11y.high-contrast(active, off) {
+    outline: solid 1px;
+  }
+}
+
+.mtx-slider-thumb-label-text {
+  z-index: 1;
+  opacity: 0;
+  transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+}
+
+// Slider sliding state.
+.mtx-slider-sliding {
+  .mtx-slider-track-fill,
+  .mtx-slider-track-background-left,
+  .mtx-slider-track-background-right,
+  .mtx-slider-thumb-container {
+    // Must use `transition-duration: 0ms` to disable animation rather than `transition: none`.
+    // On Mobile Safari `transition: none` causes the slider thumb to appear stuck.
+    transition-duration: 0ms;
+  }
+}
+
+// Slider with ticks when not disabled.
+.mtx-slider-has-ticks {
+  .mtx-slider-wrapper::after {
+    content: '';
+    position: absolute;
+    border-width: 0;
+    border-style: solid;
+    opacity: 0;
+    transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+  }
+
+  &.cdk-focused,
+  &:hover {
+    &:not(.mtx-slider-hide-last-tick) {
+      .mtx-slider-wrapper::after {
+        opacity: 1;
+      }
+    }
+
+    &:not(.mtx-slider-disabled) .mtx-slider-ticks {
+      opacity: 1;
+    }
+  }
+}
+
+// Slider with thumb label.
+.mtx-slider-thumb-label-showing {
+  .mtx-slider-focus-ring {
+    display: none;
+  }
+
+  .mtx-slider-thumb-label {
+    display: flex;
+  }
+}
+
+// Inverted slider.
+.mtx-slider-axis-inverted {
+  .mtx-slider-track-fill {
+    transform-origin: 100% 100%;
+  }
+
+  .mtx-slider-track-fill.mtx-range-slider-fill {
+    transform-origin: 0 0;
+  }
+
+  .mtx-slider-track-background-left {
+    transform-origin: 100% 100%;
+  }
+
+  .mtx-slider-track-background-right {
+    transform-origin: 0 0;
+  }
+}
+
+// Active slider.
+.mtx-slider:not(.mtx-slider-disabled) {
+  &.cdk-focused {
+    &.mtx-slider-thumb-label-showing .mtx-slider-thumb {
+      transform: scale(0);
+    }
+
+    .mtx-slider-thumb-label {
+      border-radius: 50% 50% 0;
+    }
+
+    .mtx-slider-thumb-label-text {
+      opacity: 1;
+    }
+  }
+
+  &.cdk-mouse-focused,
+  &.cdk-touch-focused,
+  &.cdk-program-focused {
+    .mtx-slider-thumb {
+      border-width: $thumb-border-width-active;
+      transform: scale($thumb-focus-scale);
+    }
+  }
+}
+
+// Disabled slider.
+.mtx-slider-disabled {
+  .mtx-slider-focus-ring {
+    transform: scale(0);
+    opacity: 0;
+  }
+
+  .mtx-slider-thumb {
+    border-width: $thumb-border-width-disabled;
+    transform: scale($thumb-disabled-scale);
+  }
+
+  .mtx-slider-thumb-label {
+    display: none;
+  }
+}
+
+// Horizontal slider.
+.mtx-slider-horizontal {
+  height: $thickness;
+  min-width: $min-size;
+
+  .mtx-slider-wrapper {
+    height: $track-thickness;
+    top: ($thickness - $track-thickness) * .5;
+    left: $padding;
+    right: $padding;
+  }
+
+  .mtx-slider-wrapper::after {
+    height: $track-thickness;
+    border-left-width: $tick-size;
+    right: 0;
+    top: 0;
+  }
+
+  .mtx-slider-track-wrapper {
+    height: $track-thickness;
+    width: 100%;
+  }
+
+  .mtx-slider-track-fill {
+    height: $track-thickness;
+    width: 100%;
+    transform: scaleX(0);
+  }
+
+  .mtx-slider-track-background-left,
+  .mtx-slider-track-background-right {
+    height: $track-thickness;
+    width: 100%;
+    transform: scaleX(1);
+  }
+
+  .mtx-slider-ticks-container {
+    height: $track-thickness;
+    width: 100%;
+
+    @include a11y.high-contrast(active, off) {
+      height: 0;
+      outline: solid $track-thickness;
+      top: $track-thickness * .5;
+    }
+  }
+
+  .mtx-slider-ticks {
+    height: $track-thickness;
+    width: 100%;
+  }
+
+  .mtx-slider-thumb-container {
+    width: 100%;
+    height: 0;
+    top: 50%;
+  }
+
+  .mtx-slider-focus-ring {
+    top: -$focus-ring-size * .5;
+    right: -$focus-ring-size * .5;
+  }
+
+  .mtx-slider-thumb-label {
+    right: -$thumb-label-size * .5;
+    top: -($thumb-label-size + $thumb-arrow-gap);
+    transform:
+      translateY($thumb-label-size * .5 + $thumb-arrow-gap)
+      scale(.01)
+      rotate(45deg);
+  }
+
+  .mtx-slider-thumb-label-text {
+    transform: rotate(-45deg);
+  }
+
+  &.cdk-focused {
+    .mtx-slider-thumb-label {
+      transform: rotate(45deg);
+    }
+
+    @include a11y.high-contrast(active, off) {
+      .mtx-slider-thumb-label,
+      .mtx-slider-thumb-label-text {
+        transform: none;
+      }
+    }
+  }
+}
+
+// Vertical slider.
+.mtx-slider-vertical {
+  width: $thickness;
+  min-height: $min-size;
+
+  .mtx-slider-wrapper {
+    width: $track-thickness;
+    top: $padding;
+    bottom: $padding;
+    left: ($thickness - $track-thickness) * .5;
+  }
+
+  .mtx-slider-wrapper::after {
+    width: $track-thickness;
+    border-top-width: $tick-size;
+    bottom: 0;
+    left: 0;
+  }
+
+  .mtx-slider-track-wrapper {
+    height: 100%;
+    width: $track-thickness;
+  }
+
+  .mtx-slider-track-fill {
+    height: 100%;
+    width: $track-thickness;
+    transform: scaleY(0);
+  }
+
+  .mtx-slider-track-background-left,
+  .mtx-slider-track-background-right {
+    height: 100%;
+    width: $track-thickness;
+    transform: scaleY(1);
+  }
+
+  .mtx-slider-ticks-container {
+    width: $track-thickness;
+    height: 100%;
+
+    @include a11y.high-contrast(active, off) {
+      width: 0;
+      outline: solid $track-thickness;
+      left: $track-thickness * .5;
+    }
+  }
+
+  .mtx-slider-focus-ring {
+    bottom: -$focus-ring-size * .5;
+    left: -$focus-ring-size * .5;
+  }
+
+  .mtx-slider-ticks {
+    width: $track-thickness;
+    height: 100%;
+  }
+
+  .mtx-slider-thumb-container {
+    height: 100%;
+    width: 0;
+    left: 50%;
+  }
+
+  .mtx-slider-thumb {
+    @include vendor-prefixes.backface-visibility(hidden);
+  }
+
+  .mtx-slider-thumb-label {
+    bottom: -$thumb-label-size * .5;
+    left: -($thumb-label-size + $thumb-arrow-gap);
+    transform:
+      translateX($thumb-label-size * .5 + $thumb-arrow-gap)
+      scale(.01)
+      rotate(-45deg);
+  }
+
+  .mtx-slider-thumb-label-text {
+    transform: rotate(45deg);
+  }
+
+  &.cdk-focused {
+    .mtx-slider-thumb-label {
+      transform: rotate(-45deg);
+    }
+  }
+}
+
+// Slider in RTL languages.
+[dir='rtl'] {
+  .mtx-slider-wrapper::after {
+    left: 0;
+    right: auto;
+  }
+
+  .mtx-slider-horizontal {
+    .mtx-slider-track-fill:not(.mtx-range-slider-fill) {
+      transform-origin: 100% 100%;
+    }
+
+    .mtx-slider-track-background-left {
+      transform-origin: 100% 100%;
+    }
+
+    .mtx-slider-track-background-right {
+      transform-origin: 0 0;
+    }
+
+    &.mtx-slider-axis-inverted {
+      .mtx-slider-track-fill {
+        transform-origin: 0 0;
+      }
+
+      .mtx-slider-track-background-left {
+        transform-origin: 0 0;
+      }
+
+      .mtx-slider-track-background-right {
+        transform-origin: 100% 100%;
+      }
+    }
+  }
+}
+
+// Slider inside a component with disabled animations.
+/* stylelint-disable-next-line selector-class-pattern */
+.mtx-slider._mtx-animation-noopable {
+  .mtx-slider-track-fill,
+  .mtx-slider-track-background-left,
+  .mtx-slider-track-background-right,
+  .mtx-slider-ticks,
+  .mtx-slider-thumb-container,
+  .mtx-slider-focus-ring,
+  .mtx-slider-thumb,
+  .mtx-slider-thumb-label,
+  .mtx-slider-thumb-label-text,
+  .mtx-slider-has-ticks .mtx-slider-wrapper::after {
+    transition: none;
+  }
+}

package/split/_split-theme.import.scss

@@ -1,2 +1,2 @@
-@forward 'split-theme' hide theme;
-@forward 'split-theme' as mtx-split-*;
+@forward 'split-theme' hide color, theme, typography;
+@forward 'split-theme' as mtx-split-* hide mtx-split-density;

package/split/_split-theme.scss

@@ -1,17 +1,41 @@
 @use 'sass:map';
-@use '~@angular/material' as mat;
+@use '~@angular/material/core/theming/theming';
 
-@mixin theme($theme) {
-  $accent: map.get($theme, accent);
-  $foreground: map.get($theme, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $accent: map.get($config, accent);
+  $foreground: map.get($config, foreground);
 
   .mtx-split {
     > .mtx-split-gutter {
-      background-color: rgba(mat.get-color-from-palette($foreground, divider), .24);
+      background-color: rgba(theming.get-color-from-palette($foreground, divider), .12);
 
       &:hover {
-        background-color: mat.get-color-from-palette($accent);
+        background-color: theming.get-color-from-palette($accent);
       }
     }
   }
 }
+
+@mixin typography($config-or-theme) {}
+
+@mixin _density($config-or-theme) {}
+
+@mixin theme($theme-or-color-config) {
+  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+  @include theming.private-check-duplicate-theme-styles($theme, 'mtx-split') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
+
+    @if $color != null {
+      @include color($color);
+    }
+    @if $density != null {
+      @include _density($density);
+    }
+    @if $typography != null {
+      @include typography($typography);
+    }
+  }
+}

package/split/interface.d.ts

@@ -37,5 +37,4 @@ export interface MtxSplitOutputData {
     gutterNum: number;
     sizes: MtxSplitOutputAreaSizes;
 }
-export interface MtxSplitOutputAreaSizes extends Array<number | '*'> {
-}
+export declare type MtxSplitOutputAreaSizes = Array<number | '*'>;

package/split/mtxSplit.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"MtxSplitPoint":{"__symbolic":"interface"},"MtxSplitArea":{"__symbolic":"interface"},"MtxSplitSnapshot":{"__symbolic":"interface"},"MtxSplitAreaSnapshot":{"__symbolic":"interface"},"MtxSplitSideAbsorptionCapacity":{"__symbolic":"interface"},"MtxSplitAreaAbsorptionCapacity":{"__symbolic":"interface"},"MtxSplitOutputData":{"__symbolic":"interface"},"MtxSplitOutputAreaSizes":{"__symbolic":"interface"},"getPointFromEvent":{"__symbolic":"function"},"getElementPixelSize":{"__symbolic":"function"},"getInputBoolean":{"__symbolic":"function","parameters":["v"],"value":{"__symbolic":"if","condition":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":45,"character":9,"module":"./utils"},"right":"boolean"},"thenExpression":{"__symbolic":"reference","name":"v"},"elseExpression":{"__symbolic":"if","condition":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"v"},"right":"false"},"thenExpression":false,"elseExpression":true}}},"getInputPositiveNumber":{"__symbolic":"function"},"isUserSizesValid":{"__symbolic":"function"},"getAreaMinSize":{"__symbolic":"function"},"getAreaMaxSize":{"__symbolic":"function"},"getGutterSideAbsorptionCapacity":{"__symbolic":"function","parameters":["unit","sideAreas","pixels","allAreasSizePixel"],"value":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"sideAreas"},"member":"reduce"},"arguments":[{"__symbolic":"error","message":"Lambda not supported","line":120,"character":4,"module":"./utils"},{"remain":{"__symbolic":"reference","name":"pixels"},"list":[]}]}},"updateAreaSize":{"__symbolic":"function"},"MtxSplitModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12}],"declarations":[{"__symbolic":"reference","name":"MtxSplitComponent"},{"__symbolic":"reference","name":"MtxSplitPaneDirective"}],"exports":[{"__symbolic":"reference","name":"MtxSplitComponent"},{"__symbolic":"reference","name":"MtxSplitPaneDirective"}]}]}],"members":{}},"MtxSplitComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":70,"character":1},"arguments":[{"selector":"mtx-split","exportAs":"mtxSplit","host":{"class":"mtx-split"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":76,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":77,"character":19},"member":"OnPush"},"template":"<ng-content></ng-content>\r\n<ng-template ngFor [ngForOf]=\"displayedAreas\" let-index=\"index\" let-last=\"last\">\r\n  <div #gutterEls class=\"mtx-split-gutter\"\r\n       *ngIf=\"last === false\"\r\n       [style.flex-basis.px]=\"gutterSize\"\r\n       [style.order]=\"index * 2 + 1\"\r\n       (mousedown)=\"startDragging($event, index * 2 + 1, index + 1)\"\r\n       (touchstart)=\"startDragging($event, index * 2 + 1, index + 1)\"\r\n       (mouseup)=\"clickGutter($event, index + 1)\"\r\n       (touchend)=\"clickGutter($event, index + 1)\">\r\n    <div class=\"mtx-split-gutter-handle\"></div>\r\n  </div>\r\n</ng-template>\r\n","styles":[".mtx-split{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;overflow:hidden;width:100%;height:100%}.mtx-split>.mtx-split-gutter{position:relative;display:flex;flex-grow:0;flex-shrink:0;align-items:center;justify-content:center}.mtx-split>.mtx-split-gutter>.mtx-split-gutter-handle{position:absolute;opacity:0}.mtx-split>.mtx-split-pane{flex-grow:0;flex-shrink:0;overflow-x:hidden;overflow-y:auto}.mtx-split>.mtx-split-pane.mtx-split-pane-hidden{flex:0 1 0!important;overflow-x:hidden;overflow-y:hidden}.mtx-split.mtx-split-horizontal{flex-direction:row}.mtx-split.mtx-split-horizontal>.mtx-split-gutter{flex-direction:row;height:100%;cursor:col-resize}.mtx-split.mtx-split-horizontal>.mtx-split-gutter>.mtx-split-gutter-handle{width:11px;height:100%;left:-5px;right:5px}.mtx-split.mtx-split-horizontal>.mtx-split-pane{height:100%}.mtx-split.mtx-split-vertical{flex-direction:column}.mtx-split.mtx-split-vertical>.mtx-split-gutter{flex-direction:column;width:100%;cursor:row-resize}.mtx-split.mtx-split-vertical>.mtx-split-gutter>.mtx-split-gutter-handle{width:100%;height:11px;top:-5px;bottom:5px}.mtx-split.mtx-split-vertical>.mtx-split-pane{width:100%}.mtx-split.mtx-split-vertical>.mtx-split-pane.mtx-split-pane-hidden{max-width:0}.mtx-split.mtx-split-disabled>.mtx-split-gutter{cursor:default}.mtx-split.mtx-split-disabled>.mtx-split-gutter .mtx-split-gutter-handle{background-image:none}.mtx-split.mtx-split-transition.mtx-split-init:not(.mtx-dragging)>.mtx-split-gutter,.mtx-split.mtx-split-transition.mtx-split-init:not(.mtx-dragging)>.mtx-split-pane{transition:flex-basis .3s}\n"]}]}],"members":{"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"unit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":3}}]}],"gutterSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":3}}]}],"gutterStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":3}}]}],"restrictMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":3}}]}],"useTransition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":162,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":180,"character":3}}]}],"dir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":198,"character":3}}]}],"gutterDblClickDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":212,"character":3}}]}],"dragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":222,"character":3}}]}],"dragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":223,"character":3}}]}],"gutterClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":224,"character":3}}]}],"gutterDblClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":225,"character":3}}]}],"transitionEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":228,"character":3}}]}],"gutterEls":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":248,"character":3},"arguments":["gutterEls"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":251,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":252,"character":19},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":253,"character":19},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":254,"character":22}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"getNbGutters":[{"__symbolic":"method"}],"addArea":[{"__symbolic":"method"}],"removeArea":[{"__symbolic":"method"}],"updateArea":[{"__symbolic":"method"}],"showArea":[{"__symbolic":"method"}],"hideArea":[{"__symbolic":"method"}],"getVisibleAreaSizes":[{"__symbolic":"method"}],"setVisibleAreaSizes":[{"__symbolic":"method"}],"build":[{"__symbolic":"method"}],"refreshStyleSizes":[{"__symbolic":"method"}],"clickGutter":[{"__symbolic":"method"}],"startDragging":[{"__symbolic":"method"}],"dragEvent":[{"__symbolic":"method"}],"stopDragging":[{"__symbolic":"method"}],"notify":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MtxSplitPaneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"mtx-split-pane, [mtx-split-pane]","exportAs":"mtxSplitPane"}]}],"members":{"order":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"minSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"maxSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"lockSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":104,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":105,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":106,"character":22},{"__symbolic":"reference","name":"MtxSplitComponent"}]}],"ngOnInit":[{"__symbolic":"method"}],"setStyleOrder":[{"__symbolic":"method"}],"setStyleFlex":[{"__symbolic":"method"}],"lockEvents":[{"__symbolic":"method"}],"unlockEvents":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}},"origins":{"MtxSplitPoint":"./interface","MtxSplitArea":"./interface","MtxSplitSnapshot":"./interface","MtxSplitAreaSnapshot":"./interface","MtxSplitSideAbsorptionCapacity":"./interface","MtxSplitAreaAbsorptionCapacity":"./interface","MtxSplitOutputData":"./interface","MtxSplitOutputAreaSizes":"./interface","getPointFromEvent":"./utils","getElementPixelSize":"./utils","getInputBoolean":"./utils","getInputPositiveNumber":"./utils","isUserSizesValid":"./utils","getAreaMinSize":"./utils","getAreaMaxSize":"./utils","getGutterSideAbsorptionCapacity":"./utils","updateAreaSize":"./utils","MtxSplitModule":"./split.module","MtxSplitComponent":"./split.component","MtxSplitPaneDirective":"./split-pane.directive"},"importAs":"@ng-matero/extensions/split"}
+{"__symbolic":"module","version":4,"metadata":{"MtxSplitPoint":{"__symbolic":"interface"},"MtxSplitArea":{"__symbolic":"interface"},"MtxSplitSnapshot":{"__symbolic":"interface"},"MtxSplitAreaSnapshot":{"__symbolic":"interface"},"MtxSplitSideAbsorptionCapacity":{"__symbolic":"interface"},"MtxSplitAreaAbsorptionCapacity":{"__symbolic":"interface"},"MtxSplitOutputData":{"__symbolic":"interface"},"MtxSplitOutputAreaSizes":{"__symbolic":"interface"},"getPointFromEvent":{"__symbolic":"function"},"getElementPixelSize":{"__symbolic":"function"},"getInputBoolean":{"__symbolic":"function","parameters":["v"],"value":{"__symbolic":"if","condition":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":45,"character":9,"module":"./utils"},"right":"boolean"},"thenExpression":{"__symbolic":"reference","name":"v"},"elseExpression":{"__symbolic":"if","condition":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"v"},"right":"false"},"thenExpression":false,"elseExpression":true}}},"getInputPositiveNumber":{"__symbolic":"function"},"isUserSizesValid":{"__symbolic":"function"},"getAreaMinSize":{"__symbolic":"function"},"getAreaMaxSize":{"__symbolic":"function"},"getGutterSideAbsorptionCapacity":{"__symbolic":"function","parameters":["unit","sideAreas","pixels","allAreasSizePixel"],"value":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"sideAreas"},"member":"reduce"},"arguments":[{"__symbolic":"error","message":"Lambda not supported","line":120,"character":4,"module":"./utils"},{"remain":{"__symbolic":"reference","name":"pixels"},"list":[]}]}},"updateAreaSize":{"__symbolic":"function"},"MtxSplitModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12}],"declarations":[{"__symbolic":"reference","name":"MtxSplitComponent"},{"__symbolic":"reference","name":"MtxSplitPaneDirective"}],"exports":[{"__symbolic":"reference","name":"MtxSplitComponent"},{"__symbolic":"reference","name":"MtxSplitPaneDirective"}]}]}],"members":{}},"MtxSplitComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":70,"character":1},"arguments":[{"selector":"mtx-split","exportAs":"mtxSplit","host":{"class":"mtx-split"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":76,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":77,"character":19},"member":"OnPush"},"template":"<ng-content></ng-content>\r\n<ng-template ngFor [ngForOf]=\"displayedAreas\" let-index=\"index\" let-last=\"last\">\r\n  <div #gutterEls class=\"mtx-split-gutter\"\r\n       *ngIf=\"last === false\"\r\n       [style.flex-basis.px]=\"gutterSize\"\r\n       [style.order]=\"index * 2 + 1\"\r\n       (mousedown)=\"startDragging($event, index * 2 + 1, index + 1)\"\r\n       (touchstart)=\"startDragging($event, index * 2 + 1, index + 1)\"\r\n       (mouseup)=\"clickGutter($event, index + 1)\"\r\n       (touchend)=\"clickGutter($event, index + 1)\">\r\n    <div class=\"mtx-split-gutter-handle\"></div>\r\n  </div>\r\n</ng-template>\r\n","styles":[".mtx-split{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;overflow:hidden;width:100%;height:100%}.mtx-split>.mtx-split-gutter{position:relative;display:flex;flex-grow:0;flex-shrink:0;align-items:center;justify-content:center}.mtx-split>.mtx-split-gutter>.mtx-split-gutter-handle{position:absolute;opacity:0}.mtx-split>.mtx-split-pane{flex-grow:0;flex-shrink:0;overflow-x:hidden;overflow-y:auto}.mtx-split>.mtx-split-pane.mtx-split-pane-hidden{flex:0 1 0!important;overflow-x:hidden;overflow-y:hidden}.mtx-split.mtx-split-horizontal{flex-direction:row}.mtx-split.mtx-split-horizontal>.mtx-split-gutter{flex-direction:row;height:100%;cursor:col-resize}.mtx-split.mtx-split-horizontal>.mtx-split-gutter>.mtx-split-gutter-handle{width:8px;height:100%;left:-2px;right:2px}.mtx-split.mtx-split-horizontal>.mtx-split-pane{height:100%}.mtx-split.mtx-split-vertical{flex-direction:column}.mtx-split.mtx-split-vertical>.mtx-split-gutter{flex-direction:column;width:100%;cursor:row-resize}.mtx-split.mtx-split-vertical>.mtx-split-gutter>.mtx-split-gutter-handle{width:100%;height:8px;top:-2px;bottom:2px}.mtx-split.mtx-split-vertical>.mtx-split-pane{width:100%}.mtx-split.mtx-split-vertical>.mtx-split-pane.mtx-split-pane-hidden{max-width:0}.mtx-split.mtx-split-disabled>.mtx-split-gutter{cursor:default}.mtx-split.mtx-split-disabled>.mtx-split-gutter .mtx-split-gutter-handle{background-image:none}.mtx-split.mtx-split-transition.mtx-split-init:not(.mtx-dragging)>.mtx-split-gutter,.mtx-split.mtx-split-transition.mtx-split-init:not(.mtx-dragging)>.mtx-split-pane{transition:flex-basis .3s}\n"]}]}],"members":{"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"unit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":3}}]}],"gutterSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":3}}]}],"gutterStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":3}}]}],"restrictMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":3}}]}],"useTransition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":162,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":180,"character":3}}]}],"dir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":198,"character":3}}]}],"gutterDblClickDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":212,"character":3}}]}],"dragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":222,"character":3}}]}],"dragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":223,"character":3}}]}],"gutterClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":224,"character":3}}]}],"gutterDblClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":225,"character":3}}]}],"transitionEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":228,"character":3}}]}],"gutterEls":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":248,"character":3},"arguments":["gutterEls"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":251,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":252,"character":19},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":253,"character":19},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":254,"character":22}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"getNbGutters":[{"__symbolic":"method"}],"addArea":[{"__symbolic":"method"}],"removeArea":[{"__symbolic":"method"}],"updateArea":[{"__symbolic":"method"}],"showArea":[{"__symbolic":"method"}],"hideArea":[{"__symbolic":"method"}],"getVisibleAreaSizes":[{"__symbolic":"method"}],"setVisibleAreaSizes":[{"__symbolic":"method"}],"build":[{"__symbolic":"method"}],"refreshStyleSizes":[{"__symbolic":"method"}],"clickGutter":[{"__symbolic":"method"}],"startDragging":[{"__symbolic":"method"}],"dragEvent":[{"__symbolic":"method"}],"stopDragging":[{"__symbolic":"method"}],"notify":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MtxSplitPaneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"mtx-split-pane, [mtx-split-pane]","exportAs":"mtxSplitPane"}]}],"members":{"order":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"minSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"maxSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"lockSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":104,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":105,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":106,"character":22},{"__symbolic":"reference","name":"MtxSplitComponent"}]}],"ngOnInit":[{"__symbolic":"method"}],"setStyleOrder":[{"__symbolic":"method"}],"setStyleFlex":[{"__symbolic":"method"}],"lockEvents":[{"__symbolic":"method"}],"unlockEvents":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}},"origins":{"MtxSplitPoint":"./interface","MtxSplitArea":"./interface","MtxSplitSnapshot":"./interface","MtxSplitAreaSnapshot":"./interface","MtxSplitSideAbsorptionCapacity":"./interface","MtxSplitAreaAbsorptionCapacity":"./interface","MtxSplitOutputData":"./interface","MtxSplitOutputAreaSizes":"./interface","getPointFromEvent":"./utils","getElementPixelSize":"./utils","getInputBoolean":"./utils","getInputPositiveNumber":"./utils","isUserSizesValid":"./utils","getAreaMinSize":"./utils","getAreaMaxSize":"./utils","getGutterSideAbsorptionCapacity":"./utils","updateAreaSize":"./utils","MtxSplitModule":"./split.module","MtxSplitComponent":"./split.component","MtxSplitPaneDirective":"./split-pane.directive"},"importAs":"@ng-matero/extensions/split"}

package/split/split.component.scss

@@ -1,5 +1,6 @@
-$handle-size: 11px;
-$handle-offset: ($handle-size - 1px) *.5;
+$gutter-size: 4px;
+$handle-size: 8px;
+$handle-offset: ($handle-size - $gutter-size) * .5;
 
 .mtx-split {
   display: flex;

package/text3d/_text3d-theme.import.scss

@@ -1,2 +1,2 @@
-@forward 'text3d-theme' hide theme;
-@forward 'text3d-theme' as mtx-text3d-*;
+@forward 'text3d-theme' hide color, theme, typography;
+@forward 'text3d-theme' as mtx-text3d-* hide mtx-text3d-density;