ngwr 6.1.1 → 7.0.0

package/styles/grid.scss

@@ -1,99 +0,0 @@
-@use 'sass:map';
-@use './maps';
-
-$columns-count: 12;
-$gap: #{var(--wr-grid-gutter)};
-
-// Helpers
-@function bp-min($name, $breakpoints: maps.$breakpoints-map) {
-  $min: map.get($breakpoints, $name);
-  @return if($min != 0, $min, null);
-}
-@function bp-max($name, $breakpoints: maps.$breakpoints-map) {
-  $max: map.get($breakpoints, $name);
-  @return if($max and $max > 0, $max - .02, null);
-}
-@function bp-infix($name, $breakpoints: maps.$breakpoints-map) {
-  @return if(bp-min($name, $breakpoints) == null, '', '-#{$name}');
-}
-@mixin media-up($name, $breakpoints: maps.$breakpoints-map) {
-  $min: bp-min($name, $breakpoints);
-  @if $min {
-    @media (min-width: $min) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-@mixin media-down($name, $breakpoints: maps.$breakpoints-map) {
-  $max: bp-max($name, $breakpoints);
-  @if $max {
-    @media (max-width: $max) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-@mixin make-container($gutter: $gap) {
-  width: 100%;
-  padding-right: calc($gap * 0.5);
-  padding-left: calc($gap * 0.5);
-  margin-left: auto;
-  margin-right: auto;
-}
-@mixin make-grid($columns: $columns-count, $breakpoints: maps.$breakpoints-map) {
-  @each $bp in map.keys($breakpoints) {
-    $infix: bp-infix($bp, $breakpoints);
-
-    @include media-up($bp, $breakpoints) {
-      @for $i from 1 through $columns {
-        .col#{$infix}-#{$i} {
-          grid-column: auto / span $i;
-        }
-      }
-    }
-  }
-}
-
-// Styles
-.container,
-.container-fluid {
-  @include make-container();
-}
-
-@each $bp, $max-width in maps.$container-widths-map {
-  .container-#{$bp} {
-    @extend .container-fluid;
-  }
-
-  @include media-up($bp, maps.$breakpoints-map) {
-    %responsive-container-#{$bp} {
-      max-width: $max-width;
-    }
-
-    $extend-breakpoint: true;
-
-    @each $name, $width in maps.$breakpoints-map {
-      @if ($extend-breakpoint) {
-        .container#{bp-infix($name, maps.$breakpoints-map)} {
-          @extend %responsive-container-#{$bp};
-        }
-
-        // Once the current breakpoint is reached, stop extending
-        @if ($bp == $name) {
-          $extend-breakpoint: false;
-        }
-      }
-    }
-  }
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat($columns-count, 1fr);
-  gap: $gap;
-
-  @include make-grid();
-}

package/styles/maps.scss

@@ -1,31 +0,0 @@
-$theme-colors-map: (
-  'primary',
-  'secondary',
-  'light',
-  'medium',
-  'dark',
-  'success',
-  'warning',
-  'danger'
-);
-$breakpoints-map: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px,
-  xga: 1600px,
-  fhd: 1920px,
-  rt: 2560px
-);
-$container-widths-map: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1320px,
-  xga: 1530px,
-  fhd: 1830px,
-  rt: 2470px
-);

package/styles/reset.scss

