ngwr 5.0.3 → 6.0.0

package/spinner/spinner.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 WrSpinnerSize = 'small' | 'large';

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,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ngwr/table" />
+export * from './public-api';

package/table/public-api.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @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 './types';
+export * from './table.component';
+export * from './table-cell';
+export * from './table-filter';
+export * from './table-sort';

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));
+  }
+}

package/table/styles/table.scss

@@ -0,0 +1,232 @@
+@forward "./vars";
+
+.wr-table {
+  --ant-pagination-item-size: 1.5rem;
+  --ant-pagination-border-radius: calc(var(--wr-input-border-radius) * 0.75);
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  background: var(--wr-color-white);
+  border: 1px solid var(--wr-color-light-lighter);
+  border-radius: var(--wr-border-radius-base);
+
+  &__spinner {
+    color: var(--wr-color-primary);
+    width: 0.875rem;
+    height: 0.875rem;
+    margin-right: auto;
+  }
+
+  &-top,
+  &-bot {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(var(--wr-grid-gutter) / 2);
+    padding: var(--wr-table-padding);
+  }
+
+  &-top {
+    border-bottom: 1px solid var(--wr-color-light-lighter);
+  }
+
+  &-bot {
+    border-top: 1px solid var(--wr-color-light-lighter);
+  }
+
+  &-hint {
+    --wr-table-hint-padding: 0.125rem;
+    --wr-table-hint-color: var(--wr-color-medium);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    width: var(--wr-pagination-item-size);
+    height: var(--wr-pagination-item-size);
+
+    padding: var(--wr-table-hint-padding);
+
+    border-radius: var(--wr-btn-border-radius);
+    border: 1px solid var(--wr-color-light-lighter);
+
+    &:hover {
+      --wr-table-help-color: var(--wr-color-secondary);
+      cursor: pointer;
+    }
+
+    &__icon {
+      --wr-icon-size: calc(var(--wr-pagination-font-size) *1.2);
+
+      color: var(--wr-table-hint-color);
+      transition: var(--wr-transition-base);
+    }
+
+    &-dropdown {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+
+      gap: calc(var(--wr-grid-gutter) / 2);
+      padding: var(--wr-table-padding);
+
+      &-item {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 0.5rem;
+
+        &__title {
+          color: var(--wr-color-dark);
+          font-size: 0.875rem;
+          font-weight: 500;
+          line-height: 1rem;
+        }
+
+        &__key {
+          font-family: var(--wr-font-family-mono), monospace;
+          margin: 0 .2em;
+          padding: .15em .4em .1em;
+          font-size: 90%;
+          background: #9696960f;
+          border: 1px solid rgba(100, 100, 100, .2);
+          border-bottom-width: 2px;
+          border-radius: 3px;
+        }
+      }
+    }
+  }
+
+  &__pagination {
+    --ant-pagination-item-size: 1.5rem;
+    --ant-pagination-border-radius: calc(var(--wr-input-border-radius) * 0.75);
+  }
+
+  &-head,
+  &-body {
+    padding: var(--wr-table-padding);
+
+    &-cell {
+      width: calc(100% / var(--wr-table-columns));
+
+      &--actions {
+        width: 3rem;
+      }
+    }
+
+    &__loader {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      background: rgba(255,255,255,.6);
+      width: auto;
+      height: auto;
+      color: var(--wr-color-primary-light);
+    }
+  }
+
+  &-head {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    position: sticky;
+    z-index: 2;
+    top: 0;
+    left: 0;
+
+    &__wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      width: 100%;
+
+      background: #f3f5f8;
+      border-radius: calc(var(--wr-border-radius-base) / 2);
+    }
+
+    &-cell {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding: 0.5rem 0.5rem;
+
+      &__title {
+        color: var(--wr-color-medium);
+        font-size: 0.75rem;
+        font-weight: 600;
+        line-height: 1rem;
+
+        margin: 0 auto 0 0;
+      }
+    }
+  }
+
+  &-body {
+    display: flex;
+    flex-direction: column;
+
+    padding-top: 0;
+
+    position: relative;
+
+    &__row {
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid var(--wr-color-light-lighter);
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    &-cell {
+      color: var(--wr-color-dark);
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 1rem;
+
+      margin: 0;
+      padding: 0.5rem 0.5rem;
+    }
+  }
+
+  &-actions {
+    --wr-table-dots-color: var(--wr-color-medium);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    opacity: var(--wr-table-dots-opacity);
+
+    width: 1.375rem;
+    height: 1.375rem;
+
+    border-radius: calc(var(--wr-border-radius-base) / 2);
+    border: 1px solid var(--wr-color-light-lighter);
+
+    transition: var(--wr-transition-base);
+
+    &__icon {
+      --wr-icon-size: 1rem;
+      color: var(--wr-table-dots-color);
+      transition: var(--wr-transition-base);
+    }
+
+    &:hover {
+      --wr-table-dots-color: var(--wr-color-secondary);
+    }
+  }
+}

