ngwr 5.0.3 → 6.1.1

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

package/spinner/index.d.ts

@@ -1,2 +1,23 @@
-export * from './spinner.component';
-export * from './spinner.module';
+import * as i0 from '@angular/core';
+
+/**
+ * @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
+ */
+type WrSpinnerSize = 'small' | 'large';
+
+/**
+ * NGWR spinner component.
+ *
+ * {@tutorial} [How to use wr-spinner]{@link http://ngwr.dev/docs/components/spinner
+ */
+declare class WrSpinnerComponent {
+    size: i0.InputSignal<WrSpinnerSize>;
+    get hostClasses(): Record<string, boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrSpinnerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrSpinnerComponent, "wr-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WrSpinnerComponent };

package/spinner/styles/_index.scss

@@ -12,9 +12,6 @@
 
   contain: strict;
 
-  width: 1em;
-  height: 1em;
-
   * {
     line-height: 1;
   }
@@ -31,4 +28,14 @@
       animation: dash 1.5s ease-in-out infinite;
     }
   }
+
+  &--small {
+    width: 1em;
+    height: 1em;
+  }
+
+  &--large {
+    width: 2em;
+    height: 2em;
+  }
 }

package/styles.scss

@@ -21,4 +21,8 @@
 @forward './spinner/styles';
 @forward './tag/styles';
 @forward './textarea/styles';
+@forward './select/styles';
+@forward './dropdown/styles';
+@forward './pagination/styles';
+@forward './table/styles';
 //@forward './tooltip';

package/table/index.d.ts

@@ -0,0 +1,101 @@
+import { SafeAny } from 'ngwr/cdk/types';
+import * as _angular_core from '@angular/core';
+import { AfterContentInit, EventEmitter, TemplateRef, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { WrAbstractBase } from 'ngwr/cdk';
+
+interface WrTableFilterItem<T = SafeAny> {
+    title: string;
+    value: T;
+    isSelected?: boolean;
+}
+
+interface WrTableColumn {
+    title: string;
+    sortable?: boolean;
+    filterItems?: WrTableFilterItem[];
+}
+type WrTableColumns = Record<string, WrTableColumn>;
+
+interface WrTableFilterEmit {
+    key: string;
+    items: WrTableFilterItem[];
+}
+
+declare enum WrTableOrder {
+    REMOVE = 0,
+    ASC = 1,
+    DESC = 2
+}
+
+interface WrTableOrderItem {
+    key: string;
+    order: WrTableOrder;
+}
+
+interface WrTableCellContext {
+    $implicit: unknown;
+    item: Record<string, unknown>;
+    column: WrTableColumn;
+}
+
+declare class WrTableComponent implements AfterContentInit {
+    columns: _angular_core.InputSignal<WrTableColumns>;
+    items: _angular_core.InputSignal<any[] | undefined>;
+    loading: _angular_core.InputSignal<boolean | undefined>;
+    pagination: _angular_core.InputSignal<boolean>;
+    total: _angular_core.InputSignalWithTransform<number, unknown>;
+    currentPage: _angular_core.ModelSignal<number>;
+    pageSize: _angular_core.ModelSignal<number>;
+    pageSizeOptions: _angular_core.InputSignal<number[]>;
+    ordering: _angular_core.ModelSignal<WrTableOrderItem[] | undefined>;
+    readonly filterChange: EventEmitter<WrTableFilterEmit>;
+    get styles(): Record<string, string | number>;
+    onKeypress(evt: KeyboardEvent): void;
+    private customCells;
+    private cellTemplates;
+    ngAfterContentInit(): void;
+    protected getCellTemplate(columnKey: string): TemplateRef<WrTableCellContext> | null;
+    protected hasCellTemplate(columnKey: string): boolean;
+    /**
+     * We need to pass null to save original order for keyvalue pipe
+     * https://angular.dev/api/common/KeyValuePipe?tab=description
+     */
+    protected readonly keepOrder: () => SafeAny;
+    protected getOrder(key: string): WrTableOrder;
+    protected onOrderChange(key: string): void;
+    protected onFilterChange(key: string, items: WrTableFilterItem[]): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTableComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTableComponent, "wr-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "ordering": { "alias": "ordering"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; "ordering": "orderingChange"; "filterChange": "filterChange"; }, ["customCells"], never, true, never>;
+}
+
+declare class WrTableCellDirective {
+    columnKey: _angular_core.InputSignal<string>;
+    template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTableCellDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrTableCellDirective, "[wrTableCell]", never, { "columnKey": { "alias": "wrTableCell"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class WrTableFilterComponent extends WrAbstractBase implements OnInit {
+    items: _angular_core.InputSignal<WrTableFilterItem<any>[]>;
+    readonly selectedItems: EventEmitter<WrTableFilterItem<any>[]>;
+    protected readonly search: FormControl<string | null>;
+    protected readonly filteredItems: _angular_core.WritableSignal<WrTableFilterItem<any>[]>;
+    protected get length(): number;
+    ngOnInit(): void;
+    onItemSelect(item: WrTableFilterItem): void;
+    onResetClick(): void;
+    getSelectedItems(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTableFilterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTableFilterComponent, "wr-table-filter", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; }, { "selectedItems": "selectedItems"; }, never, never, true, never>;
+}
+
+declare class WrTableSortComponent {
+    order: _angular_core.InputSignal<WrTableOrder | undefined>;
+    protected readonly TableOrder: typeof WrTableOrder;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTableSortComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTableSortComponent, "wr-table-sort", never, { "order": { "alias": "order"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WrTableCellDirective, WrTableComponent, WrTableFilterComponent, WrTableOrder, WrTableSortComponent };
+export type { WrTableCellContext, WrTableColumn, WrTableColumns, WrTableFilterEmit, WrTableFilterItem, WrTableOrderItem };

package/table/styles/_index.scss

@@ -0,0 +1,4 @@
+@forward "./vars";
+@forward "./table";
+@forward "./table-filter";
+@forward "./table-sort";

package/table/styles/table-filter.scss

@@ -0,0 +1,202 @@
+@forward "./vars";
+
+.wr-table-filter {
+  &--active {
+    --wr-table-filter-color: var(--wr-color-medium);
+    --wr-table-filter-bg: rgba(var(--wr-color-light-rgb), 0.5);
+  }
+
+  &-icon {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    width: calc(var(--wr-table-filter-size) + var(--wr-table-filter-padding));
+    height: calc(var(--wr-table-filter-size) + var(--wr-table-filter-padding));
+    padding: var(--wr-table-filter-padding);
+
+    background: var(--wr-table-filter-bg);
+    border-radius: 0.25rem;
+
+    transition: var(--wr-transition-base);
+
+    &:hover {
+      --wr-table-filter-color: var(--wr-color-primary);
+      --wr-table-filter-bg: rgba(var(--wr-color-primary-rgb), 0.125);
+
+      cursor: pointer;
+    }
+
+    &__icon {
+      --wr-icon-size: 70%;
+
+      color: var(--wr-table-filter-color);
+      transition: var(--wr-transition-base);
+    }
+  }
+
+  &-dropdown {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    background-color: var(--wr-color-white);
+    border-radius: calc(var(--wr-border-radius-base) / 2);
+    box-shadow: var(--wr-shadow-md);
+
+    overflow: hidden;
+
+    &__input {
+      display: block;
+      width: 100%;
+
+      color: var(--wr-color-dark);
+      background: var(--wr-color-white);
+      border-bottom: 1px solid var(--wr-color-light-lighter);
+
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+
+      padding: 0.375rem 0.5rem;
+
+      &::placeholder {
+        color: var(--wr-color-medium);
+        font-weight: 400;
+        font-style: italic;
+      }
+    }
+
+    &__reset {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      color: var(--wr-color-medium);
+
+      font-size: 0.75rem;
+      font-weight: 500;
+      line-height: 0.875rem;
+
+      border-top: 1px solid var(--wr-color-light-lighter);
+      padding: calc(var(--wr-grid-gutter) / 3) var(--wr-table-filter-padding);
+
+      transition: var(--wr-transition-base);
+
+      &:hover {
+        color: var(--wr-color-primary);
+        cursor: pointer;
+      }
+    }
+
+    &__body {
+      display: grid;
+      grid-template-columns: 1fr;
+      align-content: flex-start;
+
+      padding-left: var(--wr-table-filter-dd-padding);
+      padding-right: var(--wr-table-filter-dd-padding);
+
+      max-height: calc(var(--wr-table-filter-dd-max-items) * var(--wr-table-filter-dd-item-height));
+      overflow: auto;
+    }
+
+    &-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      height: 10rem;
+      width: 100%;
+
+      &__title {
+        color: var(--wr-color-medium);
+        font-size: 0.75rem;
+        font-weight: 500;
+        line-height: 0.875rem;
+      }
+    }
+
+    &-item {
+      // Checkmark variables
+      --wr-table-filter-item-color: var(--wr-color-dark);
+      --wr-table-filter-item-checkmark-color: transparent;
+      --wr-table-filter-item-checkmark-bg: transparent;
+      --wr-table-filter-item-checkmark-border-color: var(--wr-color-light-lighter);
+
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      gap: calc(var(--wr-grid-gutter) / 4);
+
+      width: 100%;
+
+      border-radius: calc(var(--wr-border-radius-base) / 2);
+
+      padding-top: var(--wr-table-filter-dd-padding);
+      padding-bottom: var(--wr-table-filter-dd-padding);
+
+      cursor: pointer;
+      user-select: none;
+      transition: var(--wr-transition-base);
+
+      &:hover {
+        --wr-table-filter-item-color: var(--wr-color-primary);
+        --wr-table-filter-item-checkmark-bg: rgba(var(--wr-color-primary-rgb), 0.25);
+        --wr-table-filter-item-checkmark-border-color: rgba(var(--wr-color-primary-rgb), 0.125);
+      }
+
+      &--selected {
+        --wr-table-filter-item-checkmark-color: var(--wr-color-white);
+        --wr-table-filter-item-checkmark-bg: var(--wr-color-primary);
+        --wr-table-filter-item-checkmark-border-color: var(--wr-color-primary);
+
+        &:hover {
+          --wr-table-filter-item-checkmark-bg: rgba(var(--wr-color-primary-rgb), 0.75);
+        }
+      }
+
+      &-check {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        width: 1rem;
+        height: 1rem;
+
+        background: var(--wr-table-filter-item-checkmark-bg);
+        border: 1px solid var(--wr-table-filter-item-checkmark-border-color);
+        border-radius: calc(var(--wr-border-radius-base) / 3);
+
+        transition: var(--wr-transition-base);
+
+        &__icon {
+          color: var(--wr-table-filter-item-checkmark-color);
+          height: 0.5rem;
+          width: 0.5rem;
+          transition: var(--wr-transition-base);
+        }
+      }
+
+      &__title {
+        display: block;
+        flex: 1;
+
+        color: var(--wr-table-filter-item-color);
+        font-size: 0.75rem;
+        font-weight: 400;
+        line-height: 0.875rem;
+
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+
+        transition: var(--wr-transition-base);
+      }
+    }
+  }
+}

package/table/styles/table-sort.scss

@@ -0,0 +1,47 @@
+@forward "./vars";
+
+.wr-table-sort {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  width: calc(var(--wr-table-sort-size) + var(--wr-table-sort-padding));
+  height: calc(var(--wr-table-sort-size) + var(--wr-table-sort-padding));
+  padding: var(--wr-table-sort-padding);
+
+  background: var(--wr-table-sort-bg);
+  border-radius: 0.25rem;
+
+  transition: var(--wr-transition-base);
+
+  &:hover {
+    --wr-table-sort-color: var(--wr-color-primary);
+    --wr-table-sort-bg: rgba(var(--wr-color-primary-rgb), 0.125);
+
+    cursor: pointer;
+  }
+
+  &--asc,
+  &--desc {
+    --wr-table-sort-color: var(--wr-color-medium);
+    --wr-table-sort-bg: rgba(var(--wr-color-light-rgb), 0.5);
+  }
+
+  &--asc {
+    --wr-table-sort-rotate: 0deg;
+  }
+
+  &--desc {
+    --wr-table-sort-rotate: 180deg;
+  }
+
+  &__icon {
+    --wr-icon-size: var(--wr-table-sort-size);
+
+    color: var(--wr-table-sort-color);
+
+    transition: var(--wr-transition-base);
+    transform: rotate(var(--wr-table-sort-rotate));
+  }
+}