ngwr 0.0.3 → 0.0.7

package/ng-package.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist",
-  "deleteDestPath": true,
-  "assets": [
-    "./styles/**/**/*.scss"
-  ],
-  "lib": {
-    "entryFile": "public-api.ts"
-  }
-}

package/password-input/password-input.component.html

@@ -1,10 +0,0 @@
-<input
-  wr-input
-  [disabled]="disabled"
-  [type]="type"
-  [value]="value"
-  (focusout)="onFocusOut()"
-  (input)="onInput($event)"
->
-<wr-icon class="wr-password-input-icon" *ngIf="type === 'input'" name="eye" (click)="onVisibilityClick($event)"></wr-icon>
-<wr-icon class="wr-password-input-icon" *ngIf="type === 'password'" name="eye-off" (click)="onVisibilityClick($event)"></wr-icon>

package/password-input/password-input.component.ts

@@ -1,56 +0,0 @@
-import { Component, HostBinding, Optional, Self, ViewEncapsulation } from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
-
-@Component({
-  selector: 'wr-password-input',
-  templateUrl: './password-input.component.html',
-  encapsulation: ViewEncapsulation.None
-})
-export class WalrusPasswordInputComponent implements ControlValueAccessor {
-  @HostBinding() class = 'wr-password-input';
-
-  public type: 'input' | 'password' = 'password';
-  public disabled: boolean = false;
-  public value: string | null = null;
-  public touched = false;
-
-  constructor(
-    @Optional() @Self() public ngControl: NgControl
-  ) {
-    if (ngControl !== null) {
-      ngControl.valueAccessor = this;
-    }
-  }
-
-  onVisibilityClick($event: any): void {
-    $event.stopPropagation();
-    this.type === 'password' ? this.type = 'input' : this.type = 'password';
-  }
-
-  onInput($event: any): void {
-    this.value = $event.currentTarget.value;
-    this.touched = true;
-    this.onChange(this.value);
-  }
-
-  onChange = (value: any) => { };
-
-  onTouched = () => {};
-
-  onFocusOut(): void {
-    this.touched = true;
-    this.onTouched();
-  }
-
-  registerOnChange(fn: any) {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any) {
-    this.onTouched = fn;
-  }
-
-  writeValue(obj: any): void {
-    this.value = obj;
-  }
-}

package/password-input/password-input.module.ts

@@ -1,23 +0,0 @@
-import { PlatformModule } from '@angular/cdk/platform';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { WalrusPasswordInputComponent } from './password-input.component';
-import { WalrusInputModule } from '../input';
-import { WrIconModule } from '../icon';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    PlatformModule,
-    WalrusInputModule,
-    WrIconModule.withIcons()
-  ],
-  declarations: [
-    WalrusPasswordInputComponent,
-  ],
-  exports: [
-    WalrusPasswordInputComponent,
-  ]
-})
-export class WalrusPasswordInputModule {}

package/skeleton/skeleton.component.ts

