ngwr 3.0.0 → 4.0.1

package/input/styles/_index.scss

@@ -0,0 +1,107 @@
+@forward './vars';
+
+.wr-input {
+  --wr-input-padding-right: var(--wr-input-padding-x);
+  --wr-input-cursor: default;
+
+  display: flex;
+
+  cursor: var(--wr-input-cursor);
+
+  color: var(--wr-input-color);
+  font-size: var(--wr-input-font-size);
+  font-weight: var(--wr-input-font-weight);
+  line-height: var(--wr-input-line-height);
+
+  background-color: var(--wr-input-bg-color);
+  border: 1px solid var(--wr-input-border-color);
+  border-radius: var(--wr-input-border-radius);
+  box-shadow: var(--wr-input-box-shadow);
+
+  overflow: hidden;
+  position: relative;
+
+  transition: var(--wr-transition-base);
+
+  &--rounded {
+    --wr-input-border-radius: 50rem;
+  }
+
+  &--disabled {
+    --wr-input-cursor: not-allowed;
+    --wr-input-color: var(--wr-color-medium);
+    --wr-input-bg-color: var(--wr-color-light-lighter);
+  }
+
+  &--focused {
+    --wr-input-border-color: var(--wr-color-primary);
+    --wr-input-box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.125);
+  }
+
+  &--password {
+    --wr-input-padding-right: calc(var(--wr-input-icon-size) + calc(var(--wr-input-padding-x) / 2));
+  }
+
+  &__native {
+    display: inline-block;
+
+    flex: 1;
+
+    appearance: none;
+    background: none;
+    border: none;
+    outline: none;
+    margin: 0;
+    vertical-align: middle;
+    white-space: normal;
+    resize: none;
+
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+
+    padding: var(--wr-input-padding-y) var(--wr-input-padding-x);
+    padding-right: var(--wr-input-padding-right);
+
+    &[disabled],
+    &:disabled {
+      cursor: var(--wr-input-cursor);
+    }
+
+    &::placeholder {
+      color: var(--wr-input-placeholder-color);
+      font-style: italic;
+    }
+  }
+
+  &-icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    width: calc(var(--wr-input-icon-size) + calc(var(--wr-input-padding-x) / 2));
+    height: 100%;
+
+    cursor: pointer;
+
+    &--disabled {
+      cursor: var(--wr-input-cursor);
+      pointer-events: none;
+    }
+
+    &__icon {
+      --wr-icon-size: var(--wr-input-icon-size);
+      color: var(--wr-input-icon-color);
+      transition: var(--wr-transition-base);
+    }
+
+    &:hover {
+      --wr-input-icon-color: var(--wr-color-primary);
+    }
+  }
+}

package/input/styles/vars.scss

@@ -0,0 +1,16 @@
+:root {
+  --wr-input-color: var(--wr-color-dark);
+  --wr-input-placeholder-color: var(--wr-color-light);
+  --wr-input-bg-color: var(--wr-color-white);
+  --wr-input-border-color: var(--wr-color-light-lighter);
+  --wr-input-border-radius: 0.375rem;
+  --wr-input-box-shadow: none;
+  --wr-input-icon-size: 1.25rem;
+  --wr-input-icon-color: var(--wr-color-medium);
+  --wr-input-font-size: 0.875rem;
+  --wr-input-font-weight: 400;
+  --wr-input-font-family: var(--wr-font-family-base);
+  --wr-input-line-height: 1.25rem;
+  --wr-input-padding-y: 0.375rem;
+  --wr-input-padding-x: 0.825rem;
+}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "ngwr",
-  "version": "3.0.0",
+  "version": "4.0.1",
   "license": "MIT",
   "description": "NGWR – Angular UI components library",
