ngwr 3.0.0 → 4.0.1

package/README.md

@@ -1,10 +1,12 @@
-# <img src="projects/showcase/src/assets/images/logo.svg" alt="ngwr logo" height="32px">
+# <img src="https://ngwr.dev/assets/images/logo.svg" alt="ngwr logo" height="32px">
 
 [![ngwr deploy](https://img.shields.io/github/actions/workflow/status/thekhegay/ngwr/deploy.yml)](https://github.com/thekhegay/ngwr/actions/workflows/deploy.yml)
 [![ngwr version](https://img.shields.io/github/package-json/v/thekhegay/ngwr?filename=projects%2Flib%2Fpackage.json&color=%23f51c6a)](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)
 [![license](https://img.shields.io/npm/l/ngwr)](https://github.com/thekhegay/ngwr/blob/main/LICENSE)
 
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fthekhegay%2Fngwr.svg?type=large&issueType=license)](https://app.fossa.com/projects/git%2Bgithub.com%2Fthekhegay%2Fngwr?ref=badge_large&issueType=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).
 
@@ -12,7 +14,9 @@ NGWR is currently in development stage. All components are updating every week.
 
 ```shell
 $ npm install ngwr
-# or yarn users
+# or
+$ pnpm add ngwr
+# or
 $ yarn add ngwr
 ```
 
@@ -25,21 +29,20 @@ Don't forget to add styles:
 
 ## [Components](https://ngwr.dev/docs/components)
 
+- [Alert](https://ngwr.dev/docs/components/alert)
+- [Avatar](https://ngwr.dev/docs/components/avatar)
 - [Button](https://ngwr.dev/docs/components/button)
+- [Button Group](https://ngwr.dev/docs/components/button-group)
 - [Checkbox](https://ngwr.dev/docs/components/checkbox)
 - [Dialog](https://ngwr.dev/docs/components/dialog)
 - [Divider](https://ngwr.dev/docs/components/divider)
 - [Form](https://ngwr.dev/docs/components/form)
 - [Icon](https://ngwr.dev/docs/components/icon)
 - [Input](https://ngwr.dev/docs/components/input)
-- [QRCode](https://ngwr.dev/docs/components/qrcode)
+- [QR](https://ngwr.dev/docs/components/qr)
 - [Skeleton](https://ngwr.dev/docs/components/skeleton)
 - [Spinner](https://ngwr.dev/docs/components/spinner)
 - [Tag](https://ngwr.dev/docs/components/tag)
-- [Tooltip](https://ngwr.dev/docs/components/tooltip)
-
-- [Colors](https://ngwr.dev/docs/core/colors)
-- [Grid](https://ngwr.dev/docs/core/grid)
 
 ## Authors
 - [Roman Khegay](https://github.com/thekhegay) – code, design

package/alert/alert-type.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+export type WrAlertType = 'info' | 'success' | 'warning' | 'danger';

package/alert/alert.component.d.ts

@@ -0,0 +1,21 @@
+import { SafeAny } from 'ngwr/cdk/types';
+import { WrAlertType } from './alert-type';
+import * as i0 from "@angular/core";
+/**
+ * NGWR alert component.
+ * Closeable component for feedback.
+ *
+ * {@tutorial} [How to use wr-alert]{@link http://ngwr.dev/docs/components/alert}
+ */
+export declare class WrAlertComponent {
+    title: string;
+    message?: string;
+    type: WrAlertType;
+    closeable: boolean;
+    protected readonly isClosed: import("@angular/core").WritableSignal<boolean>;
+    get elClasses(): SafeAny;
+    onClose(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrAlertComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrAlertComponent, "wr-alert", never, { "title": { "alias": "title"; "required": true; }; "message": { "alias": "message"; "required": false; }; "type": { "alias": "type"; "required": false; }; "closeable": { "alias": "closeable"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_closeable: unknown;
+}

package/alert/alert.module.d.ts

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

package/alert/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ngwr/alert" />
+export * from './public-api';

package/alert/public-api.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+export * from './alert-type';
+export * from './alert.component';
+export * from './alert.module';

package/alert/styles/_index.scss

@@ -0,0 +1,58 @@
+@forward './vars';
+@forward './theming';
+
+@forward '../../icon/styles';
+
+.wr-alert {
+  width: 100%;
+
+  &__wrapper {
+    display: flex;
+    align-items: stretch;
+    gap: 1rem;
+
+    background-color: var(--wr-alert-bg-color);
+    border-radius: var(--wr-alert-border-radius);
+    border-left: 0.25rem solid var(--wr-alert-border-color);
+    padding: var(--wr-alert-padding-y) var(--wr-alert-padding-x);
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    flex: 1;
+  }
+
+  &__title {
+    color: var(--wr-alert-title-color);
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.5rem;
+  }
+
+  &__message {
+    color: var(--wr-alert-message-color);
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1rem;
+  }
+
+  &-close {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    min-width: 2rem;
+
+    color: var(--wr-alert-close-color);
+    transition: var(--wr-transition-base);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--wr-alert-close-color-hover);
+    }
+  }
+}

package/alert/styles/theming.scss

@@ -0,0 +1,26 @@
+.wr-alert {
+  &--success {
+    --wr-alert-title-color: var(--wr-color-success-darker);
+    --wr-alert-message-color: var(--wr-color-success-darker);
+    --wr-alert-bg-color: rgba(var(--wr-color-success-rgb), 0.125);
+    --wr-alert-border-color: rgba(var(--wr-color-success-rgb), 0.5);
+    --wr-alert-close-color: rgba(var(--wr-color-success-rgb), 0.5);
+    --wr-alert-close-color-hover: var(--wr-color-success);
+  }
+
+  &--warning {
+    --wr-alert-title-color: var(--wr-color-warning-darker);
+    --wr-alert-bg-color: rgba(var(--wr-color-warning-rgb), 0.125);
+    --wr-alert-border-color: rgba(var(--wr-color-warning-rgb), 0.5);
+    --wr-alert-close-color: rgba(var(--wr-color-warning-rgb), 0.5);
+    --wr-alert-close-color-hover: var(--wr-color-warning);
+  }
+
+  &--danger {
+    --wr-alert-title-color: var(--wr-color-danger-darker);
+    --wr-alert-bg-color: rgba(var(--wr-color-danger-rgb), 0.125);
+    --wr-alert-border-color: rgba(var(--wr-color-danger-rgb), 0.5);
+    --wr-alert-close-color: rgba(var(--wr-color-danger-rgb), 0.5);
+    --wr-alert-close-color-hover: var(--wr-color-danger);
+  }
+}

package/alert/styles/vars.scss

@@ -0,0 +1,11 @@
+:root {
+  --wr-alert-title-color: var(--wr-color-primary-darker);
+  --wr-alert-message-color: rgba(var(--wr-color-dark-rgb), 0.5);
+  --wr-alert-bg-color: rgba(var(--wr-color-primary-rgb), 0.125);
+  --wr-alert-border-color: rgba(var(--wr-color-primary-rgb), 0.5);
+  --wr-alert-close-color: rgba(var(--wr-color-primary-rgb), 0.5);
+  --wr-alert-close-color-hover: var(--wr-color-primary);
+  --wr-alert-border-radius: 0.5rem;
+  --wr-alert-padding-x: 0.75rem;
+  --wr-alert-padding-y: 0.875rem;
+}

package/avatar/avatar.component.d.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectorRef, ElementRef } from '@angular/core';
+import { SafeAny } from 'ngwr/cdk/types';
+import * as i0 from "@angular/core";
+export declare class WrAvatarComponent {
+    readonly cdr: ChangeDetectorRef;
+    readonly elRef: ElementRef<any>;
+    readonly remSize: number;
+    readonly isImgLoaded: import("@angular/core").WritableSignal<boolean>;
+    private calcRemToPx;
+    constructor();
+    url: string;
+    alt: string;
+    rounded: boolean;
+    /**
+     * Width and height in rem
+     * @example size="6" transforms to 6 * remSize (16 by default)
+     */
+    get size(): number;
+    set size(value: number | string);
+    private _size;
+    get elClasses(): SafeAny;
+    get elStyles(): SafeAny;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrAvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrAvatarComponent, "wr-avatar", never, { "url": { "alias": "url"; "required": true; }; "alt": { "alias": "alt"; "required": true; }; "rounded": { "alias": "rounded"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_rounded: unknown;
+    static ngAcceptInputType_size: unknown;
+}

package/avatar/avatar.module.d.ts

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

package/avatar/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ngwr/avatar" />
+export * from './public-api';

package/avatar/public-api.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+export * from './avatar.component';
+export * from './avatar.module';

package/avatar/styles/_index.scss

@@ -0,0 +1,39 @@
+.wr-avatar {
+  --wr-avatar-border-radius: 10%;
+  --wr-avatar-img-opacity: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: var(--wr-avatar-border-radius);
+
+  position: relative;
+  overflow: hidden;
+
+  box-shadow: inset 0 0 0 1px rgba(var(--wr-color-light-rgb), 0.5);
+
+  &--rounded {
+    --wr-avatar-border-radius: 50%;
+  }
+
+  &--loaded {
+    --wr-avatar-img-opacity: 1;
+    box-shadow: inset 0 0 0 1px rgba(var(--wr-color-light-rgb), 0);
+  }
+
+  &__img {
+    pointer-events: none;
+    user-select: none;
+    opacity: var(--wr-avatar-img-opacity);
+    transition: var(--wr-transition-base);
+  }
+
+  &__spin {
+    color: rgba(var(--wr-color-medium-rgb), 0.5);
+    position: absolute;
+    width: 40%;
+    height: 40%;
+  }
+}

package/button/button-group.component.d.ts

@@ -0,0 +1,12 @@
+import { SafeAny } from 'ngwr/cdk/types';
+import * as i0 from "@angular/core";
+/**
+ * NGWR button group.
+ *
+ * {@tutorial} [How to use wr-btn-group]{@link http://ngwr.dev/docs/components/button-group}
+ */
+export declare class WrButtonGroupComponent {
+    get classes(): SafeAny;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrButtonGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrButtonGroupComponent, "wr-btn-group", never, {}, {}, never, ["*"], true, never>;
+}

package/button/button.component.d.ts

@@ -1,63 +1,31 @@
-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 { SafeAny, WrThemeColor } from 'ngwr/cdk/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);
-    /**
-     * @deprecated use fullWidth instead
-     */
-    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 */
+/**
+ * NGWR button component.
+ * Trigger an operation or perform an action.
+ *
+ * {@tutorial} [How to use wr-btn]{@link http://ngwr.dev/docs/components/button}
+ */
+export declare class WrButtonComponent {
+    color?: WrThemeColor | null;
+    size: 'default' | 'small';
+    icon: wrIconName | null;
+    iconPosition: 'start' | 'end';
+    disabled: boolean;
+    outlined: boolean;
+    rounded: boolean;
+    block: boolean;
+    loading: boolean;
+    isDisabledWhenLoading: boolean;
     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": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "outlined": { "alias": "outlined"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "fullwidth": { "alias": "fullwidth"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrButtonComponent, "wr-btn, button[wr-btn], a[wr-btn]", never, { "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "outlined": { "alias": "outlined"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "block": { "alias": "block"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "isDisabledWhenLoading": { "alias": "isDisabledWhenLoading"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_outlined: unknown;
+    static ngAcceptInputType_rounded: unknown;
+    static ngAcceptInputType_block: unknown;
+    static ngAcceptInputType_loading: unknown;
+    static ngAcceptInputType_isDisabledWhenLoading: unknown;
 }

package/button/button.module.d.ts

@@ -1,7 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./button.component";
+import * as i2 from "./button-group.component";
 export declare class WrButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<WrButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<WrButtonModule, never, [typeof i1.WrButton], [typeof i1.WrButton]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<WrButtonModule, never, [typeof i1.WrButtonComponent, typeof i2.WrButtonGroupComponent], [typeof i1.WrButtonComponent, typeof i2.WrButtonGroupComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<WrButtonModule>;
 }

package/button/index.d.ts

@@ -1,2 +1,5 @@
-export { WrButton } from './button.component';
-export { WrButtonModule } from './button.module';
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ngwr/button" />
+export * from './public-api';

package/button/public-api.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+export * from './button.component';
+export * from './button-group.component';
+export * from './button.module';

package/button/styles/_index.scss

@@ -0,0 +1,187 @@
+@forward './vars';
+
+@use '../../styles/maps' as maps;
+@use '../../styles/colors';
+
+@forward '../../spinner/styles';
+@forward '../../icon/styles';
+
+.wr-btn {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+
+  text-align: center;
+
+  appearance: none;
+  text-decoration: none;
+  list-style: none;
+  cursor: pointer;
+  touch-action: manipulation;
+  user-select: none;
+
+  white-space: nowrap;
+  word-wrap: break-word;
+
+  color: var(--wr-btn-color);
+  background-color: var(--wr-btn-bg-color);
+
+  border-radius: var(--wr-btn-border-radius);
+  border: 1px solid var(--wr-btn-border-color);
+
+  font-family: var(--wr-btn-font-family);
+  font-size: var(--wr-btn-font-size);
+  font-weight: var(--wr-btn-font-weight);
+  line-height: var(--wr-btn-line-height);
+
+  padding: var(--wr-btn-padding-y) var(--wr-btn-padding-x);
+
+  transition: var(--wr-transition-base);
+
+  &__spin {
+    position: absolute;
+    z-index: 3;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &:hover {
+    --wr-btn-bg-color: var(--wr-color-light-lighter);
+  }
+
+  &[disabled],
+  &:disabled {
+    cursor: default;
+    --wr-btn-color: var(--wr-color-medium);
+    --wr-btn-bg-color: var(--wr-color-light-lighter);
+    pointer-events: none;
+  }
+
+  &:active {
+    --wr-btn-bg-color: var(--wr-color-light-shade);
+  }
+
+  &-group {
+    .wr-btn {
+      border-radius: 0;
+      border-left: none;
+
+      &:first-child {
+        border-top-left-radius: var(--wr-btn-border-radius);
+        border-bottom-left-radius: var(--wr-btn-border-radius);
+        border-left: 1px solid var(--wr-btn-border-color);
+      }
+
+      &:last-child {
+        border-top-right-radius: var(--wr-btn-border-radius);
+        border-bottom-right-radius: var(--wr-btn-border-radius);
+      }
+    }
+  }
+
+  &--loading {
+    &--disabled {
+      pointer-events: none;
+    }
+
+    .wr-btn__text,
+    .wr-btn__icon,{
+      opacity: 0;
+    }
+  }
+
+  &-group {
+    .wr-btn {
+      border-radius: 0;
+      border-left: none;
+
+      &:first-child {
+        border-top-left-radius: var(--wr-btn-border-radius);
+        border-bottom-left-radius: var(--wr-btn-border-radius);
+        border-left: 1px solid var(--wr-btn-border-color);
+      }
+
+      &:last-child {
+        border-top-right-radius: var(--wr-btn-border-radius);
+        border-bottom-right-radius: var(--wr-btn-border-radius);
+      }
+    }
+  }
+
+  &--small {
+    --wr-btn-icon-size: 0.825rem;
+    --wr-btn-font-size: 0.75rem;
+    --wr-btn-line-height: 1rem;
+    --wr-btn-border-radius: 0.25rem;
+    --wr-btn-padding-y: 0.25rem;
+    --wr-btn-padding-x: 0.75rem;
+  }
+
+  &--rounded {
+    --wr-btn-border-radius: 50rem;
+  }
+
+  &--block {
+    display: block;
+    width: 100%;
+  }
+
+  &__icon {
+    --wr-icon-size: var(--wr-btn-icon-size) !important;
+  }
+
+  &--icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+
+    &-end {
+      flex-direction: row-reverse;
+    }
+  }
+}
+
+@each $color in maps.$theme-colors-map {
+  .wr-btn--color-#{$color} {
+    --wr-btn-color: var(--wr-color-#{$color}-contrast);
+    --wr-btn-border-color: var(--wr-color-#{$color});
+    --wr-btn-bg-color: var(--wr-color-#{$color});
+
+    &:hover {
+      --wr-btn-border-color: var(--wr-color-#{$color}-dark);
+      --wr-btn-bg-color: var(--wr-color-#{$color}-dark);
+    }
+
+    &:active {
+      --wr-btn-border-color: var(--wr-color-#{$color}-darker);
+      --wr-btn-bg-color: var(--wr-color-#{$color}-darker);
+    }
+
+    &[disabled],
+    &:disabled {
+      --wr-btn-color: var(--wr-color-#{$color}-contrast);
+      --wr-btn-border-color: var(--wr-color-#{$color}-lighter);
+      --wr-btn-bg-color: var(--wr-color-#{$color}-lighter);
+    }
+
+    &.wr-btn--outlined {
+      --wr-btn-color: var(--wr-color-#{$color});
+      --wr-btn-border-color: rgba(var(--wr-color-#{$color}-rgb), 0.375);
+      --wr-btn-bg-color: transparent;
+
+      &:hover {
+        --wr-btn-color: var(--wr-color-#{$color}-contrast);
+        --wr-btn-border-color: var(--wr-color-#{$color}-dark);
+        --wr-btn-bg-color: var(--wr-color-#{$color}-dark);
+      }
+
+      &:active {
+        --wr-btn-color: var(--wr-color-#{$color}-contrast);
+        --wr-btn-border-color: var(--wr-color-#{$color}-darker);
+        --wr-btn-bg-color: var(--wr-color-#{$color}-darker);
+      }
+    }
+  }
+}

package/button/styles/vars.scss

@@ -0,0 +1,13 @@
+:root {
+  --wr-btn-color: var(--wr-color-dark);
+  --wr-btn-bg-color: var(--wr-color-white);
+  --wr-btn-border-color: var(--wr-color-light-lighter);
+  --wr-btn-icon-size: 1rem;
+  --wr-btn-font-size: 0.875rem;
+  --wr-btn-font-weight: 500;
+  --wr-btn-font-family: var(--wr-font-family-base);
+  --wr-btn-line-height: 1.25rem;
+  --wr-btn-border-radius: 0.375rem;
+  --wr-btn-padding-y: 0.375rem;
+  --wr-btn-padding-x: 1rem;
+}

package/{core/abstract/base.d.ts → cdk/base.directive.d.ts}

@@ -1,3 +1,9 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
 import { OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
@@ -5,5 +11,5 @@ 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, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrAbstractBase, never, never, {}, {}, never, never, true, never>;
 }

package/cdk/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ngwr/cdk" />
+export * from './public-api';