@@ -1,38 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  HostBinding,
-  Input,
-  OnDestroy,
-  ViewEncapsulation
-} from '@angular/core';
-import { Subject } from 'rxjs';
-
-@Component({
-  selector: 'wr-skeleton',
-  exportAs: 'wrSkeleton',
-  preserveWhitespaces: false,
-  template: '<span>&nbsp;</span>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
-})
-export class WalrusSkeletonComponent implements AfterViewInit, OnDestroy {
-  @Input() color: 'light' | 'dark' = 'dark';
-  @HostBinding('class') classes = `wr-skeleton`;
-
-  private destroy$ = new Subject<void>();
-
-  constructor(private readonly el: ElementRef) {}
-
-  ngAfterViewInit() {
-    const style = this.color === 'light' ? 'var(--color-white-rgb)' : 'var(--color-dark-rgb)';
-    this.el.nativeElement.style.setProperty('--skeleton-style', style);
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-}

package/skeleton/skeleton.module.ts

@@ -1,11 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { WalrusSkeletonComponent } from './skeleton.component';
-import { WalrusSpinnerModule } from '../spinner';
-
-@NgModule({
-  imports: [CommonModule, WalrusSpinnerModule],
-  declarations: [WalrusSkeletonComponent],
-  exports: [WalrusSkeletonComponent]
-})
-export class WalrusSkeletonModule {}

package/spinner/spinner.component.ts

@@ -1,11 +0,0 @@
-import { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'wr-spin',
-  template: '<svg viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle></svg>',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class WalrusSpinnerComponent {
-  @HostBinding('class') class = 'wr-spin';
-}

package/spinner/spinner.module.ts

@@ -1,10 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { WalrusSpinnerComponent } from './spinner.component';
-
-@NgModule({
-  imports: [CommonModule],
-  declarations: [WalrusSpinnerComponent],
-  exports: [WalrusSpinnerComponent]
-})
-export class WalrusSpinnerModule {}

package/styles/components/_index.scss

@@ -1,15 +0,0 @@
-@import 'alert';
-@import 'button';
-@import 'card';
-@import 'divider';
-@import 'dropdown';
-@import 'extended-input';
-@import 'form';
-@import 'heading';
-@import 'icon';
-@import 'input';
-@import 'password-input';
-@import 'skeleton';
-@import 'spinner';
-@import 'tag';
-@import 'tooltip';

package/styles/components/alert.scss

@@ -1,28 +0,0 @@
-@import '../vars';
-@import '../mixins';
-
-$alert-prefix: #{$prefix}-alert;
-
-.#{$alert-prefix} {
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  margin-bottom: 0.5rem;
-
-  word-wrap: break-word;
-  font-size: $font-size-base;
-  font-weight: $font-weight-base;
-  line-height: $line-height-base;
-
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.375rem;
-
-  user-select: none;
-
-  @each $color, $value in $theme-colors {
-    &.#{$alert-prefix}-#{$color} {
-      @include alert-colors-generate($value);
-    }
-  }
-}

package/styles/components/button.scss

@@ -1,115 +0,0 @@
-@import '../vars';
-@import '../mixins';
-
-$btn-prefix: #{$prefix}-btn;
-
-.#{$btn-prefix} {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: auto;
-
-  padding: calc(#{$btn-padding-y} + 1px) $btn-padding-x;
-  border-radius: $btn-border-radius;
-
-  font-family: $font-family;
-  //line-height: $btn-line-height;
-  text-align: center;
-  vertical-align: middle;
-
-  cursor: pointer;
-  user-select: none;
-
-  position: relative;
-
-  transition: $transition-primary;
-
-  &__text {
-    font-size: $btn-font-size;
-    font-weight: $btn-font-weight;
-  }
-
-  &--block {
-    width: 100%;
-  }
-
-  &--rounded {
-    border-radius: $btn-round-border-radius;
-    padding: $btn-round-padding-y $btn-round-padding-x;
-  }
-
-  & > wr-icon {
-    width: 1rem;
-    height: 1rem;
-    margin-right: 0.375rem;
-  }
-
-  & > wr-spin {
-    position: absolute;
-    z-index: 1;
-    top: 50%;
-    transform: translateY(-50%);
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  &--small {
-    padding: 0.25rem 0.5rem;
-
-    .#{$btn-prefix} {
-      &__text {
-        font-size: $btn-font-size / 1.25;
-      }
-    }
-
-    & > wr-icon {
-      width: 0.75rem;
-      height: 0.75rem;
-      margin-right: 0.25rem;
-    }
-  }
-
-  &--loading {
-    pointer-events: none;
-
-    .#{$btn-prefix} {
-      &__text {
-        opacity: 0;
-      }
-    }
-
-    & > wr-icon {
-      opacity: 0;
-    }
-  }
-}
-
-@each $color, $value in $theme-colors {
-  .#{$btn-prefix}-#{$color} {
-    @include button-variant($value);
-
-    &:disabled,
-    &.#{$btn-prefix}--disabled {
-      color: var(--color-medium);
-      background-color: var(--color-light);
-      box-shadow: none;
-      pointer-events: none;
-    }
-  }
-}
-
-@each $color, $value in $theme-colors {
-  .#{$btn-prefix}-#{$color} {
-    &.#{$btn-prefix}--outlined {
-      @include button-outline-variant($value);
-
-      &:disabled,
-      &.#{$btn-prefix}--disabled {
-        color: var(--color-medium);
-        background-color: transparent;
-        box-shadow: inset 0 0 0 1px var(--color-light);
-        pointer-events: none;
-      }
-    }
-  }
-}