package/table/styles/vars.scss

@@ -0,0 +1,21 @@
+:root {
+  --wr-table-columns: 1;
+  --wr-table-padding: calc(var(--wr-grid-gutter) / 3);
+
+  // Icon variables
+  --wr-table-filter-size: 1.25rem;
+  --wr-table-filter-padding: 0.125rem;
+  --wr-table-filter-color: var(--wr-color-light);
+  --wr-table-filter-bg: transparent;
+
+  // Dropdown variables
+  --wr-table-filter-dd-padding: 0.375rem;
+  --wr-table-filter-dd-max-items: 10;
+  --wr-table-filter-dd-item-height: 2rem;
+
+  --wr-table-sort-size: 1.25rem;
+  --wr-table-sort-padding: 0.125rem;
+  --wr-table-sort-rotate: -90deg;
+  --wr-table-sort-color: var(--wr-color-light);
+  --wr-table-sort-bg: transparent;
+}

package/table/table-cell/index.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 * from './table-cell.directive';

package/table/table-cell/table-cell.directive.d.ts

@@ -0,0 +1,8 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class WrTableCellDirective {
+    columnKey: import("@angular/core").InputSignal<string>;
+    template: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrTableCellDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrTableCellDirective, "[wrTableCell]", never, { "columnKey": { "alias": "wrTableCell"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/table/table-filter/index.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 * from './table-filter.component';

package/table/table-filter/table-filter.component.d.ts

@@ -0,0 +1,18 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { WrAbstractBase } from 'ngwr/cdk';
+import { WrTableFilterItem } from '../types';
+import * as i0 from "@angular/core";
+export declare class WrTableFilterComponent extends WrAbstractBase implements OnInit {
+    items: import("@angular/core").InputSignal<WrTableFilterItem<any>[]>;
+    readonly selectedItems: EventEmitter<WrTableFilterItem<any>[]>;
+    protected readonly search: FormControl<string | null>;
+    protected readonly filteredItems: import("@angular/core").WritableSignal<WrTableFilterItem<any>[]>;
+    protected get length(): number;
+    ngOnInit(): void;
+    onItemSelect(item: WrTableFilterItem): void;
+    onResetClick(): void;
+    getSelectedItems(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrTableFilterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrTableFilterComponent, "wr-table-filter", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; }, { "selectedItems": "selectedItems"; }, never, never, true, never>;
+}

package/table/table-sort/index.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 * from './table-sort.component';

package/table/table-sort/table-sort.component.d.ts

@@ -0,0 +1,8 @@
+import { WrTableOrder } from '../types';
+import * as i0 from "@angular/core";
+export declare class WrTableSortComponent {
+    order: import("@angular/core").InputSignal<WrTableOrder | undefined>;
+    protected readonly TableOrder: typeof WrTableOrder;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrTableSortComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrTableSortComponent, "wr-table-sort", never, { "order": { "alias": "order"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/table/table.component.d.ts

@@ -0,0 +1,33 @@
+import { EventEmitter, TemplateRef, AfterContentInit } from '@angular/core';
+import { SafeAny } from 'ngwr/cdk/types';
+import { WrTableCellContext, WrTableColumns, WrTableFilterEmit, WrTableFilterItem, WrTableOrder, WrTableOrderItem } from './types';
+import * as i0 from "@angular/core";
+export declare class WrTableComponent implements AfterContentInit {
+    columns: import("@angular/core").InputSignal<WrTableColumns>;
+    items: import("@angular/core").InputSignal<any[] | undefined>;
+    loading: import("@angular/core").InputSignal<boolean | undefined>;
+    pagination: import("@angular/core").InputSignal<boolean>;
+    total: import("@angular/core").InputSignalWithTransform<number, number>;
+    currentPage: import("@angular/core").ModelSignal<number>;
+    pageSize: import("@angular/core").ModelSignal<number>;
+    pageSizeOptions: import("@angular/core").InputSignal<number[]>;
+    ordering: import("@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: i0.ɵɵFactoryDeclaration<WrTableComponent, never>;
+    static ɵcmp: i0.ɵɵ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>;
+}

package/table/types/index.d.ts

@@ -0,0 +1,6 @@
+export * from './table-columns';
+export * from './table-filter-emit';
+export * from './table-filter-item';
+export * from './table-order.enum';
+export * from './table-order-item';
+export * from './table-cell-context';

package/table/types/table-cell-context.d.ts

@@ -0,0 +1,6 @@
+import { WrTableColumn } from './table-columns';
+export interface WrTableCellContext {
+    $implicit: unknown;
+    item: Record<string, unknown>;
+    column: WrTableColumn;
+}