-  "author": "Roman Khegay <rk@garuna.dev> (https://garuna.dev/)",
+  "author": "Roman Khegay <rk@garuna.dev> (https://garuna.dev)",
   "keywords": [
     "ngwr",
     "angular",
@@ -20,26 +20,93 @@
   "bugs": {
     "url": "https://github.com/thekhegay/ngwr/issues"
   },
+  "peerDependencies": {
+    "@angular/animations": ">=17.0.0 <19.0.0",
+    "@angular/cdk": ">=17.0.0 <19.0.0",
+    "@angular/common": ">=17.0.0 <19.0.0",
+    "@angular/core": ">=17.0.0 <19.0.0",
+    "@angular/forms": ">=17.0.0 <19.0.0",
+    "@angular/platform-browser": ">=17.0.0 <19.0.0",
+    "@angular/router": ">=17.0.0 <19.0.0",
+    "rxjs": ">=6.5.5 < 7.9.0"
+  },
   "exports": {
     ".": {
-      "sass": "./_index.scss",
+      "sass": "./styles.scss",
       "types": "./index.d.ts",
       "esm2022": "./esm2022/ngwr.mjs",
       "esm": "./esm2022/ngwr.mjs",
       "default": "./fesm2022/ngwr.mjs"
     },
-    "./grid": {
-      "sass": "./_grid.scss"
+    "./alert/styles": {
+      "sass": "./alert/styles/_index.scss"
+    },
+    "./avatar/styles": {
+      "sass": "./avatar/styles/_index.scss"
+    },
+    "./button/styles": {
+      "sass": "./avatar/button/_index.scss"
+    },
+    "./checkbox/styles": {
+      "sass": "./checkbox/styles/_index.scss"
+    },
+    "./dialog/styles": {
+      "sass": "./dialog/styles/_index.scss"
+    },
+    "./divider/styles": {
+      "sass": "./divider/styles/_index.scss"
+    },
+    "./form/styles": {
+      "sass": "./form/styles/_index.scss"
+    },
+    "./icon/styles": {
+      "sass": "./icon/styles/_index.scss"
+    },
+    "./input/styles": {
+      "sass": "./input/styles/_index.scss"
+    },
+    "./progress/styles": {
+      "sass": "./progress/styles/_index.scss"
+    },
+    "./qr/styles": {
+      "sass": "./qr/styles/_index.scss"
+    },
+    "./skeleton/styles": {
+      "sass": "./skeleton/styles/_index.scss"
+    },
+    "./spinner/styles": {
+      "sass": "./spinner/styles/_index.scss"
+    },
+    "./tag/styles": {
+      "sass": "./tag/styles/_index.scss"
     },
     "./package.json": {
       "default": "./package.json"
     },
+    "./alert": {
+      "types": "./alert/index.d.ts",
+      "esm2022": "./esm2022/alert/ngwr-alert.mjs",
+      "esm": "./esm2022/alert/ngwr-alert.mjs",
+      "default": "./fesm2022/ngwr-alert.mjs"
+    },
+    "./avatar": {
+      "types": "./avatar/index.d.ts",
+      "esm2022": "./esm2022/avatar/ngwr-avatar.mjs",
+      "esm": "./esm2022/avatar/ngwr-avatar.mjs",
+      "default": "./fesm2022/ngwr-avatar.mjs"
+    },
     "./button": {
       "types": "./button/index.d.ts",
       "esm2022": "./esm2022/button/ngwr-button.mjs",
       "esm": "./esm2022/button/ngwr-button.mjs",
       "default": "./fesm2022/ngwr-button.mjs"
     },
+    "./cdk": {
+      "types": "./cdk/index.d.ts",
+      "esm2022": "./esm2022/cdk/ngwr-cdk.mjs",
+      "esm": "./esm2022/cdk/ngwr-cdk.mjs",
+      "default": "./fesm2022/ngwr-cdk.mjs"
+    },
     "./checkbox": {
       "types": "./checkbox/index.d.ts",
       "esm2022": "./esm2022/checkbox/ngwr-checkbox.mjs",
@@ -76,11 +143,23 @@
       "esm": "./esm2022/input/ngwr-input.mjs",
       "default": "./fesm2022/ngwr-input.mjs"
     },
-    "./qrcode": {
-      "types": "./qrcode/index.d.ts",
-      "esm2022": "./esm2022/qrcode/ngwr-qrcode.mjs",
-      "esm": "./esm2022/qrcode/ngwr-qrcode.mjs",
-      "default": "./fesm2022/ngwr-qrcode.mjs"
+    "./pipes": {
+      "types": "./pipes/index.d.ts",
+      "esm2022": "./esm2022/pipes/ngwr-pipes.mjs",
+      "esm": "./esm2022/pipes/ngwr-pipes.mjs",
+      "default": "./fesm2022/ngwr-pipes.mjs"
+    },
+    "./progress": {
+      "types": "./progress/index.d.ts",
+      "esm2022": "./esm2022/progress/ngwr-progress.mjs",
+      "esm": "./esm2022/progress/ngwr-progress.mjs",
+      "default": "./fesm2022/ngwr-progress.mjs"
+    },
+    "./qr": {
+      "types": "./qr/index.d.ts",
+      "esm2022": "./esm2022/qr/ngwr-qr.mjs",
+      "esm": "./esm2022/qr/ngwr-qr.mjs",
+      "default": "./fesm2022/ngwr-qr.mjs"
     },
     "./skeleton": {
       "types": "./skeleton/index.d.ts",
@@ -100,55 +179,29 @@
       "esm": "./esm2022/tag/ngwr-tag.mjs",
       "default": "./fesm2022/ngwr-tag.mjs"
     },
-    "./tooltip": {
-      "types": "./tooltip/index.d.ts",
-      "esm2022": "./esm2022/tooltip/ngwr-tooltip.mjs",
-      "esm": "./esm2022/tooltip/ngwr-tooltip.mjs",
-      "default": "./fesm2022/ngwr-tooltip.mjs"
-    },
-    "./core/abstract": {
-      "types": "./core/abstract/index.d.ts",
-      "esm2022": "./esm2022/core/abstract/ngwr-core-abstract.mjs",
-      "esm": "./esm2022/core/abstract/ngwr-core-abstract.mjs",
-      "default": "./fesm2022/ngwr-core-abstract.mjs"
-    },
-    "./core/color": {
-      "types": "./core/color/index.d.ts",
-      "esm2022": "./esm2022/core/color/ngwr-core-color.mjs",
-      "esm": "./esm2022/core/color/ngwr-core-color.mjs",
-      "default": "./fesm2022/ngwr-core-color.mjs"
-    },
-    "./core/decorators": {
-      "types": "./core/decorators/index.d.ts",
-      "esm2022": "./esm2022/core/decorators/ngwr-core-decorators.mjs",
-      "esm": "./esm2022/core/decorators/ngwr-core-decorators.mjs",
-      "default": "./fesm2022/ngwr-core-decorators.mjs"
-    },
-    "./core/overlay": {
-      "types": "./core/overlay/index.d.ts",
-      "esm2022": "./esm2022/core/overlay/ngwr-core-overlay.mjs",
-      "esm": "./esm2022/core/overlay/ngwr-core-overlay.mjs",
-      "default": "./fesm2022/ngwr-core-overlay.mjs"
-    },
-    "./core/types": {
-      "types": "./core/types/index.d.ts",
-      "esm2022": "./esm2022/core/types/ngwr-core-types.mjs",
-      "esm": "./esm2022/core/types/ngwr-core-types.mjs",
-      "default": "./fesm2022/ngwr-core-types.mjs"
+    "./cdk/rxjs": {
+      "types": "./cdk/rxjs/index.d.ts",
+      "esm2022": "./esm2022/cdk/rxjs/ngwr-cdk-rxjs.mjs",
+      "esm": "./esm2022/cdk/rxjs/ngwr-cdk-rxjs.mjs",
+      "default": "./fesm2022/ngwr-cdk-rxjs.mjs"
+    },
+    "./cdk/types": {
+      "types": "./cdk/types/index.d.ts",
+      "esm2022": "./esm2022/cdk/types/ngwr-cdk-types.mjs",
+      "esm": "./esm2022/cdk/types/ngwr-cdk-types.mjs",
+      "default": "./fesm2022/ngwr-cdk-types.mjs"
+    },
+    "./cdk/utils": {
+      "types": "./cdk/utils/index.d.ts",
+      "esm2022": "./esm2022/cdk/utils/ngwr-cdk-utils.mjs",
+      "esm": "./esm2022/cdk/utils/ngwr-cdk-utils.mjs",
+      "default": "./fesm2022/ngwr-cdk-utils.mjs"
     }
   },
-  "dependencies": {
-    "@angular/cdk": "^17.0.5",
-    "tslib": "^2.3.0"
-  },
-  "peerDependencies": {
-    "@angular/animations": ">=14.0.0 <18.0.0",
-    "@angular/common": ">=14.0.0 <18.0.0",
-    "@angular/core": ">=14.0.0 <18.0.0",
-    "@angular/forms": ">=14.0.0 <18.0.0",
-    "rxjs": ">=6.5.5 < 7.9.0"
-  },
   "module": "fesm2022/ngwr.mjs",
   "typings": "index.d.ts",
-  "sideEffects": false
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
 }

package/pipes/index.d.ts

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

package/pipes/new-array.pipe.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @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 { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class NewArrayPipe implements PipeTransform {
+    transform(arrayLength: number): number[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<NewArrayPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<NewArrayPipe, "newArray", true>;
+}

package/pipes/pipes.module.d.ts

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

package/pipes/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 './new-array.pipe';
+export * from './pipes.module';

package/progress/index.d.ts

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

package/progress/progress.component.d.ts

@@ -0,0 +1,10 @@
+import { SafeAny, WrThemeColor } from 'ngwr/cdk/types';
+import * as i0 from "@angular/core";
+export declare class WrProgressComponent {
+    color: WrThemeColor | null;
+    percent: number;
+    get elClasses(): SafeAny;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrProgressComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrProgressComponent, "wr-progress", never, { "color": { "alias": "color"; "required": false; }; "percent": { "alias": "percent"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_percent: unknown;
+}

package/progress/progress.module.d.ts

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

package/progress/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 './progress.component';
+export * from './progress.module';

package/progress/styles/_index.scss

@@ -0,0 +1,24 @@
+@forward './vars';
+@forward './theming';
+
+.wr-progress {
+  position: relative;
+  overflow: hidden;
+
+  height: var(--wr-progress-height);
+  width: 100%;
+
+  background: var(--wr-progress-bg-color);
+  border-radius: var(--wr-progress-border-radius);
+
+  &__bg {
+    position: absolute;
+    height: 100%;
+    background: var(--wr-progress-color);
+    border-top-right-radius: var(--wr-progress-border-radius);
+    border-bottom-right-radius: var(--wr-progress-border-radius);
+    transition: var(--wr-transition-base);
+  }
+}
+
+

package/progress/styles/theming.scss

@@ -0,0 +1,8 @@
+@use '../../styles/maps' as maps;
+
+@each $color in maps.$theme-colors-map {
+  .wr-progress--color-#{$color} {
+    --wr-progress-bg-color: rgba(var(--wr-color-#{$color}-rgb), 0.25);
+    --wr-progress-color: var(--wr-color-#{$color});
+  }
+}

package/progress/styles/vars.scss

@@ -0,0 +1,6 @@
+:root {
+  --wr-progress-color: var(--wr-color-light);
+  --wr-progress-bg-color: rgba(var(--wr-color-light-rgb), 0.25);
+  --wr-progress-height: 0.5rem;
+  --wr-progress-border-radius: 50rem;
+}

package/public-api.d.ts

@@ -0,0 +1,2 @@
+declare const _default: undefined;
+export default _default;

package/qr/index.d.ts

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

package/qr/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 './qr.component';
+export * from './qr.module';

package/qr/qr.component.d.ts

@@ -0,0 +1,31 @@
+import { AfterViewInit, ElementRef, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { WrAbstractBase } from 'ngwr/cdk';
+import { wrIconName } from 'ngwr/icon';
+import { ERROR_LEVEL_MAP } from './generator';
+import * as i0 from "@angular/core";
+export declare class WrQrComponent extends WrAbstractBase implements OnInit, AfterViewInit, OnChanges {
+    class: string;
+    canvas: ElementRef<HTMLCanvasElement>;
+    value: string;
+    level: keyof typeof ERROR_LEVEL_MAP;
+    padding: number;
+    color: string;
+    bgColor: string;
+    size: number;
+    icon: wrIconName | null;
+    iconSize: number;
+    private readonly pid;
+    private readonly elRef;
+    private readonly wrIconService;
+    protected readonly isBrowser: import("@angular/core").WritableSignal<boolean>;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    setElBg(): void;
+    drawCanvas(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrQrComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrQrComponent, "wr-qr", never, { "value": { "alias": "value"; "required": true; }; "level": { "alias": "level"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "color": { "alias": "color"; "required": false; }; "bgColor": { "alias": "bgColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_padding: unknown;
+    static ngAcceptInputType_size: unknown;
+    static ngAcceptInputType_iconSize: unknown;
+}

package/qr/qr.module.d.ts

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

package/skeleton/index.d.ts

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

package/skeleton/skeleton.component.d.ts

@@ -0,0 +1,10 @@
+import { SafeAny, WrThemeColor } from 'ngwr/cdk/types';
+import * as i0 from "@angular/core";
+export declare class WrSkeletonComponent {
+    color: WrThemeColor;
+    animated: boolean;
+    get elClasses(): SafeAny;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrSkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrSkeletonComponent, "wr-skeleton", never, { "color": { "alias": "color"; "required": false; }; "animated": { "alias": "animated"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_animated: unknown;
+}

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

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

package/skeleton/{skeleton.scss → styles/_index.scss}

@@ -1,4 +1,4 @@
-@use '../styles/maps' as maps;
+@use '../../styles/maps' as maps;
 
 $skeleton-prefix: wr-skeleton;
 

package/spinner/index.d.ts

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

package/spinner/spinner.component.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+/**
+ * NGWR spinner component.
+ *
+ * {@tutorial} [How to use wr-spinner]{@link http://ngwr.dev/docs/components/spinner
+ */
+export declare class WrSpinnerComponent {
+    class: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrSpinnerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrSpinnerComponent, "wr-spinner", never, {}, {}, never, never, true, never>;
+}

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

package/spinner/{spinner.scss → styles/_index.scss}

@@ -1,5 +1,6 @@
+@forward '../../styles/animations';
 
-.wr-spin {
+.wr-spinner {
   display: inline-block;
   color: inherit;
   font-style: normal;

package/styles/animations.scss

@@ -1,7 +1,3 @@
-@keyframes shimmer {
-  100% { transform: translateX(100%); }
-}
-
 @keyframes rotate {
   100% { transform: rotate(360deg); }
 }
@@ -12,6 +8,10 @@
   100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
 }
 
+@keyframes shimmer {
+  100% { transform: translateX(100%); }
+}
+
 @keyframes wr-fade-in {
   0% { opacity: 0 }
   to { opacity: 1 }

package/styles/cdk.scss

@@ -1 +1,5 @@
 @use '@angular/cdk/overlay-prebuilt.css';
+
+.wr-backdrop {
+  background: rgba(var(--wr-color-black-rgb), 0.875);
+}