package/styles/components/card.scss

@@ -1,41 +0,0 @@
-@import '../vars';
-@import '../mixins';
-
-$card-prefix: #{$prefix}-card;
-
-.#{$card-prefix} {
-  display: flex;
-  flex-direction: column;
-  align-content: baseline;
-  justify-content: center;
-
-  background: $color-white;
-  border-radius: 0.75rem;
-
-  padding: 1.5rem 1.25rem;
-  box-shadow: $shadow-1-down;
-
-  &--hoverable {
-    transition: $transition-base;
-
-    &:hover {
-      cursor: pointer;
-      box-shadow: $box-shadow-base;
-
-      .#{$card-prefix}__title {
-        color: $color-secondary;
-      }
-    }
-  }
-
-  &__title {
-    color: $color-dark;
-    font-size: 1.125rem;
-    font-weight: 500;
-    line-height: 1;
-
-    margin-bottom: 0.5rem;
-
-    transition: $transition-base;
-  }
-}

package/styles/components/divider.scss

@@ -1,19 +0,0 @@
-@import '../vars';
-@import '../mixins';
-
-$divider-prefix: #{$prefix}-divider;
-
-.#{$divider-prefix} {
-  display: block;
-
-  width: 100%;
-  height: 1px;
-
-  margin-top: 4px;
-  margin-bottom: 4px;
-
-  background: $color-light;
-
-  user-select: none;
-  pointer-events: none;
-}

package/styles/components/dropdown.scss