@@ -1,112 +0,0 @@
-:root {
-  font-size: var(--wr-font-size-base);
-  scroll-behavior: smooth;
-}
-
-html,
-body {
-  color: var(--wr-body-color);
-  background-color: var(--wr-body-bg);
-
-  font-size: var(--wr-font-size-base);
-  font-family: var(--wr-font-family-base);
-  font-weight: var(--wr-font-weight-base);
-  line-height: var(--wr-line-height-base);
-  letter-spacing: var(--wr-letter-spacing-base);
-
-  text-align: left;
-  direction: ltr;
-
-  margin: 0;
-  padding: 0;
-
-  height: 100%;
-  width: 100%;
-
-  left: 0;
-  top: 0;
-
-  -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -ms-text-size-adjust: 100%;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  vertical-align: baseline;
-}
-
-:focus {
-  outline: 0;
-}
-
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-
-a {
-  text-decoration: none;
-}
-
-ol, ul {
-  list-style: none;
-}
-
-blockquote, q {
-  quotes: none;
-
-  &:before,
-  &:after {
-    content: '';
-    content: none;
-  }
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-input[type=search]::-webkit-search-cancel-button,
-input[type=search]::-webkit-search-decoration,
-input[type=search]::-webkit-search-results-button,
-input[type=search]::-webkit-search-results-decoration {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
-input[type=search] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -webkit-box-sizing: content-box;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-}
-
-textarea {
-  overflow: auto;
-  vertical-align: top;
-  resize: vertical;
-}
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-[hidden] {
-  display: none;
-}
-
-img {
-  border: none;
-}

package/styles/variables.scss

@@ -1,72 +0,0 @@
-html {
-  color-scheme: light;
-
-  /* Fonts */
-  --wr-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-  'Noto Color Emoji';
-  --wr-font-family-mono: SFMono-Regular, Consolas, 'Liberation Mono', Courier, Menlo, Monaco, monospace;
-  --wr-font-size-base: 1rem;
-  --wr-font-weight-base: 400;
-  --wr-line-height-base: 1.5;
-  --wr-letter-spacing-base: 0;
-
-  /* Transitions */
-  --wr-transition-base: all 0.15s linear;
-  --wr-transition-short: all 0.1s linear;
-  --wr-transition-long: all 0.2s linear;
-
-  /* Borders */
-  --wr-border-radius-base: 0.625rem;
-  --wr-border-color-base: var(--wr-color-light);
-
-  /* Body */
-  --wr-body-bg: #fff;
-  --wr-body-bg-rgb: 255,255,255;
-  --wr-body-color: var(--wr-color-dark);
-
-  /* Grid */
-  --wr-grid-gutter: 1.5rem;
-
-  /* Dialog */
-  --wr-dialog-bg: #fff;
-  --wr-dialog-min-width: 20rem;
-  --wr-dialog-title-color: var(--wr-color-dark);
-  --wr-dialog-padding-x: 1rem;
-  --wr-dialog-padding-y: 1rem;
-
-  /* Divider */
-  --wr-divider-width-base: 1px;
-  --wr-divider-color-base: var(--wr-color-light);
-  --wr-divider-margin-top-base: 0.5rem;
-  --wr-divider-margin-bottom-base: 0.5rem;
-
-  /* Tag */
-  --wr-tag-padding-y: 0.25rem;
-  --wr-tag-padding-x: 0.5rem;
-  --wr-tag-border-radius-base: 0.25rem;
-  --wr-tag-font-size-base: 0.75rem;
-  --wr-tag-line-height-base: 1rem;
-  --wr-tag-font-weight-base: 600;
-  --wr-tag-rounded-padding-y: 0.25rem;
-  --wr-tag-rounded-padding-x: 0.75rem;
-  --wr-tag-rounded-border-radius: 50rem;
-
-  &.dark {
-    color-scheme: dark;
-
-    --wr-body-bg: #0c0815;
-    --wr-body-bg-rgb: 12,8,21;
-    --wr-body-color: #fff;
-
-    --wr-border-color-base: #211638;
-
-    /* Dialog */
-    --wr-dialog-bg: #18152a;
-    --wr-dialog-min-width: 20rem;
-    --wr-dialog-title-color: #fff;
-
-    /* Checkbox */
-    --wr-checkbox-color-base: var(--wr-color-white);
-  }
-}

package/table/index.d.ts

@@ -1,101 +0,0 @@
-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/table-filter.scss

@@ -1,202 +0,0 @@
-@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

@@ -1,47 +0,0 @@
-@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));
-  }
-}