ngwr 7.0.0 → 7.2.0

package/fesm2022/ngwr-shiny-text.mjs

@@ -73,10 +73,10 @@ class WrShinyText {
         return `linear-gradient(${this.spread()}deg, ${base} 0%, ${base} 35%, ${shine} 50%, ${base} 65%, ${base} 100%)`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "gradient" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrShinyText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrShinyText, isStandalone: true, selector: "wr-shiny-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, shineColor: { classPropertyName: "shineColor", publicName: "shineColor", isSignal: true, isRequired: false, transformFunction: null }, spread: { classPropertyName: "spread", publicName: "spread", isSignal: true, isRequired: false, transformFunction: null }, yoyo: { classPropertyName: "yoyo", publicName: "yoyo", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-shiny-text--paused": "disabled()", "class.wr-shiny-text--pause-on-hover": "pauseOnHover()", "class.wr-shiny-text--yoyo": "yoyo()", "class.wr-shiny-text--reverse": "direction() === 'right'", "style.background-image": "gradient()", "style.animation-duration": "totalDuration() + 's'" }, classAttribute: "wr-shiny-text" }, ngImport: i0, template: '{{ text() }}', isInline: true, styles: [".wr-shiny-text{--wr-shiny-text-base: var(--wr-color-medium, #8594a4);--wr-shiny-text-shine: var(--wr-color-dark, #0f172a);display:inline-block;background-size:200% auto;background-position:150% center;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation-name:wr-shiny-text-sweep;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:both;animation-play-state:running}.wr-shiny-text--reverse{animation-direction:reverse}.wr-shiny-text--yoyo{animation-direction:alternate}.wr-shiny-text--yoyo.wr-shiny-text--reverse{animation-direction:alternate-reverse}.wr-shiny-text--paused,.wr-shiny-text--pause-on-hover:hover{animation-play-state:paused}@keyframes wr-shiny-text-sweep{0%{background-position:150% center}50%{background-position:-50% center}to{background-position:-50% center}}@media(prefers-reduced-motion:reduce){.wr-shiny-text{animation:none!important}}@keyframes wr-shimmer{to{background-position-x:-200%}}.wr-shimmer{background:linear-gradient(110deg,var(--wr-color-dark) 30%,rgba(var(--wr-color-primary-rgb),.9) 50%,var(--wr-color-dark) 70%);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:wr-shimmer 2.5s linear infinite}@media(prefers-reduced-motion:reduce){.wr-shimmer{animation:none}}[data-theme=dark] .wr-shiny-text{--wr-shiny-text-base: #b5b5b5;--wr-shiny-text-shine: #ffffff}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrShinyText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrShinyText, isStandalone: true, selector: "wr-shiny-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, shineColor: { classPropertyName: "shineColor", publicName: "shineColor", isSignal: true, isRequired: false, transformFunction: null }, spread: { classPropertyName: "spread", publicName: "spread", isSignal: true, isRequired: false, transformFunction: null }, yoyo: { classPropertyName: "yoyo", publicName: "yoyo", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-shiny-text--paused": "disabled()", "class.wr-shiny-text--pause-on-hover": "pauseOnHover()", "class.wr-shiny-text--yoyo": "yoyo()", "class.wr-shiny-text--reverse": "direction() === 'right'", "style.background-image": "gradient()", "style.animation-duration": "totalDuration() + 's'" }, classAttribute: "wr-shiny-text" }, ngImport: i0, template: '{{ text() }}', isInline: true, styles: [".wr-shiny-text{--wr-shiny-text-base: var(--wr-color-medium, #8594a4);--wr-shiny-text-shine: var(--wr-color-dark, #0f172a);display:inline-block;background-size:200% auto;background-position:150% center;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation-name:wr-shiny-text-sweep;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:both;animation-play-state:running}.wr-shiny-text--reverse{animation-direction:reverse}.wr-shiny-text--yoyo{animation-direction:alternate}.wr-shiny-text--yoyo.wr-shiny-text--reverse{animation-direction:alternate-reverse}.wr-shiny-text--paused,.wr-shiny-text--pause-on-hover:hover{animation-play-state:paused}@keyframes wr-shiny-text-sweep{0%{background-position:150% center}50%{background-position:-50% center}to{background-position:-50% center}}@media(prefers-reduced-motion:reduce){.wr-shiny-text{animation:none!important}}@keyframes wr-shimmer{to{background-position-x:-200%}}.wr-shimmer{background:linear-gradient(110deg,var(--wr-color-dark) 30%,rgba(var(--wr-color-primary-rgb),.9) 50%,var(--wr-color-dark) 70%);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:wr-shimmer 2.5s linear infinite}@media(prefers-reduced-motion:reduce){.wr-shimmer{animation:none}}[data-theme=dark] .wr-shiny-text{--wr-shiny-text-base: #b5b5b5;--wr-shiny-text-shine: #ffffff}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrShinyText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrShinyText, decorators: [{
             type: Component,
             args: [{ selector: 'wr-shiny-text', template: '{{ text() }}', encapsulation: ViewEncapsulation.None, host: {
                         class: 'wr-shiny-text',
@@ -108,10 +108,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * ```
  */
 class WrShimmer {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrShimmer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: WrShimmer, isStandalone: true, selector: "[wrShimmer]", host: { classAttribute: "wr-shimmer" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrShimmer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: WrShimmer, isStandalone: true, selector: "[wrShimmer]", host: { classAttribute: "wr-shimmer" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrShimmer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrShimmer, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrShimmer]',

package/fesm2022/ngwr-sidebar.mjs

@@ -118,10 +118,10 @@ class WrSidebar {
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrSidebar, isStandalone: true, selector: "wr-sidebar", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, defaultGroupIcon: { classPropertyName: "defaultGroupIcon", publicName: "defaultGroupIcon", isSignal: true, isRequired: false, transformFunction: null }, defaultItemIcon: { classPropertyName: "defaultItemIcon", publicName: "defaultItemIcon", isSignal: true, isRequired: false, transformFunction: null }, autoExpand: { classPropertyName: "autoExpand", publicName: "autoExpand", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, classAttribute: "wr-sidebar" }, ngImport: i0, template: "<nav class=\"wr-sidebar__inner\">\n  @for (entry of entries(); track entry.title) {\n    @if (!isGroup(entry)) {\n      <a\n        class=\"wr-sidebar__entry\"\n        routerLinkActive=\"wr-sidebar__entry--active\"\n        [routerLink]=\"asItem(entry).url\"\n        [class.wr-sidebar__entry--disabled]=\"asItem(entry).disabled\"\n      >\n        @if (asItem(entry).icon || defaultItemIcon(); as name) {\n          <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n        }\n        <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n        @if (asItem(entry).badge) {\n          <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n        }\n      </a>\n    } @else {\n      <section class=\"wr-sidebar__group\" [class.wr-sidebar__group--collapsed]=\"!isOpen(entry.title)\">\n        <button\n          type=\"button\"\n          class=\"wr-sidebar__group-toggle\"\n          [attr.aria-expanded]=\"isOpen(entry.title)\"\n          [attr.aria-controls]=\"groupBodyId(entry.title)\"\n          (click)=\"toggleGroup(entry.title)\"\n        >\n          @if (asGroup(entry).icon || defaultGroupIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          <!-- Inline chrome chevron \u2014 not user-customizable. -->\n          <svg\n            class=\"wr-icon__svg wr-sidebar__chevron\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </button>\n        <div\n          class=\"wr-sidebar__group-wrap\"\n          [attr.id]=\"groupBodyId(entry.title)\"\n          [attr.inert]=\"!isOpen(entry.title) ? '' : null\"\n        >\n          <div class=\"wr-sidebar__group-body\">\n            <ul class=\"wr-sidebar__list\">\n              @for (child of asGroup(entry).children; track child.title) {\n                <li>\n                  @if (child.disabled || !child.url.length) {\n                    <span class=\"wr-sidebar__item wr-sidebar__item--disabled\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </span>\n                  } @else {\n                    <a class=\"wr-sidebar__item\" routerLinkActive=\"wr-sidebar__item--active\" [routerLink]=\"child.url\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </a>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </section>\n    }\n  }\n</nav>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrSidebar, isStandalone: true, selector: "wr-sidebar", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, defaultGroupIcon: { classPropertyName: "defaultGroupIcon", publicName: "defaultGroupIcon", isSignal: true, isRequired: false, transformFunction: null }, defaultItemIcon: { classPropertyName: "defaultItemIcon", publicName: "defaultItemIcon", isSignal: true, isRequired: false, transformFunction: null }, autoExpand: { classPropertyName: "autoExpand", publicName: "autoExpand", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, classAttribute: "wr-sidebar" }, ngImport: i0, template: "<nav class=\"wr-sidebar__inner\">\n  @for (entry of entries(); track entry.title) {\n    @if (!isGroup(entry)) {\n      <a\n        class=\"wr-sidebar__entry\"\n        routerLinkActive=\"wr-sidebar__entry--active\"\n        [routerLink]=\"asItem(entry).url\"\n        [class.wr-sidebar__entry--disabled]=\"asItem(entry).disabled\"\n      >\n        @if (asItem(entry).icon || defaultItemIcon(); as name) {\n          <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n        }\n        <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n        @if (asItem(entry).badge) {\n          <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n        }\n      </a>\n    } @else {\n      <section class=\"wr-sidebar__group\" [class.wr-sidebar__group--collapsed]=\"!isOpen(entry.title)\">\n        <button\n          type=\"button\"\n          class=\"wr-sidebar__group-toggle\"\n          [attr.aria-expanded]=\"isOpen(entry.title)\"\n          [attr.aria-controls]=\"groupBodyId(entry.title)\"\n          (click)=\"toggleGroup(entry.title)\"\n        >\n          @if (asGroup(entry).icon || defaultGroupIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          <!-- Inline chrome chevron \u2014 not user-customizable. -->\n          <svg\n            class=\"wr-icon__svg wr-sidebar__chevron\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </button>\n        <div\n          class=\"wr-sidebar__group-wrap\"\n          [attr.id]=\"groupBodyId(entry.title)\"\n          [attr.inert]=\"!isOpen(entry.title) ? '' : null\"\n        >\n          <div class=\"wr-sidebar__group-body\">\n            <ul class=\"wr-sidebar__list\">\n              @for (child of asGroup(entry).children; track child.title) {\n                <li>\n                  @if (child.disabled || !child.url.length) {\n                    <span class=\"wr-sidebar__item wr-sidebar__item--disabled\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </span>\n                  } @else {\n                    <a class=\"wr-sidebar__item\" routerLinkActive=\"wr-sidebar__item--active\" [routerLink]=\"child.url\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </a>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </section>\n    }\n  }\n</nav>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSidebar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSidebar, decorators: [{
             type: Component,
             args: [{ selector: 'wr-sidebar', encapsulation: ViewEncapsulation.None, host: { class: 'wr-sidebar', role: 'navigation' }, imports: [RouterLink, RouterLinkActive, WrIcon], template: "<nav class=\"wr-sidebar__inner\">\n  @for (entry of entries(); track entry.title) {\n    @if (!isGroup(entry)) {\n      <a\n        class=\"wr-sidebar__entry\"\n        routerLinkActive=\"wr-sidebar__entry--active\"\n        [routerLink]=\"asItem(entry).url\"\n        [class.wr-sidebar__entry--disabled]=\"asItem(entry).disabled\"\n      >\n        @if (asItem(entry).icon || defaultItemIcon(); as name) {\n          <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n        }\n        <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n        @if (asItem(entry).badge) {\n          <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n        }\n      </a>\n    } @else {\n      <section class=\"wr-sidebar__group\" [class.wr-sidebar__group--collapsed]=\"!isOpen(entry.title)\">\n        <button\n          type=\"button\"\n          class=\"wr-sidebar__group-toggle\"\n          [attr.aria-expanded]=\"isOpen(entry.title)\"\n          [attr.aria-controls]=\"groupBodyId(entry.title)\"\n          (click)=\"toggleGroup(entry.title)\"\n        >\n          @if (asGroup(entry).icon || defaultGroupIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          <!-- Inline chrome chevron \u2014 not user-customizable. -->\n          <svg\n            class=\"wr-icon__svg wr-sidebar__chevron\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </button>\n        <div\n          class=\"wr-sidebar__group-wrap\"\n          [attr.id]=\"groupBodyId(entry.title)\"\n          [attr.inert]=\"!isOpen(entry.title) ? '' : null\"\n        >\n          <div class=\"wr-sidebar__group-body\">\n            <ul class=\"wr-sidebar__list\">\n              @for (child of asGroup(entry).children; track child.title) {\n                <li>\n                  @if (child.disabled || !child.url.length) {\n                    <span class=\"wr-sidebar__item wr-sidebar__item--disabled\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </span>\n                  } @else {\n                    <a class=\"wr-sidebar__item\" routerLinkActive=\"wr-sidebar__item--active\" [routerLink]=\"child.url\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </a>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </section>\n    }\n  }\n</nav>\n" }]
         }], ctorParameters: () => [], propDecorators: { entries: [{ type: i0.Input, args: [{ isSignal: true, alias: "entries", required: false }] }], defaultGroupIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultGroupIcon", required: false }] }], defaultItemIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultItemIcon", required: false }] }], autoExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoExpand", required: false }] }] } });

package/fesm2022/ngwr-skeleton.mjs

@@ -49,10 +49,10 @@ class WrSkeleton {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrSkeleton, isStandalone: true, selector: "wr-skeleton", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-busy": "true", "aria-live": "polite" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrSkeleton, isStandalone: true, selector: "wr-skeleton", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-busy": "true", "aria-live": "polite" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSkeleton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSkeleton, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-skeleton',

package/fesm2022/ngwr-slider.mjs

@@ -204,8 +204,8 @@ class WrSlider {
         const value = this.range() ? [this.low(), this.high()] : this.low();
         this.onChange(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrSlider, isStandalone: true, selector: "wr-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrSlider, isStandalone: true, selector: "wr-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
@@ -214,7 +214,7 @@ class WrSlider {
             },
         ], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <span class=\"wr-slider__fill\" [style.left.%]=\"fillLeft()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [style.left.%]=\"lowPercent()\"\n    [disabled]=\"effectiveDisabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"range() ? 'Lower value' : 'Value'\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.left.%]=\"highPercent()\"\n      [disabled]=\"effectiveDisabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      aria-label=\"Upper value\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSlider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSlider, decorators: [{
             type: Component,
             args: [{ selector: 'wr-slider', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, providers: [
                         {

package/fesm2022/ngwr-sparkline.mjs

@@ -88,10 +88,10 @@ class WrSparkline {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tipPoint" }] : /* istanbul ignore next */ []));
     viewBox = `0 0 ${this.vbW} ${this.vbH}`;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSparkline, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrSparkline, isStandalone: true, selector: "wr-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showArea: { classPropertyName: "showArea", publicName: "showArea", isSignal: true, isRequired: false, transformFunction: null }, showTip: { classPropertyName: "showTip", publicName: "showTip", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-sparkline" }, ngImport: i0, template: "<svg [attr.viewBox]=\"viewBox\" [style.width]=\"width()\" [style.height]=\"height()\" preserveAspectRatio=\"none\">\n  @if (showArea() && areaPath()) {\n    <path class=\"wr-sparkline__area\" [attr.d]=\"areaPath()\" [attr.fill]=\"color()\" fill-opacity=\"0.15\" stroke=\"none\" />\n  }\n  @if (linePath()) {\n    <path\n      class=\"wr-sparkline__line\"\n      [attr.d]=\"linePath()\"\n      fill=\"none\"\n      [attr.stroke]=\"color()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      vector-effect=\"non-scaling-stroke\"\n    />\n  }\n  @if (showTip() && tipPoint(); as tip) {\n    <circle class=\"wr-sparkline__tip\" [attr.cx]=\"tip.x\" [attr.cy]=\"tip.y\" r=\"1.5\" [attr.fill]=\"color()\" />\n  }\n</svg>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSparkline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrSparkline, isStandalone: true, selector: "wr-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showArea: { classPropertyName: "showArea", publicName: "showArea", isSignal: true, isRequired: false, transformFunction: null }, showTip: { classPropertyName: "showTip", publicName: "showTip", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-sparkline" }, ngImport: i0, template: "<svg [attr.viewBox]=\"viewBox\" [style.width]=\"width()\" [style.height]=\"height()\" preserveAspectRatio=\"none\">\n  @if (showArea() && areaPath()) {\n    <path class=\"wr-sparkline__area\" [attr.d]=\"areaPath()\" [attr.fill]=\"color()\" fill-opacity=\"0.15\" stroke=\"none\" />\n  }\n  @if (linePath()) {\n    <path\n      class=\"wr-sparkline__line\"\n      [attr.d]=\"linePath()\"\n      fill=\"none\"\n      [attr.stroke]=\"color()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      vector-effect=\"non-scaling-stroke\"\n    />\n  }\n  @if (showTip() && tipPoint(); as tip) {\n    <circle class=\"wr-sparkline__tip\" [attr.cx]=\"tip.x\" [attr.cy]=\"tip.y\" r=\"1.5\" [attr.fill]=\"color()\" />\n  }\n</svg>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSparkline, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSparkline, decorators: [{
             type: Component,
             args: [{ selector: 'wr-sparkline', encapsulation: ViewEncapsulation.None, host: { class: 'wr-sparkline' }, template: "<svg [attr.viewBox]=\"viewBox\" [style.width]=\"width()\" [style.height]=\"height()\" preserveAspectRatio=\"none\">\n  @if (showArea() && areaPath()) {\n    <path class=\"wr-sparkline__area\" [attr.d]=\"areaPath()\" [attr.fill]=\"color()\" fill-opacity=\"0.15\" stroke=\"none\" />\n  }\n  @if (linePath()) {\n    <path\n      class=\"wr-sparkline__line\"\n      [attr.d]=\"linePath()\"\n      fill=\"none\"\n      [attr.stroke]=\"color()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      vector-effect=\"non-scaling-stroke\"\n    />\n  }\n  @if (showTip() && tipPoint(); as tip) {\n    <circle class=\"wr-sparkline__tip\" [attr.cx]=\"tip.x\" [attr.cy]=\"tip.y\" r=\"1.5\" [attr.fill]=\"color()\" />\n  }\n</svg>\n" }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArea", required: false }] }], showTip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTip", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });

package/fesm2022/ngwr-speed-dial.mjs

@@ -63,10 +63,10 @@ class WrSpeedDial {
         this.pick.emit(action);
         this.open.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSpeedDial, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrSpeedDial, isStandalone: true, selector: "wr-speed-dial", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", pick: "pick" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"wr-speed-dial__trigger\"\n  [attr.aria-expanded]=\"open()\"\n  aria-haspopup=\"menu\"\n  [disabled]=\"disabled()\"\n  (click)=\"onTrigger()\"\n>\n  <wr-icon [name]=\"icon()\" />\n</button>\n\n<ul class=\"wr-speed-dial__actions\" role=\"menu\">\n  @for (action of actions(); track action.id) {\n    <li class=\"wr-speed-dial__action-wrap\" [style.--wr-speed-dial-i]=\"$index + 1\">\n      <button\n        type=\"button\"\n        class=\"wr-speed-dial__action\"\n        role=\"menuitem\"\n        [attr.aria-label]=\"action.label\"\n        [title]=\"action.label\"\n        (click)=\"onPick(action)\"\n      >\n        @if (action.icon) {\n          <wr-icon [name]=\"action.icon\" />\n        } @else {\n          <span>{{ action.label.charAt(0) }}</span>\n        }\n      </button>\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSpeedDial, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrSpeedDial, isStandalone: true, selector: "wr-speed-dial", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", pick: "pick" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"wr-speed-dial__trigger\"\n  [attr.aria-expanded]=\"open()\"\n  aria-haspopup=\"menu\"\n  [disabled]=\"disabled()\"\n  (click)=\"onTrigger()\"\n>\n  <wr-icon [name]=\"icon()\" />\n</button>\n\n<ul class=\"wr-speed-dial__actions\" role=\"menu\">\n  @for (action of actions(); track action.id) {\n    <li class=\"wr-speed-dial__action-wrap\" [style.--wr-speed-dial-i]=\"$index + 1\">\n      <button\n        type=\"button\"\n        class=\"wr-speed-dial__action\"\n        role=\"menuitem\"\n        [attr.aria-label]=\"action.label\"\n        [title]=\"action.label\"\n        (click)=\"onPick(action)\"\n      >\n        @if (action.icon) {\n          <wr-icon [name]=\"action.icon\" />\n        } @else {\n          <span>{{ action.label.charAt(0) }}</span>\n        }\n      </button>\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSpeedDial, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSpeedDial, decorators: [{
             type: Component,
             args: [{ selector: 'wr-speed-dial', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrIcon], template: "<button\n  type=\"button\"\n  class=\"wr-speed-dial__trigger\"\n  [attr.aria-expanded]=\"open()\"\n  aria-haspopup=\"menu\"\n  [disabled]=\"disabled()\"\n  (click)=\"onTrigger()\"\n>\n  <wr-icon [name]=\"icon()\" />\n</button>\n\n<ul class=\"wr-speed-dial__actions\" role=\"menu\">\n  @for (action of actions(); track action.id) {\n    <li class=\"wr-speed-dial__action-wrap\" [style.--wr-speed-dial-i]=\"$index + 1\">\n      <button\n        type=\"button\"\n        class=\"wr-speed-dial__action\"\n        role=\"menuitem\"\n        [attr.aria-label]=\"action.label\"\n        [title]=\"action.label\"\n        (click)=\"onPick(action)\"\n      >\n        @if (action.icon) {\n          <wr-icon [name]=\"action.icon\" />\n        } @else {\n          <span>{{ action.label.charAt(0) }}</span>\n        }\n      </button>\n    </li>\n  }\n</ul>\n" }]
         }], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], pick: [{ type: i0.Output, args: ["pick"] }] } });

package/fesm2022/ngwr-spinner.mjs

@@ -33,10 +33,10 @@ class WrSpinner {
         return size === 'md' ? 'wr-spinner' : `wr-spinner wr-spinner--${size}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrSpinner, isStandalone: true, selector: "wr-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-label": "Loading" }, properties: { "class": "classes()" } }, ngImport: i0, template: "<svg viewBox=\"0 0 50 50\" aria-hidden=\"true\">\n  <circle class=\"wr-spinner__path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\" />\n</svg>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrSpinner, isStandalone: true, selector: "wr-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-label": "Loading" }, properties: { "class": "classes()" } }, ngImport: i0, template: "<svg viewBox=\"0 0 50 50\" aria-hidden=\"true\">\n  <circle class=\"wr-spinner__path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\" />\n</svg>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSpinner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSpinner, decorators: [{
             type: Component,
             args: [{ selector: 'wr-spinner', encapsulation: ViewEncapsulation.None, host: {
                         role: 'status',

package/fesm2022/ngwr-splash-cursor.mjs

@@ -951,10 +951,10 @@ class WrSplashCursor {
                 onCleanup(teardown);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSplashCursor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: WrSplashCursor, isStandalone: true, selector: "wr-splash-cursor", inputs: { fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, simResolution: { classPropertyName: "simResolution", publicName: "simResolution", isSignal: true, isRequired: false, transformFunction: null }, dyeResolution: { classPropertyName: "dyeResolution", publicName: "dyeResolution", isSignal: true, isRequired: false, transformFunction: null }, densityDissipation: { classPropertyName: "densityDissipation", publicName: "densityDissipation", isSignal: true, isRequired: false, transformFunction: null }, velocityDissipation: { classPropertyName: "velocityDissipation", publicName: "velocityDissipation", isSignal: true, isRequired: false, transformFunction: null }, pressure: { classPropertyName: "pressure", publicName: "pressure", isSignal: true, isRequired: false, transformFunction: null }, pressureIterations: { classPropertyName: "pressureIterations", publicName: "pressureIterations", isSignal: true, isRequired: false, transformFunction: null }, curl: { classPropertyName: "curl", publicName: "curl", isSignal: true, isRequired: false, transformFunction: null }, splatRadius: { classPropertyName: "splatRadius", publicName: "splatRadius", isSignal: true, isRequired: false, transformFunction: null }, splatForce: { classPropertyName: "splatForce", publicName: "splatForce", isSignal: true, isRequired: false, transformFunction: null }, shading: { classPropertyName: "shading", publicName: "shading", isSignal: true, isRequired: false, transformFunction: null }, colorUpdateSpeed: { classPropertyName: "colorUpdateSpeed", publicName: "colorUpdateSpeed", isSignal: true, isRequired: false, transformFunction: null }, rainbow: { classPropertyName: "rainbow", publicName: "rainbow", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-splash-cursor--contained": "!fullscreen()" }, classAttribute: "wr-splash-cursor" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: '<canvas #canvas class="wr-splash-cursor__canvas"></canvas>', isInline: true, styles: [".wr-splash-cursor{position:fixed;inset:0;z-index:50;display:block;pointer-events:none}.wr-splash-cursor__canvas{display:block;width:100vw;height:100vh}.wr-splash-cursor--contained{position:absolute;z-index:0}.wr-splash-cursor--contained .wr-splash-cursor__canvas{width:100%;height:100%}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSplashCursor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: WrSplashCursor, isStandalone: true, selector: "wr-splash-cursor", inputs: { fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, simResolution: { classPropertyName: "simResolution", publicName: "simResolution", isSignal: true, isRequired: false, transformFunction: null }, dyeResolution: { classPropertyName: "dyeResolution", publicName: "dyeResolution", isSignal: true, isRequired: false, transformFunction: null }, densityDissipation: { classPropertyName: "densityDissipation", publicName: "densityDissipation", isSignal: true, isRequired: false, transformFunction: null }, velocityDissipation: { classPropertyName: "velocityDissipation", publicName: "velocityDissipation", isSignal: true, isRequired: false, transformFunction: null }, pressure: { classPropertyName: "pressure", publicName: "pressure", isSignal: true, isRequired: false, transformFunction: null }, pressureIterations: { classPropertyName: "pressureIterations", publicName: "pressureIterations", isSignal: true, isRequired: false, transformFunction: null }, curl: { classPropertyName: "curl", publicName: "curl", isSignal: true, isRequired: false, transformFunction: null }, splatRadius: { classPropertyName: "splatRadius", publicName: "splatRadius", isSignal: true, isRequired: false, transformFunction: null }, splatForce: { classPropertyName: "splatForce", publicName: "splatForce", isSignal: true, isRequired: false, transformFunction: null }, shading: { classPropertyName: "shading", publicName: "shading", isSignal: true, isRequired: false, transformFunction: null }, colorUpdateSpeed: { classPropertyName: "colorUpdateSpeed", publicName: "colorUpdateSpeed", isSignal: true, isRequired: false, transformFunction: null }, rainbow: { classPropertyName: "rainbow", publicName: "rainbow", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-splash-cursor--contained": "!fullscreen()" }, classAttribute: "wr-splash-cursor" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: '<canvas #canvas class="wr-splash-cursor__canvas"></canvas>', isInline: true, styles: [".wr-splash-cursor{position:fixed;inset:0;z-index:50;display:block;pointer-events:none}.wr-splash-cursor__canvas{display:block;width:100vw;height:100vh}.wr-splash-cursor--contained{position:absolute;z-index:0}.wr-splash-cursor--contained .wr-splash-cursor__canvas{width:100%;height:100%}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSplashCursor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSplashCursor, decorators: [{
             type: Component,
             args: [{ selector: 'wr-splash-cursor', template: '<canvas #canvas class="wr-splash-cursor__canvas"></canvas>', encapsulation: ViewEncapsulation.None, host: {
                         class: 'wr-splash-cursor',

package/fesm2022/ngwr-split-text.mjs

@@ -184,10 +184,10 @@ class WrSplitText {
             };
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSplitText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrSplitText, isStandalone: true, selector: "wr-split-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, splitType: { classPropertyName: "splitType", publicName: "splitType", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: false, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null }, rootMargin: { classPropertyName: "rootMargin", publicName: "rootMargin", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { animationComplete: "animationComplete" }, host: { properties: { "style.text-align": "textAlign()" }, classAttribute: "wr-split-text" }, ngImport: i0, template: "@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-split-text__piece\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-split-text__space\">{{ p.text }}</span>\n  }\n}\n", styles: [".wr-split-text{display:inline-block;overflow:hidden;padding-bottom:.15em;margin-bottom:-.15em;white-space:normal;overflow-wrap:break-word;will-change:transform,opacity}.wr-split-text__piece{display:inline-block;will-change:transform,opacity}.wr-split-text__space{display:inline;white-space:pre}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSplitText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrSplitText, isStandalone: true, selector: "wr-split-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, splitType: { classPropertyName: "splitType", publicName: "splitType", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: false, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null }, rootMargin: { classPropertyName: "rootMargin", publicName: "rootMargin", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { animationComplete: "animationComplete" }, host: { properties: { "style.text-align": "textAlign()" }, classAttribute: "wr-split-text" }, ngImport: i0, template: "@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-split-text__piece\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-split-text__space\">{{ p.text }}</span>\n  }\n}\n", styles: [".wr-split-text{display:inline-block;overflow:hidden;padding-bottom:.15em;margin-bottom:-.15em;white-space:normal;overflow-wrap:break-word;will-change:transform,opacity}.wr-split-text__piece{display:inline-block;will-change:transform,opacity}.wr-split-text__space{display:inline;white-space:pre}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSplitText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSplitText, decorators: [{
             type: Component,
             args: [{ selector: 'wr-split-text', encapsulation: ViewEncapsulation.None, host: { class: 'wr-split-text', '[style.text-align]': 'textAlign()' }, template: "@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-split-text__piece\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-split-text__space\">{{ p.text }}</span>\n  }\n}\n", styles: [".wr-split-text{display:inline-block;overflow:hidden;padding-bottom:.15em;margin-bottom:-.15em;white-space:normal;overflow-wrap:break-word;will-change:transform,opacity}.wr-split-text__piece{display:inline-block;will-change:transform,opacity}.wr-split-text__space{display:inline;white-space:pre}\n"] }]
         }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], splitType: [{ type: i0.Input, args: [{ isSignal: true, alias: "splitType", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], easing: [{ type: i0.Input, args: [{ isSignal: true, alias: "easing", required: false }] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }], threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], rootMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootMargin", required: false }] }], textAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "textAlign", required: false }] }], animationComplete: [{ type: i0.Output, args: ["animationComplete"] }] } });

package/fesm2022/ngwr-splitter.mjs

@@ -109,10 +109,10 @@ class WrSplitter {
         event.preventDefault();
         this.position.set(clamp(next, this.minPosition(), this.maxPosition()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSplitter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrSplitter, isStandalone: true, selector: "wr-splitter", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, minPosition: { classPropertyName: "minPosition", publicName: "minPosition", isSignal: true, isRequired: false, transformFunction: null }, maxPosition: { classPropertyName: "maxPosition", publicName: "maxPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { position: "positionChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div class=\"wr-splitter__pane wr-splitter__pane--start\" [style.flex-basis]=\"startStyle()\">\n  <ng-content select=\"[wrSplitterStart]\" />\n</div>\n\n<!-- Roving focus + arrow keys for keyboard resizing. -->\n<div\n  class=\"wr-splitter__divider\"\n  role=\"separator\"\n  [attr.aria-orientation]=\"orientation() === 'horizontal' ? 'vertical' : 'horizontal'\"\n  [attr.aria-valuemin]=\"minPosition()\"\n  [attr.aria-valuemax]=\"maxPosition()\"\n  [attr.aria-valuenow]=\"position()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <span class=\"wr-splitter__handle\" aria-hidden=\"true\"></span>\n</div>\n\n<div class=\"wr-splitter__pane wr-splitter__pane--end\" [style.flex-basis]=\"endStyle()\">\n  <ng-content select=\"[wrSplitterEnd]\" />\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSplitter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrSplitter, isStandalone: true, selector: "wr-splitter", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, minPosition: { classPropertyName: "minPosition", publicName: "minPosition", isSignal: true, isRequired: false, transformFunction: null }, maxPosition: { classPropertyName: "maxPosition", publicName: "maxPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { position: "positionChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div class=\"wr-splitter__pane wr-splitter__pane--start\" [style.flex-basis]=\"startStyle()\">\n  <ng-content select=\"[wrSplitterStart]\" />\n</div>\n\n<!-- Roving focus + arrow keys for keyboard resizing. -->\n<div\n  class=\"wr-splitter__divider\"\n  role=\"separator\"\n  [attr.aria-orientation]=\"orientation() === 'horizontal' ? 'vertical' : 'horizontal'\"\n  [attr.aria-valuemin]=\"minPosition()\"\n  [attr.aria-valuemax]=\"maxPosition()\"\n  [attr.aria-valuenow]=\"position()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <span class=\"wr-splitter__handle\" aria-hidden=\"true\"></span>\n</div>\n\n<div class=\"wr-splitter__pane wr-splitter__pane--end\" [style.flex-basis]=\"endStyle()\">\n  <ng-content select=\"[wrSplitterEnd]\" />\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSplitter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSplitter, decorators: [{
             type: Component,
             args: [{ selector: 'wr-splitter', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<div class=\"wr-splitter__pane wr-splitter__pane--start\" [style.flex-basis]=\"startStyle()\">\n  <ng-content select=\"[wrSplitterStart]\" />\n</div>\n\n<!-- Roving focus + arrow keys for keyboard resizing. -->\n<div\n  class=\"wr-splitter__divider\"\n  role=\"separator\"\n  [attr.aria-orientation]=\"orientation() === 'horizontal' ? 'vertical' : 'horizontal'\"\n  [attr.aria-valuemin]=\"minPosition()\"\n  [attr.aria-valuemax]=\"maxPosition()\"\n  [attr.aria-valuenow]=\"position()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <span class=\"wr-splitter__handle\" aria-hidden=\"true\"></span>\n</div>\n\n<div class=\"wr-splitter__pane wr-splitter__pane--end\" [style.flex-basis]=\"endStyle()\">\n  <ng-content select=\"[wrSplitterEnd]\" />\n</div>\n" }]
         }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }, { type: i0.Output, args: ["positionChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], minPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "minPosition", required: false }] }], maxPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPosition", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });

package/fesm2022/ngwr-spotlight-card.mjs

@@ -44,10 +44,10 @@ class WrSpotlightCard {
         host.style.setProperty('--wr-spotlight-x', `${event.clientX - rect.left}px`);
         host.style.setProperty('--wr-spotlight-y', `${event.clientY - rect.top}px`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSpotlightCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrSpotlightCard, isStandalone: true, selector: "wr-spotlight-card", inputs: { spotlightColor: { classPropertyName: "spotlightColor", publicName: "spotlightColor", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousemove": "onMouseMove($event)" }, properties: { "style.--wr-spotlight-color": "spotlightColor()", "style.--wr-spotlight-radius": "radius() + \"%\"" }, classAttribute: "wr-spotlight-card" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".wr-spotlight-card{--wr-spotlight-x: 50%;--wr-spotlight-y: 50%;--wr-spotlight-color: rgba(var(--wr-color-dark-rgb), .08);position:relative;display:block;border-radius:1.5rem;border:1px solid var(--wr-color-light);background-color:var(--wr-color-white);padding:2rem;overflow:hidden;color:var(--wr-color-dark)}.wr-spotlight-card:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at var(--wr-spotlight-x) var(--wr-spotlight-y),var(--wr-spotlight-color),transparent var(--wr-spotlight-radius, 80%));opacity:0;transition:opacity .5s ease;pointer-events:none}.wr-spotlight-card:hover:before,.wr-spotlight-card:focus-within:before{opacity:.6}[data-theme=dark] .wr-spotlight-card{--wr-spotlight-color: rgb(255 255 255 / 25%)}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSpotlightCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrSpotlightCard, isStandalone: true, selector: "wr-spotlight-card", inputs: { spotlightColor: { classPropertyName: "spotlightColor", publicName: "spotlightColor", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousemove": "onMouseMove($event)" }, properties: { "style.--wr-spotlight-color": "spotlightColor()", "style.--wr-spotlight-radius": "radius() + \"%\"" }, classAttribute: "wr-spotlight-card" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".wr-spotlight-card{--wr-spotlight-x: 50%;--wr-spotlight-y: 50%;--wr-spotlight-color: rgba(var(--wr-color-dark-rgb), .08);position:relative;display:block;border-radius:1.5rem;border:1px solid var(--wr-color-light);background-color:var(--wr-color-white);padding:2rem;overflow:hidden;color:var(--wr-color-dark)}.wr-spotlight-card:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at var(--wr-spotlight-x) var(--wr-spotlight-y),var(--wr-spotlight-color),transparent var(--wr-spotlight-radius, 80%));opacity:0;transition:opacity .5s ease;pointer-events:none}.wr-spotlight-card:hover:before,.wr-spotlight-card:focus-within:before{opacity:.6}[data-theme=dark] .wr-spotlight-card{--wr-spotlight-color: rgb(255 255 255 / 25%)}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSpotlightCard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSpotlightCard, decorators: [{
             type: Component,
             args: [{ selector: 'wr-spotlight-card', template: '<ng-content />', encapsulation: ViewEncapsulation.None, host: {
                         class: 'wr-spotlight-card',
@@ -119,10 +119,10 @@ class WrSpotlight {
         host.style.setProperty('--wr-spotlight-x', this.resetX());
         host.style.setProperty('--wr-spotlight-y', this.resetY());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSpotlight, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: WrSpotlight, isStandalone: true, selector: "[wrSpotlight]", inputs: { resetX: { classPropertyName: "resetX", publicName: "resetX", isSignal: true, isRequired: false, transformFunction: null }, resetY: { classPropertyName: "resetY", publicName: "resetY", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointermove": "onMove($event)", "pointerleave": "onLeave()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSpotlight, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: WrSpotlight, isStandalone: true, selector: "[wrSpotlight]", inputs: { resetX: { classPropertyName: "resetX", publicName: "resetX", isSignal: true, isRequired: false, transformFunction: null }, resetY: { classPropertyName: "resetY", publicName: "resetY", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointermove": "onMove($event)", "pointerleave": "onLeave()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSpotlight, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSpotlight, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrSpotlight]',

package/fesm2022/ngwr-squircle.mjs

@@ -267,10 +267,10 @@ class WrSquircle {
         host.style.removeProperty('--wr-squircle-border-width');
         host.style.removeProperty('--wr-squircle-border-color');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSquircle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: WrSquircle, isStandalone: true, selector: "[wrSquircle]", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, smoothing: { classPropertyName: "smoothing", publicName: "smoothing", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, borderWidth: { classPropertyName: "borderWidth", publicName: "borderWidth", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, corners: { classPropertyName: "corners", publicName: "corners", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enabled: "enabledChange", borderWidth: "borderWidthChange", borderColor: "borderColorChange", corners: "cornersChange" }, host: { properties: { "class.wr-squircle--bordered": "borderWidth() > 0 && enabled()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSquircle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: WrSquircle, isStandalone: true, selector: "[wrSquircle]", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, smoothing: { classPropertyName: "smoothing", publicName: "smoothing", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, borderWidth: { classPropertyName: "borderWidth", publicName: "borderWidth", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, corners: { classPropertyName: "corners", publicName: "corners", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enabled: "enabledChange", borderWidth: "borderWidthChange", borderColor: "borderColorChange", corners: "cornersChange" }, host: { properties: { "class.wr-squircle--bordered": "borderWidth() > 0 && enabled()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSquircle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSquircle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrSquircle]',
@@ -298,10 +298,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * @see https://ngwr.dev/components/squircle
  */
 class WrSquircleHost {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSquircleHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: WrSquircleHost, isStandalone: true, selector: "wr-squircle", host: { classAttribute: "wr-squircle" }, hostDirectives: [{ directive: WrSquircle, inputs: ["radius", "radius", "smoothing", "smoothing", "borderWidth", "borderWidth", "borderColor", "borderColor"] }], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSquircleHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: WrSquircleHost, isStandalone: true, selector: "wr-squircle", host: { classAttribute: "wr-squircle" }, hostDirectives: [{ directive: WrSquircle, inputs: ["radius", "radius", "smoothing", "smoothing", "borderWidth", "borderWidth", "borderColor", "borderColor"] }], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSquircleHost, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSquircleHost, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-squircle',

package/fesm2022/ngwr-star-border.mjs

@@ -51,10 +51,10 @@ class WrStarBorder {
             parts.push('wr-star-border--single');
         return parts.join(' ');
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrStarBorder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrStarBorder, isStandalone: true, selector: "wr-star-border, [wr-star-border]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, rays: { classPropertyName: "rays", publicName: "rays", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.--wr-star-border-color": "color()", "style.--wr-star-border-speed": "speed() + \"s\"", "style.padding": "thickness() + \"px 0\"" } }, ngImport: i0, template: "<span class=\"wr-star-border__ray wr-star-border__ray--bottom\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__ray wr-star-border__ray--top\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__inner\"><ng-content /></span>\n", styles: [".wr-star-border{--wr-star-border-color: var(--wr-color-primary);--wr-star-border-speed: 6s;--wr-star-border-radius: 20px;--wr-star-border-stop: 16%;--wr-star-border-opacity: 1;display:inline-block;position:relative;border:0;background:transparent;border-radius:var(--wr-star-border-radius);overflow:hidden;cursor:inherit}.wr-star-border__ray{position:absolute;display:block;width:300%;height:50%;opacity:var(--wr-star-border-opacity);border-radius:50%;background:radial-gradient(circle,var(--wr-star-border-color),transparent var(--wr-star-border-stop));animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate;z-index:0}.wr-star-border__ray--bottom{bottom:-12px;right:-250%}.wr-star-border__ray--top{top:-12px;left:-250%;animation-name:wr-star-border-top}.wr-star-border--single .wr-star-border__ray--top{display:none}.wr-star-border--hover .wr-star-border__ray{opacity:0;animation:none}.wr-star-border--hover:hover .wr-star-border__ray{animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate}.wr-star-border--hover:hover .wr-star-border__ray--top{animation-name:wr-star-border-top}.wr-star-border__inner{position:relative;display:block;border:1px solid var(--wr-color-light);background:var(--wr-color-white);color:var(--wr-color-dark);font-size:1rem;text-align:center;padding:1rem 1.625rem;border-radius:var(--wr-star-border-radius);z-index:1}[data-theme=dark] .wr-star-border{--wr-star-border-color: #ffffff;--wr-star-border-stop: 10%;--wr-star-border-opacity: .7}@keyframes wr-star-border-bottom{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}@keyframes wr-star-border-top{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@media(prefers-reduced-motion:reduce){.wr-star-border__ray{animation:none!important;opacity:0!important}}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStarBorder, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrStarBorder, isStandalone: true, selector: "wr-star-border, [wr-star-border]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, rays: { classPropertyName: "rays", publicName: "rays", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.--wr-star-border-color": "color()", "style.--wr-star-border-speed": "speed() + \"s\"", "style.padding": "thickness() + \"px 0\"" } }, ngImport: i0, template: "<span class=\"wr-star-border__ray wr-star-border__ray--bottom\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__ray wr-star-border__ray--top\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__inner\"><ng-content /></span>\n", styles: [".wr-star-border{--wr-star-border-color: var(--wr-color-primary);--wr-star-border-speed: 6s;--wr-star-border-radius: 20px;--wr-star-border-stop: 16%;--wr-star-border-opacity: 1;display:inline-block;position:relative;border:0;background:transparent;border-radius:var(--wr-star-border-radius);overflow:hidden;cursor:inherit}.wr-star-border__ray{position:absolute;display:block;width:300%;height:50%;opacity:var(--wr-star-border-opacity);border-radius:50%;background:radial-gradient(circle,var(--wr-star-border-color),transparent var(--wr-star-border-stop));animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate;z-index:0}.wr-star-border__ray--bottom{bottom:-12px;right:-250%}.wr-star-border__ray--top{top:-12px;left:-250%;animation-name:wr-star-border-top}.wr-star-border--single .wr-star-border__ray--top{display:none}.wr-star-border--hover .wr-star-border__ray{opacity:0;animation:none}.wr-star-border--hover:hover .wr-star-border__ray{animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate}.wr-star-border--hover:hover .wr-star-border__ray--top{animation-name:wr-star-border-top}.wr-star-border__inner{position:relative;display:block;border:1px solid var(--wr-color-light);background:var(--wr-color-white);color:var(--wr-color-dark);font-size:1rem;text-align:center;padding:1rem 1.625rem;border-radius:var(--wr-star-border-radius);z-index:1}[data-theme=dark] .wr-star-border{--wr-star-border-color: #ffffff;--wr-star-border-stop: 10%;--wr-star-border-opacity: .7}@keyframes wr-star-border-bottom{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}@keyframes wr-star-border-top{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@media(prefers-reduced-motion:reduce){.wr-star-border__ray{animation:none!important;opacity:0!important}}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrStarBorder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStarBorder, decorators: [{
             type: Component,
             args: [{ selector: 'wr-star-border, [wr-star-border]', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',

package/fesm2022/ngwr-statistic.mjs

@@ -63,10 +63,10 @@ class WrStatistic {
         return `${sign}${d}${this.deltaSuffix()}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "deltaText" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrStatistic, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrStatistic, isStandalone: true, selector: "wr-statistic", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaSuffix: { classPropertyName: "deltaSuffix", publicName: "deltaSuffix", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-statistic" }, ngImport: i0, template: "@if (label()) {\n  <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n  @if (prefix()) {\n    <span class=\"wr-statistic__prefix\">{{ prefix() }}</span>\n  }\n  <span class=\"wr-statistic__number\">{{ value() ?? '\u2014' }}</span>\n  @if (suffix()) {\n    <span class=\"wr-statistic__suffix\">{{ suffix() }}</span>\n  }\n</div>\n@if (hasDelta()) {\n  <div [class]=\"`wr-statistic__delta wr-statistic__delta--${deltaDirection()}`\">\n    @if (deltaDirection() === 'up') {\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <path d=\"M5 1 L9 8 L1 8 Z\" fill=\"currentColor\" />\n      </svg>\n    } @else if (deltaDirection() === 'down') {\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <path d=\"M5 9 L9 2 L1 2 Z\" fill=\"currentColor\" />\n      </svg>\n    }\n    <span>{{ deltaText() }}</span>\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStatistic, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrStatistic, isStandalone: true, selector: "wr-statistic", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaSuffix: { classPropertyName: "deltaSuffix", publicName: "deltaSuffix", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-statistic" }, ngImport: i0, template: "@if (label()) {\n  <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n  @if (prefix()) {\n    <span class=\"wr-statistic__prefix\">{{ prefix() }}</span>\n  }\n  <span class=\"wr-statistic__number\">{{ value() ?? '\u2014' }}</span>\n  @if (suffix()) {\n    <span class=\"wr-statistic__suffix\">{{ suffix() }}</span>\n  }\n</div>\n@if (hasDelta()) {\n  <div [class]=\"`wr-statistic__delta wr-statistic__delta--${deltaDirection()}`\">\n    @if (deltaDirection() === 'up') {\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <path d=\"M5 1 L9 8 L1 8 Z\" fill=\"currentColor\" />\n      </svg>\n    } @else if (deltaDirection() === 'down') {\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <path d=\"M5 9 L9 2 L1 2 Z\" fill=\"currentColor\" />\n      </svg>\n    }\n    <span>{{ deltaText() }}</span>\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrStatistic, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStatistic, decorators: [{
             type: Component,
             args: [{ selector: 'wr-statistic', encapsulation: ViewEncapsulation.None, host: { class: 'wr-statistic' }, template: "@if (label()) {\n  <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n  @if (prefix()) {\n    <span class=\"wr-statistic__prefix\">{{ prefix() }}</span>\n  }\n  <span class=\"wr-statistic__number\">{{ value() ?? '\u2014' }}</span>\n  @if (suffix()) {\n    <span class=\"wr-statistic__suffix\">{{ suffix() }}</span>\n  }\n</div>\n@if (hasDelta()) {\n  <div [class]=\"`wr-statistic__delta wr-statistic__delta--${deltaDirection()}`\">\n    @if (deltaDirection() === 'up') {\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <path d=\"M5 1 L9 8 L1 8 Z\" fill=\"currentColor\" />\n      </svg>\n    } @else if (deltaDirection() === 'down') {\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <path d=\"M5 9 L9 2 L1 2 Z\" fill=\"currentColor\" />\n      </svg>\n    }\n    <span>{{ deltaText() }}</span>\n  </div>\n}\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], deltaSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaSuffix", required: false }] }] } });
@@ -204,10 +204,10 @@ class WrStatisticCountdown {
             this.countdownEnd.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrStatisticCountdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrStatisticCountdown, isStandalone: true, selector: "wr-statistic-countdown", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, endText: { classPropertyName: "endText", publicName: "endText", isSignal: true, isRequired: false, transformFunction: null }, tickMs: { classPropertyName: "tickMs", publicName: "tickMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { countdownEnd: "countdownEnd" }, host: { classAttribute: "wr-statistic" }, ngImport: i0, template: "@if (label()) {\n  <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n  <span class=\"wr-statistic__number\">{{ display() }}</span>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStatisticCountdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrStatisticCountdown, isStandalone: true, selector: "wr-statistic-countdown", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, endText: { classPropertyName: "endText", publicName: "endText", isSignal: true, isRequired: false, transformFunction: null }, tickMs: { classPropertyName: "tickMs", publicName: "tickMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { countdownEnd: "countdownEnd" }, host: { classAttribute: "wr-statistic" }, ngImport: i0, template: "@if (label()) {\n  <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n  <span class=\"wr-statistic__number\">{{ display() }}</span>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrStatisticCountdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStatisticCountdown, decorators: [{
             type: Component,
             args: [{ selector: 'wr-statistic-countdown', encapsulation: ViewEncapsulation.None, host: { class: 'wr-statistic' }, template: "@if (label()) {\n  <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n  <span class=\"wr-statistic__number\">{{ display() }}</span>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], endText: [{ type: i0.Input, args: [{ isSignal: true, alias: "endText", required: false }] }], tickMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickMs", required: false }] }], countdownEnd: [{ type: i0.Output, args: ["countdownEnd"] }] } });

package/fesm2022/ngwr-stepper.mjs

@@ -54,10 +54,10 @@ class WrStep {
     stepper = inject(WR_STEPPER);
     isActive = computed(() => this._index() === this.stepper.active(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrStep, isStandalone: true, selector: "wr-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-step--active": "isActive()" }, classAttribute: "wr-step" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrStep, isStandalone: true, selector: "wr-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-step--active": "isActive()" }, classAttribute: "wr-step" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrStep, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStep, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-step',
@@ -104,12 +104,21 @@ class WrStepper {
     ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     /** Lock steps after the latest completed one. @default false */
     linear = input(false, { ...(ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Drop a horizontal stepper to a vertical layout when its own box is too
+     * narrow for the row (a container query on its own width, not the
+     * viewport — so it adapts inside a narrow column or side panel). No effect
+     * when `orientation` is already `vertical`. @default false
+     */
+    responsive = input(false, { ...(ngDevMode ? { debugName: "responsive" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     steps = contentChildren(WrStep, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const parts = ['wr-stepper', `wr-stepper--${this.orientation()}`];
         if (this.linear())
             parts.push('wr-stepper--linear');
+        if (this.responsive())
+            parts.push('wr-stepper--responsive');
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
@@ -158,8 +167,8 @@ class WrStepper {
     prev() {
         this.goTo(this.active() - 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrStepper, isStandalone: true, selector: "wr-stepper", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { properties: { "class": "classes()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrStepper, isStandalone: true, selector: "wr-stepper", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { properties: { "class": "classes()" } }, providers: [
             {
                 provide: WR_STEPPER,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
@@ -167,7 +176,7 @@ class WrStepper {
             },
         ], queries: [{ propertyName: "steps", predicate: WrStep, isSignal: true }], ngImport: i0, template: "<ol class=\"wr-stepper__headers\" role=\"list\">\n  @for (step of steps(); track $index) {\n    <li\n      class=\"wr-stepper__header\"\n      [class.wr-stepper__header--active]=\"$index === active()\"\n      [class.wr-stepper__header--completed]=\"isCompleted($index)\"\n      [class.wr-stepper__header--reachable]=\"isReachable($index)\"\n      [class.wr-stepper__header--disabled]=\"step.disabled()\"\n    >\n      <button\n        type=\"button\"\n        class=\"wr-stepper__header-button\"\n        [disabled]=\"!isReachable($index) || step.disabled()\"\n        [attr.aria-current]=\"$index === active() ? 'step' : null\"\n        (click)=\"onHeaderClick($index)\"\n      >\n        <span class=\"wr-stepper__indicator\" aria-hidden=\"true\">\n          @if (isCompleted($index)) {\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\">\n              <path\n                d=\"M3 7.5 L6 10.5 L11 4.5\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.75\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          } @else {\n            {{ $index + 1 }}\n          }\n        </span>\n        <span class=\"wr-stepper__label\">\n          {{ step.label() }}\n          @if (step.optional()) {\n            <small class=\"wr-stepper__optional\">optional</small>\n          }\n          @if (step.description()) {\n            <small class=\"wr-stepper__description\">{{ step.description() }}</small>\n          }\n        </span>\n      </button>\n      @if (!$last) {\n        <span class=\"wr-stepper__connector\" aria-hidden=\"true\"></span>\n      }\n    </li>\n  }\n</ol>\n\n<div class=\"wr-stepper__body\">\n  <ng-content />\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrStepper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStepper, decorators: [{
             type: Component,
             args: [{ selector: 'wr-stepper', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, providers: [
                         {
@@ -176,7 +185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                             useExisting: forwardRef(() => WrStepper),
                         },
                     ], template: "<ol class=\"wr-stepper__headers\" role=\"list\">\n  @for (step of steps(); track $index) {\n    <li\n      class=\"wr-stepper__header\"\n      [class.wr-stepper__header--active]=\"$index === active()\"\n      [class.wr-stepper__header--completed]=\"isCompleted($index)\"\n      [class.wr-stepper__header--reachable]=\"isReachable($index)\"\n      [class.wr-stepper__header--disabled]=\"step.disabled()\"\n    >\n      <button\n        type=\"button\"\n        class=\"wr-stepper__header-button\"\n        [disabled]=\"!isReachable($index) || step.disabled()\"\n        [attr.aria-current]=\"$index === active() ? 'step' : null\"\n        (click)=\"onHeaderClick($index)\"\n      >\n        <span class=\"wr-stepper__indicator\" aria-hidden=\"true\">\n          @if (isCompleted($index)) {\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\">\n              <path\n                d=\"M3 7.5 L6 10.5 L11 4.5\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.75\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          } @else {\n            {{ $index + 1 }}\n          }\n        </span>\n        <span class=\"wr-stepper__label\">\n          {{ step.label() }}\n          @if (step.optional()) {\n            <small class=\"wr-stepper__optional\">optional</small>\n          }\n          @if (step.description()) {\n            <small class=\"wr-stepper__description\">{{ step.description() }}</small>\n          }\n        </span>\n      </button>\n      @if (!$last) {\n        <span class=\"wr-stepper__connector\" aria-hidden=\"true\"></span>\n      }\n    </li>\n  }\n</ol>\n\n<div class=\"wr-stepper__body\">\n  <ng-content />\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrStep), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrStep), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.