ngwr 5.0.3 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "5.0.3",
+  "version": "6.0.0",
   "license": "MIT",
   "description": "NGWR – Angular UI components library",
   "author": "Roman Khegay <rk@garuna.dev> (https://garuna.dev)",
@@ -84,6 +84,18 @@
     "./textarea/styles": {
       "sass": "./textarea/styles/_index.scss"
     },
+    "./select/styles": {
+      "sass": "./select/styles/_index.scss"
+    },
+    "./pagination/styles": {
+      "sass": "./pagination/styles/_index.scss"
+    },
+    "./dropdown/styles": {
+      "sass": "./dropdown/styles/_index.scss"
+    },
+    "./table/styles": {
+      "sass": "./table/styles/_index.scss"
+    },
     "./package.json": {
       "default": "./package.json"
     },
@@ -91,6 +103,10 @@
       "types": "./alert/index.d.ts",
       "default": "./fesm2022/ngwr-alert.mjs"
     },
+    "./avatar": {
+      "types": "./avatar/index.d.ts",
+      "default": "./fesm2022/ngwr-avatar.mjs"
+    },
     "./button": {
       "types": "./button/index.d.ts",
       "default": "./fesm2022/ngwr-button.mjs"
@@ -99,10 +115,6 @@
       "types": "./cdk/index.d.ts",
       "default": "./fesm2022/ngwr-cdk.mjs"
     },
-    "./avatar": {
-      "types": "./avatar/index.d.ts",
-      "default": "./fesm2022/ngwr-avatar.mjs"
-    },
     "./checkbox": {
       "types": "./checkbox/index.d.ts",
       "default": "./fesm2022/ngwr-checkbox.mjs"
@@ -115,6 +127,10 @@
       "types": "./divider/index.d.ts",
       "default": "./fesm2022/ngwr-divider.mjs"
     },
+    "./dropdown": {
+      "types": "./dropdown/index.d.ts",
+      "default": "./fesm2022/ngwr-dropdown.mjs"
+    },
     "./form": {
       "types": "./form/index.d.ts",
       "default": "./fesm2022/ngwr-form.mjs"
@@ -127,6 +143,10 @@
       "types": "./input/index.d.ts",
       "default": "./fesm2022/ngwr-input.mjs"
     },
+    "./pagination": {
+      "types": "./pagination/index.d.ts",
+      "default": "./fesm2022/ngwr-pagination.mjs"
+    },
     "./pipes": {
       "types": "./pipes/index.d.ts",
       "default": "./fesm2022/ngwr-pipes.mjs"
@@ -139,6 +159,10 @@
       "types": "./qr/index.d.ts",
       "default": "./fesm2022/ngwr-qr.mjs"
     },
+    "./select": {
+      "types": "./select/index.d.ts",
+      "default": "./fesm2022/ngwr-select.mjs"
+    },
     "./skeleton": {
       "types": "./skeleton/index.d.ts",
       "default": "./fesm2022/ngwr-skeleton.mjs"
@@ -147,6 +171,10 @@
       "types": "./spinner/index.d.ts",
       "default": "./fesm2022/ngwr-spinner.mjs"
     },
