feat: wr-table

projects/lib/cdk/pipes/datetime.pipe.ts

@@ -0,0 +1,34 @@
+import { formatDate } from '@angular/common';
+import { inject, Pipe, PipeTransform } from '@angular/core';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { TranslocoService } from '@jsverse/transloco';
+
+interface DateTimePipeResult {
+  date: string;
+  time: string;
+}
+
+@Pipe({
+  standalone: true,
+  name: 'datetime',
+})
+export class DatetimePipe implements PipeTransform {
+  private readonly translocoService = inject(TranslocoService);
+
+  transform(dateTime: string | number | Date): Observable<DateTimePipeResult> {
+    return this.translocoService.langChanges$.pipe(
+      map(lang => {
+        const date = formatDate(dateTime, 'dd MMMM YYYY', lang);
+        const time = formatDate(dateTime, 'HH:mm', lang);
+
+        return {
+          date,
+          time,
+        };
+      })
+    );
+  }
+}

projects/lib/cdk/pipes/index.ts

@@ -0,0 +1 @@
+export * from './datetime.pipe';

projects/lib/cdk/pipes/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

projects/lib/cdk/pipes/public-api.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 './datetime.pipe';

projects/lib/package.json

@@ -90,6 +90,9 @@
     },
     "./dropdown/styles": {
       "sass": "./dropdown/styles/_index.scss"
+    },
+    "./table/styles": {
+      "sass": "./table/styles/_index.scss"
     }
   }
 }

projects/lib/pagination/pagination.component.ts

@@ -30,7 +30,6 @@ import { WrPaginationPosition } from './pagination.types';
   standalone: true,
   imports: [WrButtonComponent, WrSelectComponent, WrOptionComponent, FormsModule],
   templateUrl: './pagination.component.html',
-  styleUrl: './pagination.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   providers: [provideWrIcons([arrowBack, arrowForward])],

projects/lib/spinner/public-api.ts

@@ -6,3 +6,4 @@
  */
 
 export * from './spinner.component';
+export * from './spinner.types';

projects/lib/spinner/spinner.component.ts

@@ -5,7 +5,9 @@
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 
-import { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, input, ViewEncapsulation } from '@angular/core';
+
+import { WrSpinnerSize } from './spinner.types';
 
 /**
  * NGWR spinner component.
@@ -21,5 +23,14 @@ import { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } fr
   encapsulation: ViewEncapsulation.None,
 })
 export class WrSpinnerComponent {
-  @HostBinding() class = 'wr-spinner';
+  size = input<WrSpinnerSize>('small');
+
+  @HostBinding('class')
+  get hostClasses(): Record<string, boolean> {
+    return {
+      'wr-spinner': true,
+      'wr-spinner--small': this.size() === 'small',
+      'wr-spinner--large': this.size() === 'large',
+    };
+  }
 }

projects/lib/spinner/spinner.types.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 type WrSpinnerSize = 'small' | 'large';

projects/lib/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;
+  }
 }

projects/lib/styles.scss

@@ -22,6 +22,7 @@
 @forward './tag/styles';
 @forward './textarea/styles';
 @forward './select/styles';
-@forward './pagination/styles';
 @forward './dropdown/styles';
+@forward './pagination/styles';
+@forward './table/styles';
 //@forward './tooltip';

projects/lib/table/index.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 './public-api';

projects/lib/table/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

projects/lib/table/public-api.ts

@@ -0,0 +1,12 @@
+/**
+ * @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';

projects/lib/table/styles/_index.scss

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

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