ngwr 0.1.3 → 0.2.0

package/icon/{wr-icons.d.ts → icons.d.ts}

@@ -66,10 +66,18 @@ export declare const wrIconBug: {
     name: 'bug';
     data: string;
 };
+export declare const wrIconCaretBackCircle: {
+    name: 'caret-back-circle';
+    data: string;
+};
 export declare const wrIconCaretBack: {
     name: 'caret-back';
     data: string;
 };
+export declare const wrIconCaretForwardCircle: {
+    name: 'caret-forward-circle';
+    data: string;
+};
 export declare const wrIconCaretForward: {
     name: 'caret-forward';
     data: string;
@@ -206,14 +214,26 @@ export declare const wrIconLogoAppscreener: {
     name: 'logo-appscreener';
     data: string;
 };
+export declare const wrIconLogoAppstore: {
+    name: 'logo-appstore';
+    data: string;
+};
 export declare const wrIconLogoGithub: {
     name: 'logo-github';
     data: string;
 };
+export declare const wrIconLogoGooglePlay: {
+    name: 'logo-google-play';
+    data: string;
+};
 export declare const wrIconLogoOversecured: {
     name: 'logo-oversecured';
     data: string;
 };
+export declare const wrIconLogoRustore: {
+    name: 'logo-rustore';
+    data: string;
+};
 export declare const wrIconLogoStingray: {
     name: 'logo-stingray';
     data: string;
@@ -222,6 +242,10 @@ export declare const wrIconModules: {
     name: 'modules';
     data: string;
 };
+export declare const wrIconMoon: {
+    name: 'moon';
+    data: string;
+};
 export declare const wrIconPlayBack: {
     name: 'play-back';
     data: string;
@@ -278,6 +302,14 @@ export declare const wrIconStop: {
     name: 'stop';
     data: string;
 };
+export declare const wrIconSun: {
+    name: 'sun';
+    data: string;
+};
+export declare const wrIconTerminal: {
+    name: 'terminal';
+    data: string;
+};
 export declare const wrIconTrash: {
     name: 'trash';
     data: string;
@@ -302,12 +334,12 @@ export declare const wrIconWarning: {
     name: 'warning';
     data: string;
 };
-export declare type wrIconName = 'add-circle-outline' | 'add-circle' | 'add' | 'alert-circle-outline' | 'alert-circle' | 'alert-squircle' | 'alert' | 'arrow-back-circle' | 'arrow-back' | 'arrow-bottom-circle' | 'arrow-bottom' | 'arrow-forward-circle' | 'arrow-forward' | 'arrow-top-circle' | 'arrow-top' | 'bug-outline' | 'bug' | 'caret-back' | 'caret-forward' | 'checkmark-circle-outline' | 'checkmark-circle' | 'checkmark' | 'chevron-down' | 'chevron-up' | 'clock' | 'close-circle' | 'cog' | 'copy-outline' | 'copy' | 'discover' | 'document' | 'dots-horizontal' | 'dots-vertical' | 'download' | 'eye-off' | 'eye' | 'file-aab' | 'file-apk' | 'file-ipa' | 'file-zip' | 'filter-outline' | 'filter' | 'flash' | 'folder' | 'help' | 'home' | 'info-circle-outline' | 'lock-opened' | 'lock' | 'logo-android' | 'logo-apple' | 'logo-appscreener' | 'logo-github' | 'logo-oversecured' | 'logo-stingray' | 'modules' | 'play-back' | 'play-circle' | 'play-forward' | 'play' | 'plus-circle' | 'reader' | 'repeat' | 'search' | 'shield-checkmark-outline' | 'shield-checkmark' | 'shield-outline' | 'shield' | 'stop-circle' | 'stop' | 'trash' | 'user-add' | 'user-circle' | 'user-remove' | 'user' | 'warning';
-export interface WrIcon {
+export declare type wrIconName = 'add-circle-outline' | 'add-circle' | 'add' | 'alert-circle-outline' | 'alert-circle' | 'alert-squircle' | 'alert' | 'arrow-back-circle' | 'arrow-back' | 'arrow-bottom-circle' | 'arrow-bottom' | 'arrow-forward-circle' | 'arrow-forward' | 'arrow-top-circle' | 'arrow-top' | 'bug-outline' | 'bug' | 'caret-back-circle' | 'caret-back' | 'caret-forward-circle' | 'caret-forward' | 'checkmark-circle-outline' | 'checkmark-circle' | 'checkmark' | 'chevron-down' | 'chevron-up' | 'clock' | 'close-circle' | 'cog' | 'copy-outline' | 'copy' | 'discover' | 'document' | 'dots-horizontal' | 'dots-vertical' | 'download' | 'eye-off' | 'eye' | 'file-aab' | 'file-apk' | 'file-ipa' | 'file-zip' | 'filter-outline' | 'filter' | 'flash' | 'folder' | 'help' | 'home' | 'info-circle-outline' | 'lock-opened' | 'lock' | 'logo-android' | 'logo-apple' | 'logo-appscreener' | 'logo-appstore' | 'logo-github' | 'logo-google-play' | 'logo-oversecured' | 'logo-rustore' | 'logo-stingray' | 'modules' | 'moon' | 'play-back' | 'play-circle' | 'play-forward' | 'play' | 'plus-circle' | 'reader' | 'repeat' | 'search' | 'shield-checkmark-outline' | 'shield-checkmark' | 'shield-outline' | 'shield' | 'stop-circle' | 'stop' | 'sun' | 'terminal' | 'trash' | 'user-add' | 'user-circle' | 'user-remove' | 'user' | 'warning';
+export interface IWrIcon {
     name: wrIconName;
     data: string;
 }
-export declare type WrIconNameSubset<T extends Readonly<WrIcon[]>> = T[number]['name'];
+export declare type IWrIconNameSubset<T extends Readonly<IWrIcon[]>> = T[number]['name'];
 export declare const wrIconSet: ({
     name: 'add-circle-outline';
     data: string;
@@ -359,9 +391,15 @@ export declare const wrIconSet: ({
 } | {
     name: 'bug';
     data: string;
+} | {
+    name: 'caret-back-circle';
+    data: string;
 } | {
     name: 'caret-back';
     data: string;
+} | {
+    name: 'caret-forward-circle';
+    data: string;
 } | {
     name: 'caret-forward';
     data: string;
@@ -464,18 +502,30 @@ export declare const wrIconSet: ({
 } | {
     name: 'logo-appscreener';
     data: string;
+} | {
+    name: 'logo-appstore';
+    data: string;
 } | {
     name: 'logo-github';
     data: string;
+} | {
+    name: 'logo-google-play';
+    data: string;
 } | {
     name: 'logo-oversecured';
     data: string;
+} | {
+    name: 'logo-rustore';
+    data: string;
 } | {
     name: 'logo-stingray';
     data: string;
 } | {
     name: 'modules';
     data: string;
+} | {
+    name: 'moon';
+    data: string;
 } | {
     name: 'play-back';
     data: string;
@@ -518,6 +568,12 @@ export declare const wrIconSet: ({
 } | {
     name: 'stop';
     data: string;
+} | {
+    name: 'sun';
+    data: string;
+} | {
+    name: 'terminal';
+    data: string;
 } | {
     name: 'trash';
     data: string;

package/icon/index.d.ts

@@ -1,4 +1,4 @@
-export { WrIconService } from './wr-icon.service';
-export { wrIconName, wrIconSet } from './wr-icons';
-export { WrIconComponent } from './wr-icon.component';
-export { WrIconModule } from './wr-icon.module';
+export { WrIcon } from './icon';
+export { WrIconModule } from './icon-module';
+export { WrIconService } from './icon-service';
+export { IWrIcon, wrIconName, wrIconSet } from './icons';

package/index.d.ts

@@ -1,5 +1,2 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="ngwr" />
-export * from './public-api';
+declare const _default: undefined;
+export default _default;

package/input/index.d.ts

@@ -1,2 +1,2 @@
-export { WrInputComponent } from './input.component';
-export { WrInputModule } from './input.module';
+export { WrInput } from './input';
+export { WrInputModule } from './input-module';

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

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

package/{_core/types/input-autocomplete-type.d.ts → input/input-types.d.ts}

@@ -1 +1,3 @@
 export declare type WrInputAutocomplete = 'off' | 'name' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-extension' | 'url' | 'photo';
+export declare type WrInputModeType = 'text' | 'numeric' | 'tel' | 'email' | 'url';
+export declare type WrInputType = 'text' | 'number' | 'password' | 'email';

package/input/{input.component.d.ts → input.d.ts}

@@ -1,9 +1,12 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
+import { BooleanInput } from '@angular/cdk/coercion';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
-import { BaseComponent, BooleanInput, OnChangeType, OnTouchedType, SafeAny, WrInputAutocomplete, WrInputModeType, WrInputType } from '../_core';
+import { WrAbstractBase } from 'ngwr/core/abstract';
+import { OnChangeType, OnTouchedType, SafeAny } from 'ngwr/core/types';
+import { WrInputAutocomplete, WrInputModeType, WrInputType } from './input-types';
 import * as i0 from "@angular/core";
-export declare class WrInputComponent extends BaseComponent implements ControlValueAccessor, AfterViewInit, OnInit, OnDestroy, Validator {
+export declare class WrInput extends WrAbstractBase implements ControlValueAccessor, AfterViewInit, OnInit, OnDestroy, Validator {
     private readonly cdr;
     private readonly elRef;
     private readonly focusMonitor;
@@ -57,6 +60,6 @@ export declare class WrInputComponent extends BaseComponent implements ControlVa
     registerOnTouched(fn: OnTouchedType): void;
     onPasswordVisibilityChange(): void;
     setDisabledState(isDisabled: boolean): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<WrInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WrInputComponent, "wr-input", ["wrInput"], { "placeholder": "placeholder"; "prefix": "prefix"; "suffix": "suffix"; "passwordIcons": "passwordIcons"; "type": "type"; "inputmode": "inputmode"; "disabled": "disabled"; "readonly": "readonly"; "required": "required"; "autofocus": "autofocus"; "autocomplete": "autocomplete"; "value": "value"; }, {}, never, never, false>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrInput, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrInput, "wr-input", ["wrInput"], { "placeholder": "placeholder"; "prefix": "prefix"; "suffix": "suffix"; "passwordIcons": "passwordIcons"; "type": "type"; "inputmode": "inputmode"; "disabled": "disabled"; "readonly": "readonly"; "required": "required"; "autofocus": "autofocus"; "autocomplete": "autocomplete"; "value": "value"; }, {}, never, never, false>;
 }

package/input/input.scss

@@ -0,0 +1,163 @@
+.wr-input {
+  --input-icon-size: 1rem;
+
+  display: flex;
+  align-items: stretch;
+  flex-wrap: nowrap;
+
+  position: relative;
+
+  background: var(--wr-input-bg);
+  border-radius: var(--wr-input-border-radius-base);
+
+  padding: 0;
+  margin: 0;
+
+  &--fullwidth {
+    width: 100%;
+  }
+
+  &--disabled {
+    pointer-events: none;
+  }
+
+  &--password {
+    .wr-input-el__native {
+      padding-right: calc(var(--input-icon-size) + calc(var(--wr-input-padding-x-base) * 2));
+    }
+  }
+
+  &--has-prefix {
+    .wr-input-el__native {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  &--has-suffix {
+    .wr-input-el__native {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  &-prefix,
+  &-suffix {
+    display: flex;
+    border: 1px solid var(--wr-input-border-color);
+    background: var(--wr-input-suffix-prefix-bg);
+
+    color: var(--wr-input-suffix-prefix-color);
+    font-size: var(--wr-input-font-size-base);
+    font-weight: var(--wr-input-font-weight-base);
+    line-height: var(--wr-input-line-height-base);
+
+    padding: var(--wr-input-padding-y-base) var(--wr-input-padding-x-base);
+    margin: 0;
+    max-width: 30%;
+
+    &__text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &-prefix {
+    border-top-left-radius: var(--wr-input-border-radius-base);
+    border-bottom-left-radius: var(--wr-input-border-radius-base);
+    border-right: 0;
+  }
+
+  &-suffix {
+    border-top-right-radius: var(--wr-input-border-radius-base);
+    border-bottom-right-radius: var(--wr-input-border-radius-base);
+    border-left: 0;
+  }
+
+  &-el {
+    display: flex;
+    align-items: center;
+
+    height: 100%;
+    flex: 1;
+
+    position: relative;
+
+    margin: 0;
+    padding: 0;
+
+    &-icon {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      width: calc(calc(var(--wr-input-padding-x-base) * 2) + var(--input-icon-size));
+      height: 100%;
+
+      position: absolute;
+      z-index: 3;
+      right: 0;
+      top: 0;
+
+      color: var(--wr-color-medium);
+      cursor: pointer;
+
+      &__icon {
+        width: var(--input-icon-size);
+        height: var(--input-icon-size);
+        transition: var(--wr-transition-base);
+      }
+
+      &:hover {
+        color: var(--wr-color-secondary);
+      }
+    }
+
+    &__native {
+      display: inline-block;
+
+      appearance: none;
+      background: transparent;
+      border: 1px solid var(--wr-input-border-color);
+      border-radius: var(--wr-input-border-radius-base);
+      box-shadow: none;
+
+      color: var(--wr-input-color);
+      font-family: var(--wr-font-family-base);
+      font-size: var(--wr-input-font-size-base);
+      font-weight: var(--wr-input-font-weight-base);
+      line-height: var(--wr-input-line-height-base);
+      resize: none;
+
+      width: 100%;
+
+      padding: var(--wr-input-padding-y-base) var(--wr-input-padding-x-base);
+
+      position: relative;
+      z-index: 2;
+
+      transition: var(--wr-transition-base);
+
+      &::placeholder {
+        color: rgba(var(--wr-color-medium-rgb), 0.5);
+        font-style: italic;
+      }
+
+      &[disabled],
+      &:disabled,
+      &.disabled {
+        color: var(--wr-input-disabled-color);
+        border-color: var(--wr-input-disabled-border-color);
+        background: var(--wr-input-disabled-bg);
+      }
+
+      &:active,
+      &:focus {
+        border-color: var(--wr-color-primary);
+        box-shadow: 0 0 0 2px rgba(var(--wr-color-primary-rgb), 0.125);
+      }
+    }
+  }
+}

package/logo.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 846.5 1000" style="enable-background:new 0 0 846.5 1000" xml:space="preserve"><path d="M423.2 0C189.5 0 0 109.6 0 377.3S154.4 1000 423.2 1000s423.2-355.1 423.2-622.7S657 0 423.2 0zm-95.4 517.6c-8.8 91-13.6 201.5-8 289.5.9 13.8-17.8 19-24.1 6.6-32.8-64.9-62.7-151.7-78.8-242.8-2.7-15.1 4.9-30.1 18.6-36.8 22.3-11 43.7-23.8 60.3-33.2 1.1-.6 2.1-1.2 3.2-1.8 13.7-7.8 30.3 2.9 28.8 18.5zm301.7 54.2c-16.1 91.1-46 177.9-78.8 242.8-6.2 12.4-24.9 7.2-24.1-6.6 5.5-88.1.7-198.6-8-289.5-1.5-15.6 15.2-26.3 28.8-18.5 1.1.6 2.1 1.2 3.2 1.8 16.6 9.4 38 22.2 60.3 33.2 13.7 6.7 21.3 21.7 18.6 36.8zm-78.9-136c-41.2-23.4-78.1-51.3-127.4-51.3s-86.1 28-127.4 51.3C225.6 475.6 69 576.7 124.1 338.1c26.5-114.7 96.7-162.9 162.4-182 18.2-5.3 37.9.4 50.4 14.6 18.6 21.3 53.3 38.7 86.3 38.7s67.6-17.5 86.3-38.7c12.5-14.2 32.3-19.9 50.4-14.6 65.7 19.1 135.9 67.3 162.4 182 55.2 238.6-101.4 137.5-171.7 97.7z" style="fill:#3969e2"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3195.1 996.4">
+  <path d="M421.7 0C188.8 0 0 109.2 0 375.9s153.8 620.4 421.7 620.4 421.7-353.8 421.7-620.4S654.6 0 421.7 0z" style="fill:#3969E2"/>
+  <path d="M1346.9 243.7c29.6 0 56.7 4.9 81.2 14.6s45.7 23.8 63.4 42.2c17.7 18.4 31.4 40.6 41.2 66.6 9.7 26 14.6 55.2 14.6 87.7v292.4h-124.5V471.1c0-32.5-9.6-58.7-28.7-78.5-19.1-19.8-43.9-29.8-74.2-29.8-30.3 0-55.1 9.9-74.2 29.8s-28.7 46-28.7 78.5v276.2h-124.5V249.1h92.1l21.7 48.7c12.3-10.1 25.6-19.1 40.1-27.1 12.3-6.5 26.9-12.6 43.9-18.4 16.7-5.7 35.7-8.6 56.6-8.6zM1846.1 243.7c21.7 0 41.2 2.9 58.5 8.7 17.3 5.8 32.1 11.9 44.4 18.4 13.7 8 26.3 17 37.9 27.1l21.7-48.7h92.1v465.7c0 65-20.8 117.3-62.3 157s-100.2 59.6-176 59.6c-46.2 0-83.6-8.3-112.1-24.9-28.5-16.6-51.1-35.4-67.7-56.3-18.8-23.8-32.9-50.9-42.2-81.2h124.5c5 9.4 11.9 17.7 20.6 24.9 7.9 5.8 18 11.2 30.3 16.2s27.8 7.6 46.6 7.6c35.4 0 63.2-9.6 83.4-28.7 20.2-19.1 30.3-43.9 30.3-74.2V677c-10.1 10.1-21.7 19.1-34.7 27.1-11.6 7.2-25.3 13.5-41.2 19-15.9 5.4-33.9 8.1-54.2 8.1-31.1 0-60.5-6.1-88.3-18.4-27.8-12.3-52-29.2-72.6-50.9s-36.8-47.3-48.7-76.9c-11.9-29.6-17.9-62.1-17.9-97.5s6-67.9 17.9-97.5c11.9-29.6 28.2-55.2 48.7-76.9 20.6-21.7 44.8-38.6 72.6-50.9 27.9-12.4 57.3-18.5 88.4-18.5zm-102.9 243.7c0 17.3 3.1 33.6 9.2 48.7 6.1 15.2 14.6 28.3 25.5 39.5 10.8 11.2 23.5 20 37.9 26.5 14.4 6.5 30 9.7 46.6 9.7 15.9 0 31-3.2 45.5-9.7 14.4-6.5 27.1-15.3 37.9-26.5 10.8-11.2 19.5-24.4 26-39.5 6.5-15.2 9.7-31.4 9.7-48.7 0-17.3-3.2-33.6-9.7-48.7-6.5-15.2-15.2-28.3-26-39.5s-23.5-20-37.9-26.5c-14.5-6.5-29.6-9.7-45.5-9.7-16.6 0-32.1 3.2-46.6 9.7-14.5 6.5-27.1 15.3-37.9 26.5-10.8 11.2-19.3 24.4-25.5 39.5-6.1 15.1-9.2 31.3-9.2 48.7zM2512.8 449.5l-92.1 297.8h-108.3L2150 249.1h124.5l97.5 319.5 102.9-319.5h75.8l102.9 319.5 97.5-319.5h124.5l-162.5 498.2h-108.3l-92-297.8zM3157.2 243.7c5.8 0 10.8.4 15.2 1.1 4.3.7 8.3 1.5 11.9 2.2 3.6.7 7.2 1.5 10.8 2.2v130c-3.6-.7-7.6-1.4-11.9-2.2-3.6-.7-8.1-1.4-13.5-2.2-5.4-.7-11.4-1.1-17.9-1.1-30.3 0-55.1 9.9-74.2 29.8s-28.7 46-28.7 78.5v265.3h-124.5V249.1h92.1l21.7 54.2c8.7-10.8 19.1-20.6 31.4-29.2 10.1-7.9 22.6-15 37.4-21.1 14.6-6.2 31.4-9.3 50.2-9.3z" style="fill:#19243A" />
+  <path d="M326.6 515.7c-8.8 90.7-13.6 200.8-8 288.5.9 13.7-17.7 18.9-24 6.6-32.7-64.7-62.5-151.1-78.5-241.9-2.7-15 4.9-30 18.5-36.7 22.2-11 43.5-23.7 60.1-33.1 1.1-.6 2.1-1.2 3.2-1.8 13.7-7.8 30.2 2.9 28.7 18.4zM627.2 569.7c-16 90.8-45.8 177.3-78.5 241.9-6.2 12.4-24.8 7.2-24-6.6 5.5-87.8.7-197.9-8-288.5-1.5-15.5 15.1-26.2 28.7-18.4 1.1.6 2.1 1.2 3.2 1.8 16.5 9.4 37.9 22.1 60.1 33.1 13.6 6.7 21.2 21.7 18.5 36.7z" style="fill:#FFFFFF" />
+  <path d="M548.6 434.2c-41.1-23.3-77.8-51.1-126.9-51.1s-85.8 27.9-126.9 51.1c-69.9 39.7-226 140.4-171.1-97.3 26.4-114.3 96.3-162.3 161.8-181.3 18.1-5.3 37.8.4 50.2 14.5 18.5 21.2 53.1 38.6 86 38.6s67.4-17.4 86-38.6c12.5-14.1 32.2-19.8 50.2-14.5 65.5 19 135.4 67.1 161.8 181.3 55 237.7-101.1 137-171.1 97.3z"  style="fill:#FFFFFF"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "license": "MIT",
   "description": "NGWR – Angular UI components library",
   "author": "Roman Khegay <rk@garuna.dev> (https://garuna.dev/)",
@@ -20,15 +20,133 @@
   "bugs": {
     "url": "https://github.com/thekhegay/ngwr/issues"
   },
+  "exports": {
+    ".": {
+      "sass": "./_index.scss",
+      "types": "./index.d.ts",
+      "esm2020": "./esm2020/ngwr.mjs",
+      "es2020": "./fesm2020/ngwr.mjs",
+      "es2015": "./fesm2015/ngwr.mjs",
+      "node": "./fesm2015/ngwr.mjs",
+      "default": "./fesm2020/ngwr.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    "./button": {
+      "types": "./button/index.d.ts",
+      "esm2020": "./esm2020/button/ngwr-button.mjs",
+      "es2020": "./fesm2020/ngwr-button.mjs",
+      "es2015": "./fesm2015/ngwr-button.mjs",
+      "node": "./fesm2015/ngwr-button.mjs",
+      "default": "./fesm2020/ngwr-button.mjs"
+    },
+    "./checkbox": {
+      "types": "./checkbox/index.d.ts",
+      "esm2020": "./esm2020/checkbox/ngwr-checkbox.mjs",
+      "es2020": "./fesm2020/ngwr-checkbox.mjs",
+      "es2015": "./fesm2015/ngwr-checkbox.mjs",
+      "node": "./fesm2015/ngwr-checkbox.mjs",
+      "default": "./fesm2020/ngwr-checkbox.mjs"
+    },
+    "./core/abstract": {
+      "types": "./core/abstract/index.d.ts",
+      "esm2020": "./esm2020/core/abstract/ngwr-core-abstract.mjs",
+      "es2020": "./fesm2020/ngwr-core-abstract.mjs",
+      "es2015": "./fesm2015/ngwr-core-abstract.mjs",
+      "node": "./fesm2015/ngwr-core-abstract.mjs",
+      "default": "./fesm2020/ngwr-core-abstract.mjs"
+    },
+    "./core/color": {
+      "types": "./core/color/index.d.ts",
+      "esm2020": "./esm2020/core/color/ngwr-core-color.mjs",
+      "es2020": "./fesm2020/ngwr-core-color.mjs",
+      "es2015": "./fesm2015/ngwr-core-color.mjs",
+      "node": "./fesm2015/ngwr-core-color.mjs",
+      "default": "./fesm2020/ngwr-core-color.mjs"
+    },
+    "./core/decorators": {
+      "types": "./core/decorators/index.d.ts",
+      "esm2020": "./esm2020/core/decorators/ngwr-core-decorators.mjs",
+      "es2020": "./fesm2020/ngwr-core-decorators.mjs",
+      "es2015": "./fesm2015/ngwr-core-decorators.mjs",
+      "node": "./fesm2015/ngwr-core-decorators.mjs",
+      "default": "./fesm2020/ngwr-core-decorators.mjs"
+    },
+    "./core/types": {
+      "types": "./core/types/index.d.ts",
+      "esm2020": "./esm2020/core/types/ngwr-core-types.mjs",
+      "es2020": "./fesm2020/ngwr-core-types.mjs",
+      "es2015": "./fesm2015/ngwr-core-types.mjs",
+      "node": "./fesm2015/ngwr-core-types.mjs",
+      "default": "./fesm2020/ngwr-core-types.mjs"
+    },
+    "./divider": {
+      "types": "./divider/index.d.ts",
+      "esm2020": "./esm2020/divider/ngwr-divider.mjs",
+      "es2020": "./fesm2020/ngwr-divider.mjs",
+      "es2015": "./fesm2015/ngwr-divider.mjs",
+      "node": "./fesm2015/ngwr-divider.mjs",
+      "default": "./fesm2020/ngwr-divider.mjs"
+    },
+    "./form": {
+      "types": "./form/index.d.ts",
+      "esm2020": "./esm2020/form/ngwr-form.mjs",
+      "es2020": "./fesm2020/ngwr-form.mjs",
+      "es2015": "./fesm2015/ngwr-form.mjs",
+      "node": "./fesm2015/ngwr-form.mjs",
+      "default": "./fesm2020/ngwr-form.mjs"
+    },
+    "./icon": {
+      "types": "./icon/index.d.ts",
+      "esm2020": "./esm2020/icon/ngwr-icon.mjs",
+      "es2020": "./fesm2020/ngwr-icon.mjs",
+      "es2015": "./fesm2015/ngwr-icon.mjs",
+      "node": "./fesm2015/ngwr-icon.mjs",
+      "default": "./fesm2020/ngwr-icon.mjs"
+    },
+    "./input": {
+      "types": "./input/index.d.ts",
+      "esm2020": "./esm2020/input/ngwr-input.mjs",
+      "es2020": "./fesm2020/ngwr-input.mjs",
+      "es2015": "./fesm2015/ngwr-input.mjs",
+      "node": "./fesm2015/ngwr-input.mjs",
+      "default": "./fesm2020/ngwr-input.mjs"
+    },
+    "./skeleton": {
+      "types": "./skeleton/index.d.ts",
+      "esm2020": "./esm2020/skeleton/ngwr-skeleton.mjs",
+      "es2020": "./fesm2020/ngwr-skeleton.mjs",
+      "es2015": "./fesm2015/ngwr-skeleton.mjs",
+      "node": "./fesm2015/ngwr-skeleton.mjs",
+      "default": "./fesm2020/ngwr-skeleton.mjs"
+    },
+    "./spinner": {
+      "types": "./spinner/index.d.ts",
+      "esm2020": "./esm2020/spinner/ngwr-spinner.mjs",
+      "es2020": "./fesm2020/ngwr-spinner.mjs",
+      "es2015": "./fesm2015/ngwr-spinner.mjs",
+      "node": "./fesm2015/ngwr-spinner.mjs",
+      "default": "./fesm2020/ngwr-spinner.mjs"
+    },
+    "./tag": {
+      "types": "./tag/index.d.ts",
+      "esm2020": "./esm2020/tag/ngwr-tag.mjs",
+      "es2020": "./fesm2020/ngwr-tag.mjs",
+      "es2015": "./fesm2015/ngwr-tag.mjs",
+      "node": "./fesm2015/ngwr-tag.mjs",
+      "default": "./fesm2020/ngwr-tag.mjs"
+    }
+  },
   "dependencies": {
-    "@angular/cdk": "^14.1.3",
+    "@angular/cdk": "^14.0.0",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/common": ">=14.1.0 <=14.2.8",
-    "@angular/core": ">=14.1.0 <=14.2.8",
-    "@angular/forms": ">=14.1.0 <=14.2.8",
-    "rxjs": "~7.5.0"
+    "@angular/common": ">=14.0.0 <15.0.0",
+    "@angular/core": ">=14.0.0 <15.0.0",
+    "@angular/forms": ">=14.0.0 <15.0.0",
+    "rxjs": ">=6.5.5 < 7.6.0"
   },
   "module": "fesm2015/ngwr.mjs",
   "es2020": "fesm2020/ngwr.mjs",
@@ -36,18 +154,5 @@
   "fesm2020": "fesm2020/ngwr.mjs",
   "fesm2015": "fesm2015/ngwr.mjs",
   "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/ngwr.mjs",
-      "es2020": "./fesm2020/ngwr.mjs",
-      "es2015": "./fesm2015/ngwr.mjs",
-      "node": "./fesm2015/ngwr.mjs",
-      "default": "./fesm2020/ngwr.mjs"
-    }
-  },
   "sideEffects": false
 }

package/skeleton/index.d.ts

@@ -1,2 +1,2 @@
-export { WrSkeletonComponent } from './skeleton.component';
-export { WrSkeletonModule } from './skeleton.module';
+export { WrSkeleton } from './skeleton';
+export { WrSkeletonModule } from './skeleton-module';

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

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./skeleton.component";
+import * as i1 from "./skeleton";
 import * as i2 from "@angular/common";
 export declare class WrSkeletonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<WrSkeletonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<WrSkeletonModule, [typeof i1.WrSkeletonComponent], [typeof i2.CommonModule], [typeof i1.WrSkeletonComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<WrSkeletonModule, [typeof i1.WrSkeleton], [typeof i2.CommonModule], [typeof i1.WrSkeleton]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<WrSkeletonModule>;
 }

package/skeleton/skeleton.d.ts

@@ -0,0 +1,11 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { WrThemeColor } from 'ngwr/core/color';
+import { SafeAny } from 'ngwr/core/types';
+import * as i0 from "@angular/core";
+export declare class WrSkeleton {
+    color: WrThemeColor;
+    animated: BooleanInput;
+    get elClasses(): SafeAny;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrSkeleton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrSkeleton, "wr-skeleton", ["wrSkeleton"], { "color": "color"; "animated": "animated"; }, {}, never, never, false>;
+}

package/skeleton/skeleton.scss

@@ -0,0 +1,54 @@
+@import '../styles/vars';
+
+$skeleton-prefix: wr-skeleton;
+
+.wr-skeleton {
+  display: block;
+
+  width: 100%;
+
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+
+  height: var(--wr-font-size-base);
+  border-radius: var(--wr-border-radius-base);
+
+  position: relative;
+  overflow: hidden;
+
+  user-select: none;
+  pointer-events: none;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    animation: none;
+  }
+
+  &--animated {
+    &:after {
+      animation: shimmer 2s infinite;
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .wr-skeleton--#{$color} {
+    background: rgba(var(--wr-color-#{$color}-rgb), 0.125);
+
+    &:after {
+      background-image: linear-gradient(
+          90deg,
+          rgba(var(--wr-color-#{$color}-rgb), 0) 0,
+          rgba(var(--wr-color-#{$color}-rgb), 0.125) 20%,
+          rgba(var(--wr-color-#{$color}-rgb), 0.25) 60%,
+          rgba(var(--wr-color-#{$color}-rgb), 0)
+      );
+    }
+  }
+}

package/spinner/index.d.ts

@@ -1,2 +1,2 @@
-export { WrSpinnerComponent } from './spinner.component';
-export { WrSpinnerModule } from './spinner.module';
+export { WrSpinner } from './spinner';
+export { WrSpinnerModule } from './spinner-module';

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

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