+    "./table": {
+      "types": "./table/index.d.ts",
+      "default": "./fesm2022/ngwr-table.mjs"
+    },
     "./tag": {
       "types": "./tag/index.d.ts",
       "default": "./fesm2022/ngwr-tag.mjs"

package/pagination/index.d.ts

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

package/pagination/pagination.component.d.ts

@@ -0,0 +1,23 @@
+import { WrPaginationPosition } from './pagination.types';
+import * as i0 from "@angular/core";
+export declare class WrPaginationComponent {
+    currentPage: import("@angular/core").ModelSignal<number>;
+    total: import("@angular/core").InputSignalWithTransform<number, number>;
+    pageSize: import("@angular/core").ModelSignal<number>;
+    pageSizeOptions: import("@angular/core").InputSignal<number[]>;
+    showSizeChanger: import("@angular/core").InputSignalWithTransform<boolean, boolean>;
+    showTotal: import("@angular/core").InputSignalWithTransform<boolean, boolean>;
+    position: import("@angular/core").InputSignal<WrPaginationPosition>;
+    disabled: import("@angular/core").InputSignalWithTransform<boolean, boolean>;
+    ofLabel: import("@angular/core").InputSignal<string>;
+    get hostClasses(): Record<string, boolean>;
+    protected readonly String: StringConstructor;
+    protected readonly totalPages: import("@angular/core").Signal<number>;
+    protected readonly currentRange: import("@angular/core").Signal<string>;
+    protected readonly pages: import("@angular/core").Signal<(number | "...")[]>;
+    protected isCurrentPage(page: number): boolean;
+    protected onPageChange(page: number): void;
+    protected onPageSizeChange(size: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrPaginationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrPaginationComponent, "wr-pagination", never, { "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showSizeChanger": { "alias": "showSizeChanger"; "required": false; "isSignal": true; }; "showTotal": { "alias": "showTotal"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ofLabel": { "alias": "ofLabel"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; }, never, never, true, never>;
+}

package/pagination/pagination.types.d.ts

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

package/pagination/public-api.d.ts

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

package/pagination/styles/_index.scss

@@ -0,0 +1,60 @@
+@forward "./vars";
+
+.wr-pagination {
+  --wr-select-option-height: var(--wr-pagination-select-option-height);
+  --wr-select-padding-y: var(--wr-pagination-select-padding-y);
+  --wr-select-padding-x: var(--wr-pagination-select-padding-x);
+
+  display: block;
+
+  &-container {
+    display: flex;
+    align-items: center;
+    gap: var(--wr-pagination-gap);
+  }
+
+  &--start {
+    justify-content: flex-start;
+  }
+
+  &--center {
+    justify-content: center;
+  }
+
+  &--end {
+    justify-content: flex-end;
+  }
+
+  &--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  &-total {
+    color: var(--wr-pagination-total-color);
+    font-size: var(--wr-pagination-font-size);
+  }
+
+  &-items {
+    display: flex;
+    align-items: center;
+    gap: var(--wr-pagination-items-gap);
+  }
+
+  &-ellipsis {
+    color: var(--wr-pagination-ellipsis-color);
+    padding: 0 var(--wr-pagination-item-padding);
+    user-select: none;
+  }
+
+  wr-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--wr-pagination-item-size);
+    height: var(--wr-pagination-item-size);
+    padding: 0;
+    gap: 0;
+    text-align: center;
+  }
+}

package/pagination/styles/vars.scss

@@ -0,0 +1,14 @@
+:root {
+  --wr-pagination-gap: 1rem;
+  --wr-pagination-items-gap: 0.5rem;
+  --wr-pagination-font-size: 0.875rem;
+  --wr-pagination-total-color: var(--wr-color-medium);
+  --wr-pagination-ellipsis-color: var(--wr-color-medium);
+
+  --wr-pagination-item-size: 1.625rem;
+  --wr-pagination-item-padding: 0.5rem;
+
+  --wr-pagination-select-option-height: var(--wr-pagination-item-size);
+  --wr-pagination-select-padding-y: 0;
+  --wr-pagination-select-padding-x: 0.825rem;
+}

package/pipes/public-api.d.ts

@@ -5,4 +5,3 @@
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 export * from './new-array.pipe';
-export * from './pipes.module';

package/progress/public-api.d.ts

@@ -5,4 +5,3 @@
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 export * from './progress.component';
-export * from './progress.module';

package/qr/public-api.d.ts

@@ -5,4 +5,3 @@
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 export * from './qr.component';
-export * from './qr.module';

package/select/index.d.ts

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

package/select/public-api.d.ts

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

package/select/select-option-group.component.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+import { QueryList, AfterContentInit } from '@angular/core';
+import { WrOptionComponent } from './select-option.component';
+import * as i0 from "@angular/core";
+export declare class WrOptionGroupComponent implements AfterContentInit {
+    label: string;
+    disabled: boolean;
+    options: QueryList<WrOptionComponent>;
+    get hostClasses(): Record<string, boolean>;
+    ngAfterContentInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrOptionGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrOptionGroupComponent, "wr-option-group", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["options"], ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}

package/select/select-option.component.d.ts

@@ -0,0 +1,22 @@
+import { TemplateRef } from '@angular/core';
+import { SafeAny } from 'ngwr/cdk/types';
+import * as i0 from "@angular/core";
+export declare class WrOptionComponent {
+    value: SafeAny;
+    label?: string;
+    disabled: boolean;
+    customTemplate?: TemplateRef<SafeAny>;
+    get hostClasses(): Record<string, boolean>;
+    protected readonly context: {
+        $implicit: SafeAny;
+        option: SafeAny;
+    };
+    private readonly selectComponent;
+    get isSelected(): boolean;
+    get isHighlighted(): boolean;
+    get isFiltered(): boolean;
+    select(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrOptionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrOptionComponent, "wr-option", never, { "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["customTemplate"], never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}

package/select/select.component.d.ts

@@ -0,0 +1,63 @@
+import { QueryList, AfterContentInit, ElementRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { WrAbstractBase } from 'ngwr/cdk';
+import { SafeAny } from 'ngwr/cdk/types';
+import { WrOptionGroupComponent } from './select-option-group.component';
+import { WrOptionComponent } from './select-option.component';
+import * as i0 from "@angular/core";
+/**
+ * NGWR select component.
+ *
+ * {@tutorial} [How to use wr-select]{@link http://ngwr.dev/docs/components/select}
+ */
+export declare class WrSelectComponent extends WrAbstractBase implements ControlValueAccessor, AfterContentInit {
+    placeholder: string;
+    noItemsLabel: string;
+    multiple: boolean;
+    searchable: boolean;
+    clearable: boolean;
+    maxMultipleCount?: number;
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    searchInput?: ElementRef<HTMLInputElement>;
+    options: QueryList<WrOptionComponent>;
+    optionGroups: QueryList<WrOptionGroupComponent>;
+    get hostClasses(): Record<string, boolean>;
+    onKeyDown(event: KeyboardEvent): void;
+    onClickOutside(event: MouseEvent): void;
+    protected readonly value: import("@angular/core").WritableSignal<any>;
+    protected readonly isOpen: import("@angular/core").WritableSignal<boolean>;
+    protected readonly isFocused: import("@angular/core").WritableSignal<boolean>;
+    protected readonly isDisabled: import("@angular/core").WritableSignal<boolean>;
+    protected readonly searchValue: import("@angular/core").WritableSignal<string>;
+    protected readonly highlightedOptionIndex: import("@angular/core").WritableSignal<number>;
+    protected readonly selectedOptions: import("@angular/core").Signal<WrOptionComponent[]>;
+    protected readonly selectedLabel: import("@angular/core").Signal<any>;
+    protected readonly filteredOptions: import("@angular/core").Signal<WrOptionComponent[]>;
+    private readonly elementRef;
+    private readonly cdr;
+    get currentValue(): SafeAny;
+    get isMultiple(): boolean;
+    ngAfterContentInit(): void;
+    onChange: (value: string) => void;
+    onTouch: () => void;
+    onOptionSelect(option: WrOptionComponent): void;
+    onSearch(event: Event): void;
+    isHighlightedOption(option: WrOptionComponent): boolean;
+    isFilteredOption(option: WrOptionComponent): boolean;
+    writeValue(value: SafeAny): void;
+    registerOnChange(fn: (value: SafeAny) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    clear(event: Event): void;
+    toggle(): void;
+    private close;
+    private isSelectedOption;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrSelectComponent, "wr-select", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "noItemsLabel": { "alias": "noItemsLabel"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "maxMultipleCount": { "alias": "maxMultipleCount"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["options", "optionGroups"], ["*"], true, never>;
+    static ngAcceptInputType_multiple: unknown;
+    static ngAcceptInputType_searchable: unknown;
+    static ngAcceptInputType_clearable: unknown;
+    static ngAcceptInputType_maxMultipleCount: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}

package/select/select.types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+import { SafeAny } from 'ngwr/cdk/types';
+export interface WrSelectOption {
+    label: string;
+    value: SafeAny;
+    disabled?: boolean;
+}
+export interface WrSelectGroup {
+    label: string;
+    options: WrSelectOption[];
+    disabled?: boolean;
+}

package/select/styles/_index.scss

@@ -0,0 +1,237 @@
+@forward './vars';
+
+.wr-select {
+  position: relative;
+  width: 100%;
+
+  color: var(--wr-select-color);
+  font-size: var(--wr-select-font-size);
+  font-weight: var(--wr-select-font-weight);
+  line-height: var(--wr-select-line-height);
+
+  background-color: var(--wr-select-bg-color);
+  border: 1px solid var(--wr-select-border-color);
+  border-radius: var(--wr-select-border-radius);
+  box-shadow: var(--wr-select-box-shadow);
+
+  transition: var(--wr-transition-base);
+
+  &--disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &--focused {
+    --wr-select-border-color: var(--wr-color-primary);
+    --wr-select-box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.125);
+  }
+
+  &__trigger {
+    display: flex;
+    align-items: center;
+    padding: var(--wr-select-padding-y) var(--wr-select-padding-x);
+    cursor: pointer;
+    min-height: var(--wr-select-option-height);
+  }
+
+  &__value {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    margin-right: 8px;
+
+    &:empty::before {
+      content: attr(placeholder);
+      color: var(--wr-select-placeholder-color);
+    }
+
+    wr-tag {
+      line-height: var(--wr-select-tag-line-height);
+    }
+  }
+
+  &__arrow {
+    --wr-icon-size: 1rem;
+    transition: transform 0.2s;
+
+    .wr-select--open & {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    margin-top: 4px;
+
+    background: var(--wr-select-dropdown-bg);
+    border: 1px solid var(--wr-select-dropdown-border-color);
+    border-radius: var(--wr-select-border-radius);
+    box-shadow: var(--wr-select-dropdown-shadow);
+
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px);
+    transition: var(--wr-transition-base);
+
+    &--open {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
+    &-content {
+      max-height: var(--wr-select-dropdown-max-height);
+      overflow-y: auto;
+    }
+  }
+
+  &__counter {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 4px;
+    margin-left: auto;
+    padding: 2px 6px;
+    font-size: var(--wr-select-counter-font-size);
+    color: var(--wr-color-medium);
+    border-radius: var(--wr-select-tag-border-radius);
+  }
+
+  &__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: center;
+    width: 100%;
+
+    &-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+  }
+
+  &__tag {
+    &-remove {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: var(--wr-select-tag-line-height);
+      margin-right: -3px;
+      padding: 0;
+      font-size: 14px;
+      background: none;
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+  }
+
+  &__search-wrapper {
+    padding: var(--wr-select-padding-y) var(--wr-select-padding-x);
+    border-bottom: 1px solid var(--wr-select-border-color);
+  }
+
+  &__search {
+    flex: 1;
+    min-width: 50px;
+    border: none;
+    background: none;
+    outline: none;
+    padding: 0;
+    font-size: inherit;
+    font-family: inherit;
+    color: inherit;
+
+    &::placeholder {
+      color: var(--wr-select-placeholder-color);
+    }
+  }
+
+  &__clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0 8px 0 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: var(--wr-color-medium);
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--wr-color-dark);
+    }
+
+    wr-icon {
+      --wr-icon-size: 16px;
+    }
+
+    &--multiple {
+      margin-left: auto;
+    }
+  }
+
+  &__no-data {
+    padding: var(--wr-select-padding-y) var(--wr-select-padding-x);
+    color: var(--wr-select-placeholder-color);
+    text-align: center;
+  }
+}
+
+.wr-option {
+  display: block;
+  padding: var(--wr-select-padding-y) var(--wr-select-padding-x);
+  cursor: pointer;
+  transition: background-color 0.2s;
+  min-height: var(--wr-select-option-height);
+
+  &__content {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  &:hover:not(&--disabled) {
+    background-color: var(--wr-select-option-hover-bg);
+  }
+
+  &--selected {
+    color: var(--wr-select-option-selected-color);
+    background-color: var(--wr-select-option-selected-bg);
+  }
+
+  &--disabled {
+    color: var(--wr-select-option-disabled-color);
+    cursor: not-allowed;
+  }
+
+  &--highlighted {
+    background-color: var(--wr-select-option-hover-bg);
+  }
+
+  &--filtered {
+    display: none;
+  }
+}
+
+.wr-select-group {
+  &__label {
+    padding: var(--wr-select-padding-y) var(--wr-select-padding-x);
+    color: var(--wr-select-group-label-color);
+    font-size: var(--wr-select-group-label-font-size);
+  }
+
+  &__content {
+  }
+
+  &--disabled {
+    opacity: 0.6;
+  }
+}

package/select/styles/vars.scss

@@ -0,0 +1,32 @@
+:root {
+  --wr-select-color: var(--wr-color-dark);
+  --wr-select-placeholder-color: var(--wr-color-light);
+  --wr-select-bg-color: var(--wr-color-white);
+  --wr-select-border-color: var(--wr-color-light-lighter);
+  --wr-select-border-radius: 0.375rem;
+  --wr-select-box-shadow: none;
+  --wr-select-font-size: 0.875rem;
+  --wr-select-font-weight: 400;
+  --wr-select-line-height: 1.25rem;
+  --wr-select-padding-y: 0.375rem;
+  --wr-select-padding-x: 0.825rem;
+
+  --wr-select-dropdown-bg: var(--wr-color-white);
+  --wr-select-dropdown-border-color: var(--wr-color-light-lighter);
+  --wr-select-dropdown-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --wr-select-dropdown-max-height: 256px;
+
+  --wr-select-option-hover-bg: rgba(var(--wr-color-light-rgb), 0.2);
+  --wr-select-option-selected-color: var(--wr-color-dark);
+  --wr-select-option-selected-bg: rgba(var(--wr-color-primary-rgb), 0.1);
+  --wr-select-option-disabled-color: var(--wr-color-medium);
+  --wr-select-option-height: 32px;
+
+  --wr-select-group-label-color: var(--wr-color-medium);
+  --wr-select-group-label-font-size: 0.75rem;
+
+  --wr-select-counter-color: var(--wr-color-medium);
+  --wr-select-counter-font-size: 0.775rem;
+
+  --wr-select-tag-line-height: 0.8rem;
+}

package/skeleton/index.d.ts

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

package/spinner/index.d.ts

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

package/spinner/spinner.component.d.ts

@@ -1,3 +1,4 @@
+import { WrSpinnerSize } from './spinner.types';
 import * as i0 from "@angular/core";
 /**
  * NGWR spinner component.
@@ -5,7 +6,8 @@ import * as i0 from "@angular/core";
  * {@tutorial} [How to use wr-spinner]{@link http://ngwr.dev/docs/components/spinner
  */
 export declare class WrSpinnerComponent {
-    class: string;
+    size: import("@angular/core").InputSignal<WrSpinnerSize>;
+    get hostClasses(): Record<string, boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrSpinnerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WrSpinnerComponent, "wr-spinner", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrSpinnerComponent, "wr-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }