ngwr 0.0.1

package/styles/components/spinner.scss

@@ -0,0 +1,44 @@
+@import '../vars';
+@import '../mixins';
+
+$spinner-prefix: #{$prefix}-spin;
+
+.#{$spinner-prefix} {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 1em;
+    height: 1em;
+
+    animation: rotate 2s linear infinite;
+
+    .path {
+      stroke: currentColor;
+      animation: dash 1.5s ease-in-out infinite;
+    }
+  }
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}

package/styles/components/tag.scss

@@ -0,0 +1,70 @@
+@import '../vars';
+@import '../mixins';
+
+$tag-prefix: #{$prefix}-tag;
+
+.#{$tag-prefix} {
+  display: inline-block;
+  height: auto;
+
+  white-space: nowrap;
+
+  font-family: $font-family;
+  font-size: 0.75rem;
+  font-weight: 600;
+
+  line-height: 1rem;
+  vertical-align: middle;
+
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+
+  margin-right: 0.25rem;
+
+  user-select: none;
+  transition: $transition-primary;
+
+  pointer-events: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &--hoverable {
+    pointer-events: all;
+  }
+
+  &--round {
+    border-radius: $btn-round-border-radius;
+  }
+
+  @each $color, $value in $theme-colors {
+    &.#{$tag-prefix}-#{$color} {
+      @include tag-colors-generate($value);
+    }
+
+    &.#{$tag-prefix}-#{$color} {
+      &.#{$tag-prefix}--outline {
+        @include tag-outline-colors-generate($value);
+      }
+    }
+
+    &.#{$tag-prefix}-#{$color} {
+      &.#{$tag-prefix}--transparent {
+        @include tag-transparent-colors-generate($value);
+      }
+    }
+  }
+
+  & > wr-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+    margin-right: 0.125rem;
+  }
+
+  & > wr-spin {
+    width: 0.75rem;
+    height: 0.75rem;
+    margin-right: 0.125rem;
+  }
+}

package/styles/components/tooltip.scss

@@ -0,0 +1,60 @@
+@import '../vars';
+@import '../mixins';
+
+$tooltip-prefix: #{$prefix}-tooltip;
+
+.#{$tooltip-prefix} {
+  display: block;
+
+  font-family: $font-family;
+  font-size: 0.75rem;
+  font-weight: 400;
+
+  line-height: 1.2;
+
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+
+  margin-bottom: 0.5rem;
+
+  color: $color-white;
+  background: $color-dark;
+
+  transition: $transition-primary;
+
+  position: relative;
+
+  &:after {
+    content: '';
+
+    position: absolute;
+    bottom: -0.25rem;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    width: 0;
+    height: 0;
+    border-left: 0.25rem solid transparent;
+    border-right: 0.25rem solid transparent;
+
+    border-top: 0.25rem solid $color-dark;
+  }
+
+  &__wrapper {
+    cursor: pointer;
+  }
+
+  opacity: 1;
+  animation: fade-in 0.125s linear forwards;
+
+  @keyframes fade-in {
+    0% {
+      transform: translateY(0.5rem);
+      opacity: 0
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}

package/styles/functions.scss

@@ -0,0 +1,184 @@
+@function to-rgb($value) {
+  @return red($value), green($value), blue($value);
+}
+
+@function map-loop($map, $func, $args...) {
+  $_map: ();
+
+  @each $key, $value in $map {
+    // allow to pass the $key and $value of the map as an function argument
+    $_args: ();
+    @each $arg in $args {
+      $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
+    }
+
+    $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
+  }
+
+  @return $_map;
+}
+$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
+
+@function color-contrast($background, $color-contrast-dark: $color-dark, $color-contrast-light: $color-white, $min-contrast-ratio: 4.5) {
+  $foregrounds: $color-contrast-light, $color-contrast-dark, $color-white, $color-black;
+  $max-ratio: 0;
+  $max-ratio-color: null;
+
+  @each $color in $foregrounds {
+    $contrast-ratio: contrast-ratio($background, $color);
+    @if $contrast-ratio > $min-contrast-ratio {
+      @return $color;
+    } @else if $contrast-ratio > $max-ratio {
+      $max-ratio: $contrast-ratio;
+      $max-ratio-color: $color;
+    }
+  }
+
+  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+
+  @return $max-ratio-color;
+}
+
+@function contrast-ratio($background, $foreground: $color-light) {
+  $l1: luminance($background);
+  $l2: luminance(opaque($background, $foreground));
+
+  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+}
+@function luminance($color) {
+  $rgb: (
+    "r": red($color),
+    "g": green($color),
+    "b": blue($color)
+  );
+
+  @each $name, $value in $rgb {
+    $value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
+    $rgb: map-merge($rgb, ($name: $value));
+  }
+
+  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+}
+
+// Return opaque color
+// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+@function opaque($background, $foreground) {
+  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
+}
+
+@function tint-color($color, $weight) {
+  @return mix(white, $color, $weight);
+}
+
+// Shade a color: mix a color with black
+@function shade-color($color, $weight) {
+  @return mix(black, $color, $weight);
+}
+
+// Shade the color if the weight is positive, else tint it
+@function shift-color($color, $weight) {
+  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+}
+// scss-docs-end color-functions
+
+// Return valid calc
+@function add($value1, $value2, $return-calc: true) {
+  @if $value1 == null {
+    @return $value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+    @return $value1 + $value2;
+  }
+
+  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
+}
+
+@function subtract($value1, $value2, $return-calc: true) {
+  @if $value1 == null and $value2 == null {
+    @return null;
+  }
+
+  @if $value1 == null {
+    @return -$value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+    @return $value1 - $value2;
+  }
+
+  @if type-of($value2) != number {
+    $value2: unquote("(") + $value2 + unquote(")");
+  }
+
+  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
+}
+
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+  @while ($remainder > 0 and $precision >= 0) {
+    $quotient: 0;
+    @while ($remainder >= $divisor) {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+    $result: $result * 10 + $quotient;
+    $factor: $factor * .1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+    @if ($precision < 0 and $remainder >= $divisor * 5) {
+      $result: $result + 1;
+    }
+  }
+  $result: $result * $factor * $sign;
+  $dividend-unit: unit($dividend);
+  $divisor-unit: unit($divisor);
+  $unit-map: (
+    "px": 1px,
+    "rem": 1rem,
+    "em": 1em,
+    "%": 1%
+  );
+  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+    $result: $result * map-get($unit-map, $dividend-unit);
+  }
+  @return $result;
+}
+
+@function valid-radius($radius) {
+  $return: ();
+  @each $value in $radius {
+    @if type-of($value) == number {
+      $return: append($return, max($value, 0));
+    } @else {
+      $return: append($return, $value);
+    }
+  }
+  @return $return;
+}
+
+// scss-docs-start border-radius-mixins
+@mixin border-radius($radius: $border-radius-base, $fallback-border-radius: false) {
+  border-radius: valid-radius($radius);
+}
+
+

