ngwr 0.1.3 → 0.2.0

package/LICENSE

@@ -1,6 +1,8 @@
 MIT License
 
-Copyright (c) 2022 Garuna LLP
+Copyright (c) 2022 Roman Khegay
+Copyright (c) 2022 Garuna, LLP
+Copyright (c) 2022 Stingray Technologies, LLP
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,40 +1,53 @@
-<img src="logo.svg" alt="ngwr logo" width="24px">
+# <img src="logo.svg" alt="ngwr logo" height="32px">
 
----
-
-### [NGWR](https://ngwr.dev) – Angular UI components library
-
----
-
-[![npm version](https://img.shields.io/npm/v/ngwr)](https://www.npmjs.com/package/ngwr)[![ngwr downloads](https://img.shields.io/npm/dm/ngwr)](https://www.npmjs.com/package/ngwr)[![ngwr size](https://img.shields.io/bundlephobia/min/ngwr.svg)](https://www.npmjs.com/package/ngwr)[![angular version](https://img.shields.io/npm/dependency-version/ngwr/peer/@angular/core)](https://www.npmjs.com/package/ngwr)
+[![npm version](https://img.shields.io/npm/v/ngwr)](https://www.npmjs.com/package/ngwr)
+[![ngwr downloads](https://img.shields.io/npm/dm/ngwr)](https://www.npmjs.com/package/ngwr)
+[![ngwr size](https://img.shields.io/bundlephobia/min/ngwr.svg)](https://www.npmjs.com/package/ngwr)
+[![angular version](https://img.shields.io/npm/dependency-version/ngwr/peer/@angular/core)](https://www.npmjs.com/package/ngwr)
 
 [![ngwr codeql](https://github.com/thekhegay/ngwr/workflows/CodeQL/badge.svg)](https://github.com/thekhegay/ngwr)
 
 [![license](https://img.shields.io/npm/l/ngwr)](https://github.com/thekhegay/ngwr/blob/main/LICENSE)
 
----
+## Important information
+NGWR is currently in development stage. All components are updating every week. Use it on your own risk. All bugreports and ideas are [welcomed](https://github.com/thekhegay/ngwr/issues/new).
 
-### Installation
+## Installation
 
-```bash
+```shell
+$ npm install ngwr
+# or yarn users
 $ yarn add ngwr
 ```
 
-or
+## Styles
 
-```bash
-$ npm install ngwr
+Don't forget to add styles:
+```scss
+@import '~ngwr';
 ```
 
-then
+## [Components](https://ngwr.dev/components)
 
-```scss
-@import '~ngwr/ngwr.min.css';
-```
+- [Button](https://ngwr.dev/components/button)
+- [Checkbox](https://ngwr.dev/components/checkbox)
+- [Divider](https://ngwr.dev/components/divider)
+- [Form](https://ngwr.dev/components/form)
+- [Icon](https://ngwr.dev/components/icon)
+- [Input](https://ngwr.dev/components/input)
+- [Skeleton](https://ngwr.dev/components/skeleton)
+- [Spinner](https://ngwr.dev/components/spinner)
+- [Tag](https://ngwr.dev/components/tag)
+
+- [Colors](https://ngwr.dev/common/colors)
+- [Grid](https://ngwr.dev/common/grid)
 
-then add [components](https://ngwr.dev/components) to your project.
+## Authors
+- [Roman Khegay](https://github.com/thekhegay) – code code, design
 
----
-> Originally created by [@thekhegay](https://github.com/thekhegay)
+## Sponsors
+- [Garuna](https://garuna.dev)
+- [Stingray Technologies](https://stingray-mobile.ru/)
 
->Copyright @ 2022 [Garuna](https://garuna.dev) & [Stingray Technologies](https://stingray-mobile.ru/)
+## License
+Feel free to use NGWR in your commercial projects. Everything is covered by [MIT](/LICENSE) license.

package/_index.scss

@@ -0,0 +1,27 @@
+/*!
+ * Copyright 2022 Garuna LLP
+ * Copyright 2022 Stingray Technologies LLP
+ *
+ * Licensed under MIT
+ *
+ * https://github.com/thekhegay/ngwr
+ */
+
+@import 'styles/vars';
+
+@import 'styles/root';
+@import 'styles/reset';
+
+@import 'styles/grid';
+@import 'styles/animations';
+
+@import 'button/button';
+@import 'checkbox/checkbox';
+@import 'divider/divider';
+@import 'form/form';
+@import 'icon/icon';
+@import 'input/input';
+@import 'skeleton/skeleton';
+@import 'spinner/spinner';
+@import 'tag/tag';
+

package/button/{button.module.d.ts → button-module.d.ts}

@@ -1,10 +1,10 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./button.component";
+import * as i1 from "./button";
 import * as i2 from "@angular/common";
-import * as i3 from "../spinner/spinner.module";
-import * as i4 from "../icon/wr-icon.module";
+import * as i3 from "ngwr/spinner";
+import * as i4 from "ngwr/icon";
 export declare class WrButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<WrButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<WrButtonModule, [typeof i1.WrButtonComponent], [typeof i2.CommonModule, typeof i3.WrSpinnerModule, typeof i4.WrIconModule], [typeof i1.WrButtonComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<WrButtonModule, [typeof i1.WrButton], [typeof i2.CommonModule, typeof i3.WrSpinnerModule, typeof i4.WrIconModule], [typeof i1.WrButton]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<WrButtonModule>;
 }

package/button/button.d.ts

@@ -0,0 +1,58 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { ChangeDetectorRef, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { WrAbstractBase } from 'ngwr/core/abstract';
+import { WrThemeColor } from 'ngwr/core/color';
+import { SafeAny } from 'ngwr/core/types';
+import { wrIconName } from 'ngwr/icon';
+import * as i0 from "@angular/core";
+export declare class WrButton extends WrAbstractBase implements OnInit, OnDestroy {
+    private readonly cdr;
+    private readonly elRef;
+    private readonly ngZone;
+    /** Set color of `wr-btn`; */
+    get color(): WrThemeColor;
+    set color(value: WrThemeColor);
+    private _color;
+    /** Set size of `wr-btn`; */
+    get size(): 'default' | 'small';
+    set size(value: 'default' | 'small');
+    private _size;
+    /** Set outlined state of `wr-btn`; */
+    get outlined(): boolean;
+    set outlined(value: BooleanInput);
+    private _outlined;
+    /** Set rounded state of `wr-btn`; */
+    get rounded(): boolean;
+    set rounded(value: BooleanInput);
+    private _rounded;
+    /** Set fullwidth state of `wr-btn`; */
+    get fullwidth(): boolean;
+    set fullwidth(value: BooleanInput);
+    private _fullwidth;
+    /** Set loading state of `wr-btn`; */
+    get loading(): boolean;
+    set loading(value: BooleanInput);
+    private _loading;
+    /** Set disabled state of `wr-btn`; */
+    get disabled(): boolean;
+    set disabled(value: BooleanInput);
+    private _disabled;
+    /** Set icon of `wr-btn`; */
+    get icon(): wrIconName | null;
+    set icon(value: wrIconName | null);
+    private _icon;
+    /** Set icon position of `wr-btn`; */
+    get iconPosition(): 'start' | 'end';
+    set iconPosition(value: 'start' | 'end');
+    private _iconPosition;
+    /** Set element disabled attribute */
+    get nativeDisabled(): '' | null;
+    /** Set element classes */
+    get elClasses(): SafeAny;
+    constructor(cdr: ChangeDetectorRef, elRef: ElementRef<HTMLButtonElement | HTMLLinkElement | HTMLAnchorElement | HTMLElement>, ngZone: NgZone);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private preventEventsWhenDisabled;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrButton, "wr-btn, button[wr-btn], a[wr-btn]", ["wrBtn"], { "color": "color"; "size": "size"; "outlined": "outlined"; "rounded": "rounded"; "fullwidth": "fullwidth"; "loading": "loading"; "disabled": "disabled"; "icon": "icon"; "iconPosition": "iconPosition"; }, {}, never, ["*"], false>;
+}

package/button/button.scss

@@ -0,0 +1,160 @@
+@import '../styles/vars';
+
+.wr-btn {
+  display: inline-block;
+
+  padding: var(--wr-btn-padding-y-base) var(--wr-btn-padding-x-base);
+
+  font-family: var(--wr-btn-font-family-base);
+  font-size: var(--wr-btn-font-size-base);
+  font-weight: var(--wr-btn-font-weight-base);
+  line-height: var(--wr-btn-line-height-base);
+
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+
+  cursor: pointer;
+  user-select: none;
+
+  border: none;
+  border-radius: var(--wr-btn-border-radius-base);
+
+  transition: var(--wr-transition-short);
+
+  position: relative;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &[disabled],
+  &:disabled,
+  &.disabled,
+  fieldset:disabled & {
+    color: var(--wr-color-medium) !important;
+    background-color: var(--wr-color-light) !important;
+    background-image: none;
+    border: none;
+    box-shadow: none !important;
+    pointer-events: none;
+
+    .wr-btn__icon,
+    .wr-btn__spin {
+      color: var(--wr-color-medium);
+    }
+  }
+
+  &__text {
+    display: inline-block;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    word-break: break-all;
+    padding: 0;
+    transition: var(--wr-transition-base);
+  }
+
+  &__spin {
+    position: absolute;
+    z-index: 3;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+  }
+
+  &__icon {
+    width: 1rem !important;
+    height: 1rem !important;
+    min-width: 1rem !important;
+    min-height: 1rem !important;
+    transition: var(--wr-transition-base);
+  }
+
+  &--icon-start {
+    padding-left: calc(var(--wr-btn-padding-x-base) - 0.0825rem);
+
+    .wr-btn__icon {
+      margin-right: 0.375rem;
+    }
+  }
+
+  &--icon-end {
+    .wr-btn__icon {
+      margin-left: 0.25rem;
+    }
+  }
+
+  &--loading {
+    pointer-events: none;
+
+    .wr-btn__text,
+    .wr-btn__icon,{
+      opacity: 0;
+    }
+  }
+
+  &--rounded {
+    border-radius: var(--wr-btn-rounded-border-radius);
+    padding: var(--wr-btn-rounded-padding-y) var(--wr-btn-rounded-padding-x);
+  }
+
+  &--small {
+    padding: var(--wr-btn-padding-y-small) var(--wr-btn-padding-x-small);
+    border-radius: var(--wr-btn-border-radius-small);
+    font-size: var(--wr-btn-font-size-small);
+    line-height: var(--wr-btn-line-height-small);
+
+    .wr-btn {
+      &__icon,
+      &__spin {
+        height: var(--wr-btn-font-size-small) !important;
+        width: var(--wr-btn-font-size-small) !important;;
+        min-height: var(--wr-btn-font-size-small) !important;;
+        min-width: var(--wr-btn-font-size-small) !important;;
+      }
+
+      &--icon-start {
+        .wr-btn__icon {
+          margin-right: 0.2rem !important;
+        }
+      }
+
+      &--icon-end {
+        .wr-btn__icon {
+          margin-left: 0.2rem !important;
+        }
+      }
+    }
+  }
+
+  &--full {
+    display: block;
+    width: 100%;
+  }
+}
+
+@each $color in $theme-colors {
+  .wr-btn--#{$color} {
+    color: var(--wr-color-#{$color}-contrast);
+    background-color: var(--wr-color-#{$color});
+
+    &:hover {
+      color: var(--wr-color-#{$color}-contrast);
+      background-color: var(--wr-color-#{$color}-shade);
+    }
+
+    &.wr-btn--outlined {
+      color: var(--wr-color-#{$color});
+      background-color: transparent;
+      box-shadow: inset 0 0 0 1.25px rgba(var(--wr-color-#{$color}-rgb), 0.375);
+
+      &:hover {
+        color: var(--wr-color-#{$color}-contrast);
+        background-color: var(--wr-color-#{$color});
+        box-shadow: none;
+      }
+    }
+  }
+}

package/button/index.d.ts

@@ -1,2 +1,2 @@
-export { WrButtonComponent } from './button.component';
-export { WrButtonModule } from './button.module';
+export { WrButton } from './button';
+export { WrButtonModule } from './button-module';

package/checkbox/{checkbox.module.d.ts → checkbox-module.d.ts}

@@ -1,10 +1,10 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./checkbox.component";
+import * as i1 from "./checkbox";
 import * as i2 from "@angular/common";
 import * as i3 from "@angular/forms";
 import * as i4 from "@angular/cdk/a11y";
 export declare class WrCheckboxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<WrCheckboxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<WrCheckboxModule, [typeof i1.WrCheckboxComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.A11yModule], [typeof i1.WrCheckboxComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<WrCheckboxModule, [typeof i1.WrCheckbox], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.A11yModule], [typeof i1.WrCheckbox]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<WrCheckboxModule>;
 }

package/checkbox/checkbox.d.ts

@@ -0,0 +1,49 @@
+import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { WrAbstractBase } from 'ngwr/core/abstract';
+import { OnChangeType, OnTouchedType, SafeAny } from 'ngwr/core/types';
+import * as i0 from "@angular/core";
+export declare class WrCheckbox extends WrAbstractBase implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
+    private readonly cdr;
+    private readonly elRef;
+    private readonly focusMonitor;
+    private readonly ngZone;
+    inputElement: HTMLInputElement;
+    get checked(): boolean;
+    set checked(value: BooleanInput);
+    private _checked;
+    /** Set autofocus for checkbox; */
+    get autofocus(): boolean;
+    set autofocus(value: BooleanInput);
+    private _autofocus;
+    /** Set disabled state of `wr-btn`; */
+    get disabled(): boolean;
+    set disabled(value: BooleanInput);
+    private _disabled;
+    get focused(): boolean;
+    set focused(value: BooleanInput);
+    private _focused;
+    private onChange;
+    private onTouched;
+    /** Set element classes */
+    get elClasses(): SafeAny;
+    constructor(cdr: ChangeDetectorRef, elRef: ElementRef<HTMLElement>, focusMonitor: FocusMonitor, ngZone: NgZone);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    focus(origin?: FocusOrigin, options?: FocusOptions): void;
+    writeValue(value: BooleanInput): void;
+    registerOnChange(fn: OnChangeType): void;
+    registerOnTouched(fn: OnTouchedType): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * A disabled checkbox shouldn't apply any actions
+     *
+     * @param event
+     */
+    private preventEventsWhenDisabled;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrCheckbox, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrCheckbox, "wr-checkbox", ["wrCheckbox"], { "autofocus": "autofocus"; "disabled": "disabled"; }, {}, never, ["*"], false>;
+}

package/checkbox/checkbox.scss

@@ -0,0 +1,103 @@
+.wr-checkbox {
+  display: inline-block;
+
+  &__container {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+
+    color: var(--wr-checkbox-color-base);
+    font-size: var(--wr-checkbox-font-size);
+    font-weight: var(--wr-checkbox-font-weight);
+    line-height: var(--wr-checkbox-line-height);
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  &-inner {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: var(--wr-checkbox-height);
+    width: var(--wr-checkbox-width);
+
+    margin-right: calc(var(--wr-checkbox-width) / 4);
+
+    border: 1px solid rgba(var(--wr-color-medium-rgb), 0.25);
+    border-radius: var(--wr-checkbox-border-radius);
+
+    transition: var(--wr-transition-base);
+
+    &__mark {
+      display: inline-block;
+      transform: rotate(45deg) translateX(-0.05rem) translateY(-0.05rem) scale(0.1);
+      opacity: 0;
+      height: calc(var(--wr-checkbox-height) / 2);
+      width: calc(var(--wr-checkbox-height) / 3);
+      border-bottom: 0.2rem solid var(--wr-color-white);
+      border-right: 0.2rem solid var(--wr-color-white);
+      transition: var(--wr-transition-short);
+    }
+  }
+
+  &:hover {
+    .wr-checkbox-inner {
+      border-color: var(--wr-color-primary);
+    }
+  }
+
+  &--checked {
+    .wr-checkbox-inner {
+      border-color: var(--wr-color-primary);
+      background: var(--wr-color-primary);
+
+      &__mark {
+        transform: rotate(45deg) translateX(-0.05rem) translateY(-0.05rem) scale(1);
+        opacity: 1;
+      }
+    }
+
+    &:hover {
+      .wr-checkbox-inner {
+        background: rgba(var(--wr-color-primary-rgb), 0.75);
+      }
+    }
+  }
+
+  &--focused {
+    .wr-checkbox-inner {
+      box-shadow: 0 0 0 1.5px rgba(var(--wr-color-primary-rgb), 0.25);
+    }
+  }
+
+  &[disabled],
+  &:disabled,
+  &.disabled {
+    pointer-events: none;
+
+    .wr-checkbox-inner {
+      border-color: rgba(var(--wr-color-medium-rgb), 0.25);
+      background: rgba(var(--wr-color-medium-rgb), 0.25);
+    }
+
+    &.wr-checkbox--checked {
+      .wr-checkbox-inner {
+        background: rgba(var(--wr-color-medium-rgb), 0.25);
+
+        &__mark {
+          border-bottom: 0.2rem solid rgba(var(--wr-color-medium-rgb), 0.75);
+          border-right: 0.2rem solid rgba(var(--wr-color-medium-rgb), 0.75);
+        }
+      }
+    }
+  }
+}

package/checkbox/index.d.ts

@@ -1,2 +1,2 @@
-export { WrCheckboxComponent } from './checkbox.component';
-export { WrCheckboxModule } from './checkbox.module';
+export { WrCheckbox } from './checkbox';
+export { WrCheckboxModule } from './checkbox-module';

package/core/abstract/base.d.ts

@@ -0,0 +1,9 @@
+import { OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare abstract class WrAbstractBase implements OnDestroy {
+    protected readonly destroyed$: Subject<void>;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrAbstractBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrAbstractBase, never, never, {}, {}, never, never, false>;
+}

package/core/abstract/index.d.ts

@@ -0,0 +1 @@
+export * from './base';

package/core/color/color.d.ts

@@ -0,0 +1,2 @@
+export declare const wrThemeColors: readonly ["primary", "secondary", "success", "warning", "danger", "light", "medium", "dark"];
+export declare type WrThemeColor = typeof wrThemeColors[number];

package/core/color/index.d.ts

@@ -0,0 +1,2 @@
+export * from './color';
+export * from './is-theme-color';

package/core/color/is-theme-color.d.ts

@@ -0,0 +1,2 @@
+import { WrThemeColor } from './color';
+export declare function isThemeColor(color: string): color is WrThemeColor;

package/core/decorators/index.d.ts

@@ -0,0 +1 @@
+export * from './input-boolean';

package/core/decorators/input-boolean.d.ts

@@ -0,0 +1 @@
+export declare function InputBoolean(): PropertyDecorator;

package/core/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './on-change-type';
+export * from './on-touched-type';
+export * from './safe-any';

package/divider/{divider.module.d.ts → divider-module.d.ts}

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./divider.component";
+import * as i1 from "./divider";
 export declare class WrDividerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<WrDividerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<WrDividerModule, [typeof i1.WrDividerComponent], never, [typeof i1.WrDividerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<WrDividerModule, [typeof i1.WrDivider], never, [typeof i1.WrDivider]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<WrDividerModule>;
 }

package/divider/divider.d.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { WrThemeColor } from 'ngwr/core/color';
+import { SafeAny } from 'ngwr/core/types';
+import * as i0 from "@angular/core";
+export declare class WrDivider {
+    private readonly cdr;
+    /**
+     * Set color of `wr-divider`
+     *
+     * @default 'light';
+     */
+    get color(): WrThemeColor;
+    set color(value: WrThemeColor);
+    private _color;
+    /**
+     * Set style of `wr-divider`
+     *
+     * @default `solid`;
+     */
+    get type(): 'solid' | 'dashed' | 'dotted';
+    set type(value: 'solid' | 'dashed' | 'dotted');
+    private _type;
+    /**
+     * Set width of `wr-divider`
+     *
+     * @default 1px;
+     */
+    get width(): string;
+    set width(value: string);
+    private _width;
+    /** Set element classes */
+    get elClasses(): SafeAny;
+    /** Set element style **/
+    get elStyles(): SafeAny;
+    /** Set element role **/
+    role: string;
+    constructor(cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrDivider, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrDivider, "wr-divider", ["wrDivider"], { "color": "color"; "type": "type"; "width": "width"; }, {}, never, never, false>;
+}

package/divider/divider.scss

@@ -0,0 +1,34 @@
+@import '../styles/vars';
+
+.wr-divider {
+  --wr-divider-width: 1px;
+
+  display: block;
+
+  width: 100%;
+  border-bottom-width: var(--wr-divider-width);
+
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+
+  user-select: none;
+  pointer-events: none;
+
+  &--solid {
+    border-bottom-style: solid;
+  }
+
+  &--dashed {
+    border-bottom-style: dashed;
+  }
+
+  &--dotted {
+    border-bottom-style: dotted;
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .wr-divider--#{$color} {
+    border-bottom-color: var(--wr-color-#{$color});
+  }
+}

package/divider/index.d.ts

@@ -1,2 +1,2 @@
-export { WrDividerModule } from './divider.module';
-export { WrDividerComponent } from './divider.component';
+export { WrDivider } from './divider';
+export { WrDividerModule } from './divider-module';