ngwr 0.4.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "license": "MIT",
   "description": "NGWR – Angular UI components library",
   "author": "Roman Khegay <rk@garuna.dev> (https://garuna.dev/)",
@@ -73,6 +73,14 @@
       "node": "./fesm2015/ngwr-core-decorators.mjs",
       "default": "./fesm2020/ngwr-core-decorators.mjs"
     },
+    "./core/overlay": {
+      "types": "./core/overlay/index.d.ts",
+      "esm2020": "./esm2020/core/overlay/ngwr-core-overlay.mjs",
+      "es2020": "./fesm2020/ngwr-core-overlay.mjs",
+      "es2015": "./fesm2015/ngwr-core-overlay.mjs",
+      "node": "./fesm2015/ngwr-core-overlay.mjs",
+      "default": "./fesm2020/ngwr-core-overlay.mjs"
+    },
     "./core/types": {
       "types": "./core/types/index.d.ts",
       "esm2020": "./esm2020/core/types/ngwr-core-types.mjs",
@@ -144,17 +152,25 @@
       "es2015": "./fesm2015/ngwr-tag.mjs",
       "node": "./fesm2015/ngwr-tag.mjs",
       "default": "./fesm2020/ngwr-tag.mjs"
+    },
+    "./tooltip": {
+      "types": "./tooltip/index.d.ts",
+      "esm2020": "./esm2020/tooltip/ngwr-tooltip.mjs",
+      "es2020": "./fesm2020/ngwr-tooltip.mjs",
+      "es2015": "./fesm2015/ngwr-tooltip.mjs",
+      "node": "./fesm2015/ngwr-tooltip.mjs",
+      "default": "./fesm2020/ngwr-tooltip.mjs"
     }
   },
   "dependencies": {
-    "@angular/cdk": "^14.0.0",
+    "@angular/cdk": "^15.0.0",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/animations": ">=14.0.0 <15.0.0",
-    "@angular/common": ">=14.0.0 <15.0.0",
-    "@angular/core": ">=14.0.0 <15.0.0",
-    "@angular/forms": ">=14.0.0 <15.0.0",
+    "@angular/animations": ">=14.0.0 <16.0.0",
+    "@angular/common": ">=14.0.0 <16.0.0",
+    "@angular/core": ">=14.0.0 <16.0.0",
+    "@angular/forms": ">=14.0.0 <16.0.0",
     "rxjs": ">=6.5.5 < 7.6.0"
   },
   "module": "fesm2015/ngwr.mjs",

package/skeleton/skeleton.d.ts