@@ -1,128 +0,0 @@
-@import '../vars';
-@import '../mixins';
-
-$dropdown-prefix: #{$prefix}-dropdown;
-
-.#{$dropdown-prefix} {
-  @include reset-component();
-
-  position: absolute;
-  top: -9999px;
-  left: -9999px;
-  z-index: $zindex-dropdown;
-  display: block;
-
-  &::before {
-    position: absolute;
-    top: -$popover-distance + $popover-arrow-width;
-    right: 0;
-    bottom: -$popover-distance + $popover-arrow-width;
-    left: -7px;
-    z-index: -9999;
-    opacity: 0.0001;
-    content: ' ';
-  }
-
-  &-trigger {
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  &-wrap {
-    position: relative;
-  }
-
-  &-hidden,
-  &-menu-hidden,
-  &-menu-submenu-hidden {
-    display: none;
-  }
-
-  &-menu {
-    display: flex;
-    flex-direction: column;
-    align-items: baseline;
-    position: relative;
-    margin: 0;
-    padding: 1rem;
-    text-align: left;
-    list-style-type: none;
-    background-color: $dropdown-menu-bg;
-    background-clip: padding-box;
-    border-radius: $border-radius-base;
-    outline: none;
-    box-shadow: $box-shadow-base;
-
-    &-submenu-popup {
-      position: absolute;
-      z-index: $zindex-dropdown;
-      background: transparent;
-      box-shadow: none;
-      transform-origin: 0 0;
-
-      ul,
-      li {
-        list-style: none;
-      }
-
-      ul {
-        margin-right: 0.3em;
-        margin-left: 0.3em;
-      }
-    }
-
-    // ======================= Item Content =======================
-    &-item {
-      position: relative;
-      display: flex;
-      align-items: center;
-      color: $color-dark;
-      transition: all 0.15s linear;
-
-      &:hover {
-        color: $color-secondary;
-      }
-    }
-
-    &-item,
-    &-submenu-title {
-      clear: both;
-      font-weight: normal;
-      white-space: nowrap;
-      cursor: pointer;
-      margin: 0 0 1rem;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-    }
-  }
-
-  &.#{$dropdown-prefix}-slide-down-enter,
-  &.#{$dropdown-prefix}-slide-down-appear,
-  &.#{$dropdown-prefix}-slide-down-enter,
-  &.#{$dropdown-prefix}-slide-down-appear,
-  &.#{$dropdown-prefix}-slide-down-enter,
-  &.#{$dropdown-prefix}-slide-down-appear {
-    animation-name: antSlideUpIn;
-  }
-}
-
-.wr-dropdown-menu {
-  & > ul {
-    list-style: inherit;
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.wr-dropdown {
-  top: 0;
-  left: 0;
-  position: relative;
-  width: 100%;
-  margin-top: 6px;
-  margin-bottom: 6px;
-}

package/styles/components/extended-input.scss

@@ -1,64 +0,0 @@
-@import '../vars';
-@import '../mixins';
-
-$extended-input-prefix: #{$prefix}-extended-input;
-
-.#{$extended-input-prefix} {
-  display: flex;
-  align-items: center;
-
-  overflow: hidden;
-
-  transition: $transition-primary;
-  width: 100%;
-
-  &--has-suffix {
-    & > .wr-input {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
-  &--has-prefix {
-    & > .wr-input {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-
-  &-suffix,
-  &-prefix {
-    display: inline-flex;
-    align-items: center;
-    background: rgba($color-light, 0.5);
-    border: 1px solid $color-light;
-
-    padding-left: $input-padding-y;
-    padding-right: $input-padding-y;
-
-    height: 100%;
-    max-width: 50%;
-
-    user-select: none;
-    pointer-events: none;
-
-    &__text {
-      color: $color-medium;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  &-suffix {
-    border-top-right-radius: $input-border-radius;
-    border-bottom-right-radius: $input-border-radius;
-    border-left: 0;
-  }
-
-  &-prefix {
-    border-top-left-radius: $input-border-radius;
-    border-bottom-left-radius: $input-border-radius;
-    border-right: 0;
-  }
-}

package/styles/components/form.scss

@@ -1,85 +0,0 @@
-@import '../vars';
-@import '../mixins';
-
-$form-prefix: #{$prefix}-form;
-$input-prefix: #{$prefix}-input;
-$password-input-prefix: #{$prefix}-password-input;
-$extended-input-prefix: #{$prefix}-extended-input;
-
-.#{$form-prefix} {
-  &-item {
-    @include column;
-    margin-bottom: 1rem;
-
-    & > * {
-      width: 100%;
-    }
-
-    & > label {
-      display: inline-flex;
-      align-items: center;
-      color: $color-medium;
-      font-size: 0.875rem;
-      font-weight: 400;
-      line-height: 1;
-      margin-bottom: 0.5rem;
-      transition: $transition-base;
-
-      & > nz-switch {
-        margin-left: 0.5rem;
-      }
-
-      & > nz-radio-group {
-        margin-left: 0.5rem;
-
-        .ant-radio-button-wrapper {
-          font-size: 0.625rem;
-          height: 0.825rem !important;
-          line-height: calc(1rem - 4px) !important;
-
-          &:first-child {
-            border-top-left-radius: 50rem;
-            border-bottom-left-radius: 50rem;
-          }
-          &:last-child {
-            border-top-right-radius: 50rem;
-            border-bottom-right-radius: 50rem;
-          }
-        }
-      }
-    }
-
-    &--has-error {
-      & > label {
-        color: $color-danger;
-      }
-      & .#{$input-prefix} {
-        box-shadow: inset 0 0 0 1px $color-danger;
-      }
-      & .#{$extended-input-prefix} {
-        &-suffix,
-        &-prefix {
-          border-color: $color-danger;
-          background: rgba($color-danger, 0.25);
-
-          &__text {
-            color: $color-danger;
-          }
-        }
-      }
-
-      & > nz-select {
-        .ant-select-selector {
-          box-shadow: inset 0 0 0 1px $color-danger;
-        }
-      }
-    }
-  }
-
-  &-error {
-    color: $color-danger;
-    font-size: 0.75rem;
-    opacity: 0.75;
-    margin-top: 0.25rem;
-  }
-}

package/styles/components/heading.scss

@@ -1,25 +0,0 @@
-@import '../vars';
-
-small {
-  font-size: 0.75rem;
-  color: inherit;
-  opacity: 0.75;
-}
-
-.h1,.h2,.h3,.h4,.h5,.h6 {
-  color: $heading-color;
-  font-family: $headings-font-family;
-  font-style: $headings-font-style;
-  font-weight: $headings-font-weight;
-  line-height: $headings-line-height;
-}
-
-@each $heading, $font-size in $heading-sizes {
-  .h#{$heading} {
-    font-size: $font-size;
-  }
-
-  h#{$heading} {
-    @extend .h#{$heading};
-  }
-}