package/styles/grid.scss

@@ -0,0 +1,177 @@
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+  xga: 1600px,
+  fhd: 1920px,
+  rt: 2560px
+);
+
+$displays: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px,
+  xga: 1530px,
+  fhd: 1830px,
+  rt: 2470px
+);
+
+$columns: 12 !default;
+$gutter: 1.5rem !default;
+$container-padding-x: $gutter * .5 !default;
+
+@function breakpoint-min($name) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+@function breakpoint-infix($name) {
+  @return if(breakpoint-min($name) == null, "", "-#{$name}");
+}
+
+@mixin media-breakpoint-up($name) {
+  $min: breakpoint-min($name);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+.container,
+.container-fluid {
+  width: 100%;
+  padding-right: $container-padding-x;
+  padding-left: $container-padding-x;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@each $breakpoint, $container-max-width in $displays {
+  .container-#{$breakpoint} {
+    @extend .container-fluid;
+  }
+
+  @include media-breakpoint-up($breakpoint) {
+    %responsive-container-#{$breakpoint} {
+      max-width: $container-max-width;
+    }
+
+    $extend-breakpoint: true;
+
+    @each $name, $width in $breakpoints {
+      @if ($extend-breakpoint) {
+        .container#{breakpoint-infix($name)} {
+          @extend %responsive-container-#{$breakpoint};
+        }
+
+        @if ($breakpoint == $name) {
+          $extend-breakpoint: false;
+        }
+      }
+    }
+  }
+}
+
+@mixin make-row() {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: calc(-.5 * #{$gutter});
+  margin-left: calc(-.5 * #{$gutter});
+}
+
+.row {
+  @include make-row();
+}
+
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error 'Cannot divide by 0';
+  }
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+  @while ($remainder > 0 and $precision >= 0) {
+    $quotient: 0;
+    @while ($remainder >= $divisor) {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+    $result: $result * 10 + $quotient;
+    $factor: $factor * .1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+    @if ($precision < 0 and $remainder >= $divisor * 5) {
+      $result: $result + 1;
+    }
+  }
+  $result: $result * $factor * $sign;
+  $dividend-unit: unit($dividend);
+  $divisor-unit: unit($divisor);
+  $unit-map: (
+    "px": 1px,
+    "rem": 1rem,
+    "em": 1em,
+    "%": 1%
+  );
+  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+    $result: $result * map-get($unit-map, $dividend-unit);
+  }
+  @return $result;
+}
+
+@mixin make-col($size) {
+  box-sizing: border-box;
+  max-width: 100%;
+  padding-right: calc(#{$gutter} * .5);
+  padding-left: calc(#{$gutter} * .5);
+  flex: 0 0 auto;
+  width: percentage(divide($size, $columns));
+}
+
+@mixin row-cols($count) {
+  > * {
+    flex: 0 0 auto;
+    width: divide(100%, $count);
+  }
+}
+
+.col {
+  box-sizing: border-box;
+  max-width: 100%;
+  padding-right: calc(#{$gutter} * .5);
+  padding-left: calc(#{$gutter} * .5);
+  flex: 0 0 auto;
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  $infix: breakpoint-infix($breakpoint);
+
+  @include media-breakpoint-up($breakpoint) {
+    .col#{$infix} {
+      flex: 1 0 0;
+    }
+
+    @if $columns > 0 {
+      @for $i from 1 through $columns {
+        .col#{$infix}-#{$i} {
+          @include make-col($i);
+        }
+      }
+    }
+  }
+}
+

package/styles/index.scss

@@ -0,0 +1,165 @@
+/*!
+ * Walrus v0.0.1
+ * Copyright 2021 Swordfish Security, Inc.
+ * Licensed under GPL-3
+ */
+
+@import './functions';
+@import './vars';
+
+@import './root';
+@import './reset';
+@import './components';
+@import './grid';
+
+// cdk overlay
+.cdk-overlay-container {
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  z-index: 1000;
+}
+
+.cdk-visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  outline: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.cdk-overlay-backdrop {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
+  opacity: 0;
+  position: absolute;
+  pointer-events: auto;
+  z-index: 1000;
+
+  &.wr-modal-mask {
+    opacity: 1;
+  }
+}
+
+.cdk-overlay-pane {
+  position: absolute;
+  pointer-events: auto;
+  z-index: 1000; // Give an opportunity to the content own to manage their z-index such as Modal
+}
+
+.cdk-overlay-connected-position-bounding-box {
+  position: absolute;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  min-width: 1px;
+  min-height: 1px;
+}
+
+// Used when disabling global scrolling.
+.cdk-global-scrollblock {
+  position: fixed;
+
+  // Necessary for the content not to lose its width. Note that we're using 100%, instead of
+  // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
+  // that the element had before we made it `fixed`.
+  width: 100%;
+
+  // Note: this will always add a scrollbar to whatever element it is on, which can
+  // potentially result in double scrollbars. It shouldn't be an issue, because we won't
+  // block scrolling on a page that doesn't have a scrollbar in the first place.
+  overflow-y: scroll;
+
+  // https://github.com/angular/material2/issues/15051
+  body {
+    overflow-x: visible;
+  }
+}
+
+.wr-overlay-transparent-backdrop {
+  &, &.cdk-overlay-backdrop-showing {
+    opacity: 0;
+  }
+}
+
+.wr-animate-disabled {
+  // badge
+  &.wr-scroll-number-only {
+    animation: none;
+    transition: none;
+  }
+
+  // drawer
+  &.wr-drawer {
+    &.wr-drawer-open .wr-drawer-mask {
+      animation: none;
+      transition: none;
+    }
+
+    & > * {
+      transition: none;
+    }
+  }
+
+  // modal
+  .wr-modal-mask, .wr-modal {
+    animation: none;
+    transition: none;
+
+    &.zoom-enter, &.zoom-leave,
+    &.zoom-enter-active, &.zoom-leave-active {
+      animation: none;
+      transition: none;
+    }
+  }
+
+  // menu
+  &.wr-menu {
+    transition: none;
+
+    .wr-menu-item, .wr-menu-submenu-title {
+      transition: none;
+    }
+
+    .wr-menu-item .wricon, .wr-menu-submenu-title .wricon {
+      transition: none;
+
+      & + span {
+        transition: none;
+      }
+    }
+  }
+
+  // tabs
+  &.wr-tabs {
+    .wr-tabs-top-content.wr-tabs-content-animated,
+    .wr-tabs-bottom-content.wr-tabs-content-animated,
+    .wr-tabs-top-content > .wr-tabs-tabpane,
+    .wr-tabs-bottom-content > .wr-tabs-tabpane,
+    &.wr-tabs-left .wr-tabs-ink-bar-animated,
+    &.wr-tabs-right .wr-tabs-ink-bar-animated,
+    &.wr-tabs-top .wr-tabs-ink-bar-animated,
+    &.wr-tabs-bottom .wr-tabs-ink-bar-animated {
+      transition: none;
+    }
+  }
+
+  // collapse
+  &.wr-collapse > .wr-collapse-item > .wr-collapse-header .wr-collapse-arrow svg {
+    transition: none;
+  }
+}
+

package/styles/mixins/_index.scss

@@ -0,0 +1,22 @@
+@import 'alert';
+@import 'button';
+@import 'tag';
+
+@import 'reset-component';
+
+@mixin column {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  width: 100%;
+}
+
+@mixin row {
+  display: flex;
+  align-items: center;
+}
+
+@mixin no-select {
+  user-select: none;
+  pointer-events: none;
+}