@@ -7,5 +7,5 @@ export declare class WrSkeleton {
     animated: BooleanInput;
     get elClasses(): SafeAny;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrSkeleton, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<WrSkeleton, "wr-skeleton", ["wrSkeleton"], { "color": "color"; "animated": "animated"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrSkeleton, "wr-skeleton", ["wrSkeleton"], { "color": "color"; "animated": "animated"; }, {}, never, never, false, never>;
 }

package/spinner/spinner.d.ts

@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
 export declare class WrSpinner {
     class: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrSpinner, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WrSpinner, "wr-spin", ["wrSpin"], {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrSpinner, "wr-spin", ["wrSpin"], {}, {}, never, never, false, never>;
 }

package/styles/grid.scss

@@ -1,164 +1,55 @@
-$grid-columns: 12;
-$grid-rows: 1;
-
-$spacer: 1rem !default;
-$gutters: (
-  0: 0,
-  1: $spacer * .25,
-  2: $spacer * .5,
-  3: $spacer,
-  4: $spacer * 1.5,
-  5: $spacer * 3,
-);
-
-$grid-breakpoints: (
-  'xs': 0,
-  'sm': 576px,
-  'md': 768px,
-  'lg': 992px,
-  'xl': 1200px,
-  'xxl': 1400px,
-  'xga': 1600px,
-  'fhd': 1920px,
-  'rt': 2560px
-);
-
-$grid-displays-widths: (
-  'sm': 540px,
-  'md': 720px,
-  'lg': 960px,
-  'xl': 1140px,
-  'xxl': 1320px,
-  'xga': 1530px,
-  'fhd': 1830px,
-  'rt': 2470px
+$columns: 12;
+$gap: #{var(--wr-grid-gutter)};
+$breakpoints: (
+  xs: 640px,
+  sm: 768px,
+  md: 960px,
+  lg: 1170px,
+  xl: 1280px
 );
 
-@function breakpoint-min($name) {
-  $min: map-get($grid-breakpoints, $name);
-  @return if($min != 0, $min, null);
-}
-
-@function breakpoint-infix($name) {
-  @return if(breakpoint-min($name) == null, "", "-#{$name}");
-}
+.container {
+  width: calc(100% - var(--wr-grid-gutter));
+  margin-left: auto;
+  margin-right: auto;
 
-@mixin media-breakpoint-up($name) {
-  $min: breakpoint-min($name);
-  @if $min {
-    @media (min-width: $min) {
-      @content;
+  @each $bp, $value in $breakpoints {
+    @media only screen and (min-width: $value) {
+      max-width: $value;
     }
-  } @else {
-    @content;
   }
 }
 
-@function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: abs($dividend);
-  $divisor: abs($divisor);
-  @if $dividend == 0 {
-    @return 0;
-  }
-  @if $divisor == 0 {
-    @error 'Cannot divide by 0';
-  }
-  $remainder: $dividend;
-  $result: 0;
-  $factor: 10;
-  @while ($remainder > 0 and $precision >= 0) {
-    $quotient: 0;
-    @while ($remainder >= $divisor) {
-      $remainder: $remainder - $divisor;
-      $quotient: $quotient + 1;
+@mixin create-selectors($breakpoint: null) {
+  $infix: if($breakpoint == null, '', '-#{$breakpoint}');
+
+  @for $i from 1 through $columns {
+    .col#{$infix}-#{$i} {
+      grid-column-end: span $i;
     }
-    $result: $result * 10 + $quotient;
-    $factor: $factor * .1;
-    $remainder: $remainder * 10;
-    $precision: $precision - 1;
-    @if ($precision < 0 and $remainder >= $divisor * 5) {
-      $result: $result + 1;
+    .col-offset#{$infix}-#{$i} {
+      grid-column-start: $i + 1;
     }
-  }
-  $result: $result * $factor * $sign;
-  $dividend-unit: unit($dividend);
-  $divisor-unit: unit($divisor);
-  $unit-map: (
-    "px": 1px,
-    "rem": 1rem,
-    "em": 1em,
-    "%": 1%
-  );
-  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
-    $result: $result * map-get($unit-map, $dividend-unit);
-  }
-  @return $result;
-}
-
-.container {
-  position: relative;
-  margin: 0 auto;
-  flex-grow: 1;
-  width: 100%;
-  padding-right: var(--wr-grid-gutter);
-  padding-left: var(--wr-grid-gutter);
-
-  &-fluid {
-    max-width: none !important;
-  }
-}
-
-@each $breakpoint, $value in $grid-displays-widths {
-  @include media-breakpoint-up($breakpoint) {
-    %responsive-container-#{$breakpoint} {
-      max-width: $value;
+    .row#{$infix}-#{$i} {
+      grid-row-end: span $i;
     }
-
-    $extend-breakpoint: true;
-
-    @each $name, $width in $grid-breakpoints {
-      @if ($extend-breakpoint) {
-        .container#{breakpoint-infix($name)} {
-          @extend %responsive-container-#{$breakpoint};
-        }
-
-        // Once the current breakpoint is reached, stop extending
-        @if ($breakpoint == $name) {
-          $extend-breakpoint: false;
-        }
-      }
+    .row-offset#{$infix}-#{$i} {
+      grid-row-start: $i + 1;
     }
   }
 }
 
-
-
 .grid {
   display: grid;
-  grid-template-rows: repeat($grid-rows, 1fr);
-  grid-template-columns: repeat($grid-columns, 1fr);
-  gap: var(--wr-grid-gutter, 1rem);
-
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $infix: breakpoint-infix($breakpoint);
+  grid-template-columns: repeat($columns, 1fr);
+  grid-gap: $gap;
+  gap: $gap;
+}
 
-    @include media-breakpoint-up($breakpoint) {
-      @if $grid-columns > 0 {
-        @for $i from 1 through $grid-columns {
-          .col#{$infix}-#{$i} {
-            grid-column: auto / span $i;
-          }
-        }
+@include create-selectors;
 
-        // Start with `1` because `0` is and invalid value.
-        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
-        @for $i from 1 through ($grid-columns - 1) {
-          .col-start#{$infix}-#{$i} {
-            grid-column-start: $i;
-          }
-        }
-      }
-    }
+@each $breakpoint, $width in $breakpoints {
+  @media (min-width: $width) {
+    @include create-selectors($breakpoint);
   }
 }

package/styles/reset.scss

@@ -20,6 +20,12 @@ body {
   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;

package/tag/tag.d.ts

@@ -14,5 +14,5 @@ export declare class WrTag {
     loading: BooleanInput;
     get elClasses(): SafeAny;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrTag, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WrTag, "wr-tag", ["wrTag"], { "color": "color"; "icon": "icon"; "iconPosition": "iconPosition"; "outlined": "outlined"; "rounded": "rounded"; "transparent": "transparent"; "hoverable": "hoverable"; "loading": "loading"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrTag, "wr-tag", ["wrTag"], { "color": "color"; "icon": "icon"; "iconPosition": "iconPosition"; "outlined": "outlined"; "rounded": "rounded"; "transparent": "transparent"; "hoverable": "hoverable"; "loading": "loading"; }, {}, never, ["*"], false, never>;
 }

package/tooltip/index.d.ts

@@ -0,0 +1,5 @@
+export { WrTooltipComponent } from './tooltip-component';
+export { WR_TOOLTIP_DEFAULT_POSITIONS } from './tooltip-default-positions';
+export { WrTooltipDirective } from './tooltip-directive';
+export { WrTooltipModule } from './tooltip-module';
+export { WrTooltipTrigger } from './tooltip-trigger';

package/tooltip/tooltip-component.d.ts

@@ -0,0 +1,31 @@
+import { CdkConnectedOverlay, ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay';
+import { ChangeDetectorRef, ElementRef } from '@angular/core';
+import { WrTooltipTrigger } from './tooltip-trigger';
+import * as i0 from "@angular/core";
+export declare class WrTooltipComponent {
+    private readonly cdr;
+    overlay: CdkConnectedOverlay;
+    get message(): string | null;
+    set message(value: string | null);
+    private _message;
+    get trigger(): WrTooltipTrigger;
+    set trigger(value: WrTooltipTrigger);
+    private _trigger;
+    get visible(): boolean;
+    set visible(value: boolean);
+    private _visible;
+    get origin(): ElementRef;
+    set origin(value: ElementRef);
+    private _origin;
+    get position(): string;
+    set position(value: string);
+    private _position;
+    readonly positions: ConnectionPositionPair[];
+    constructor(cdr: ChangeDetectorRef);
+    show(): void;
+    hide(): void;
+    onPositionChange(position: ConnectedOverlayPositionChange): void;
+    onClickOutside(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrTooltipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrTooltipComponent, "wr-tooltip", never, { "message": "message"; "trigger": "trigger"; "visible": "visible"; "origin": "origin"; "position": "position"; }, {}, never, never, false, never>;
+}

package/tooltip/tooltip-default-positions.d.ts

@@ -0,0 +1 @@
+export declare const WR_TOOLTIP_DEFAULT_POSITIONS: import("@angular/cdk/overlay").ConnectionPositionPair[];

package/tooltip/tooltip-directive.d.ts

@@ -0,0 +1,22 @@
+import { AfterViewInit, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
+import { WrTooltipTrigger } from './tooltip-trigger';
+import * as i0 from "@angular/core";
+export declare class WrTooltipDirective implements AfterViewInit {
+    private readonly elRef;
+    private readonly r2;
+    private readonly vcr;
+    message: string | null;
+    trigger: WrTooltipTrigger;
+    onClick(event: MouseEvent): void;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    private readonly componentRef;
+    private delayTimer;
+    constructor(elRef: ElementRef, r2: Renderer2, vcr: ViewContainerRef);
+    ngAfterViewInit(): void;
+    private onTooltipShow;
+    private onTooltipHide;
+    private leaveDelay;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrTooltipDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrTooltipDirective, "[wrTooltip]", ["wrTooltip"], { "message": "wrTooltip"; "trigger": "trigger"; }, {}, never, never, false, never>;
+}

package/tooltip/tooltip-module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./tooltip-component";
+import * as i2 from "./tooltip-directive";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/cdk/overlay";
+import * as i5 from "ngwr/core/overlay";
+export declare class WrTooltipModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrTooltipModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<WrTooltipModule, [typeof i1.WrTooltipComponent, typeof i2.WrTooltipDirective], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.WrOverlayModule], [typeof i1.WrTooltipComponent, typeof i2.WrTooltipDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<WrTooltipModule>;
+}

package/tooltip/tooltip-trigger.d.ts

@@ -0,0 +1 @@
+export declare type WrTooltipTrigger = 'hover' | 'click';

package/tooltip/tooltip.scss

@@ -0,0 +1,67 @@
+.wr-tooltip {
+  $wrTooltipRoot: &;
+
+  margin: 0.5rem;
+
+  position: relative;
+
+  &__wrapper {
+    display: inline-block;
+
+    background: var(--wr-color-dark);
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+  }
+
+  &__title {
+    display: block;
+    color: var(--wr-color-white);
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1rem;
+    word-break: break-word;
+  }
+
+  &__arrow {
+    display: block;
+
+    position: absolute;
+    z-index: 2;
+
+    width: 0.5rem;
+    height: 0.5rem;
+
+    background: var(--wr-color-dark);
+    pointer-events: none;
+
+    transform: rotate(45deg);
+
+    #{$wrTooltipRoot}--top & {
+      bottom: -0.25rem;
+      left: 0;
+      right: 0;
+      margin: auto;
+    }
+
+    #{$wrTooltipRoot}--bottom & {
+      top: -0.25rem;
+      left: 0;
+      right: 0;
+      margin: auto;
+    }
+
+    #{$wrTooltipRoot}--left & {
+      top: 0;
+      bottom: 0;
+      right: -0.25rem;
+      margin: auto;
+    }
+
+    #{$wrTooltipRoot}--right & {
+      top: 0;
+      bottom: 0;
+      left: -0.25rem;
+      margin: auto;
+    }
+  }
+}

package/logo.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3195.1 996.4">
-  <path d="M421.7 0C188.8 0 0 109.2 0 375.9s153.8 620.4 421.7 620.4 421.7-353.8 421.7-620.4S654.6 0 421.7 0z" style="fill:#3969E2"/>
-  <path d="M1346.9 243.7c29.6 0 56.7 4.9 81.2 14.6s45.7 23.8 63.4 42.2c17.7 18.4 31.4 40.6 41.2 66.6 9.7 26 14.6 55.2 14.6 87.7v292.4h-124.5V471.1c0-32.5-9.6-58.7-28.7-78.5-19.1-19.8-43.9-29.8-74.2-29.8-30.3 0-55.1 9.9-74.2 29.8s-28.7 46-28.7 78.5v276.2h-124.5V249.1h92.1l21.7 48.7c12.3-10.1 25.6-19.1 40.1-27.1 12.3-6.5 26.9-12.6 43.9-18.4 16.7-5.7 35.7-8.6 56.6-8.6zM1846.1 243.7c21.7 0 41.2 2.9 58.5 8.7 17.3 5.8 32.1 11.9 44.4 18.4 13.7 8 26.3 17 37.9 27.1l21.7-48.7h92.1v465.7c0 65-20.8 117.3-62.3 157s-100.2 59.6-176 59.6c-46.2 0-83.6-8.3-112.1-24.9-28.5-16.6-51.1-35.4-67.7-56.3-18.8-23.8-32.9-50.9-42.2-81.2h124.5c5 9.4 11.9 17.7 20.6 24.9 7.9 5.8 18 11.2 30.3 16.2s27.8 7.6 46.6 7.6c35.4 0 63.2-9.6 83.4-28.7 20.2-19.1 30.3-43.9 30.3-74.2V677c-10.1 10.1-21.7 19.1-34.7 27.1-11.6 7.2-25.3 13.5-41.2 19-15.9 5.4-33.9 8.1-54.2 8.1-31.1 0-60.5-6.1-88.3-18.4-27.8-12.3-52-29.2-72.6-50.9s-36.8-47.3-48.7-76.9c-11.9-29.6-17.9-62.1-17.9-97.5s6-67.9 17.9-97.5c11.9-29.6 28.2-55.2 48.7-76.9 20.6-21.7 44.8-38.6 72.6-50.9 27.9-12.4 57.3-18.5 88.4-18.5zm-102.9 243.7c0 17.3 3.1 33.6 9.2 48.7 6.1 15.2 14.6 28.3 25.5 39.5 10.8 11.2 23.5 20 37.9 26.5 14.4 6.5 30 9.7 46.6 9.7 15.9 0 31-3.2 45.5-9.7 14.4-6.5 27.1-15.3 37.9-26.5 10.8-11.2 19.5-24.4 26-39.5 6.5-15.2 9.7-31.4 9.7-48.7 0-17.3-3.2-33.6-9.7-48.7-6.5-15.2-15.2-28.3-26-39.5s-23.5-20-37.9-26.5c-14.5-6.5-29.6-9.7-45.5-9.7-16.6 0-32.1 3.2-46.6 9.7-14.5 6.5-27.1 15.3-37.9 26.5-10.8 11.2-19.3 24.4-25.5 39.5-6.1 15.1-9.2 31.3-9.2 48.7zM2512.8 449.5l-92.1 297.8h-108.3L2150 249.1h124.5l97.5 319.5 102.9-319.5h75.8l102.9 319.5 97.5-319.5h124.5l-162.5 498.2h-108.3l-92-297.8zM3157.2 243.7c5.8 0 10.8.4 15.2 1.1 4.3.7 8.3 1.5 11.9 2.2 3.6.7 7.2 1.5 10.8 2.2v130c-3.6-.7-7.6-1.4-11.9-2.2-3.6-.7-8.1-1.4-13.5-2.2-5.4-.7-11.4-1.1-17.9-1.1-30.3 0-55.1 9.9-74.2 29.8s-28.7 46-28.7 78.5v265.3h-124.5V249.1h92.1l21.7 54.2c8.7-10.8 19.1-20.6 31.4-29.2 10.1-7.9 22.6-15 37.4-21.1 14.6-6.2 31.4-9.3 50.2-9.3z" style="fill:#19243A" />
-  <path d="M326.6 515.7c-8.8 90.7-13.6 200.8-8 288.5.9 13.7-17.7 18.9-24 6.6-32.7-64.7-62.5-151.1-78.5-241.9-2.7-15 4.9-30 18.5-36.7 22.2-11 43.5-23.7 60.1-33.1 1.1-.6 2.1-1.2 3.2-1.8 13.7-7.8 30.2 2.9 28.7 18.4zM627.2 569.7c-16 90.8-45.8 177.3-78.5 241.9-6.2 12.4-24.8 7.2-24-6.6 5.5-87.8.7-197.9-8-288.5-1.5-15.5 15.1-26.2 28.7-18.4 1.1.6 2.1 1.2 3.2 1.8 16.5 9.4 37.9 22.1 60.1 33.1 13.6 6.7 21.2 21.7 18.5 36.7z" style="fill:#FFFFFF" />
-  <path d="M548.6 434.2c-41.1-23.3-77.8-51.1-126.9-51.1s-85.8 27.9-126.9 51.1c-69.9 39.7-226 140.4-171.1-97.3 26.4-114.3 96.3-162.3 161.8-181.3 18.1-5.3 37.8.4 50.2 14.5 18.5 21.2 53.1 38.6 86 38.6s67.4-17.4 86-38.6c12.5-14.1 32.2-19.8 50.2-14.5 65.5 19 135.4 67.1 161.8 181.3 55 237.7-101.1 137-171.1 97.3z"  style="fill:#FFFFFF"/>
-</svg>