ngwr 0.1.3 → 0.2.0

package/spinner/spinner.d.ts

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

package/spinner/spinner.scss

@@ -0,0 +1,33 @@
+
+.wr-spin {
+  display: inline-block;
+  color: inherit;
+  font-style: normal;
+  line-height: 0;
+  text-align: center;
+  text-transform: none;
+  vertical-align: -0.1rem;
+  box-sizing: content-box !important;
+
+  contain: strict;
+
+  width: 1em;
+  height: 1em;
+
+  * {
+    line-height: 1;
+  }
+
+  svg {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+
+    animation: rotate 2s linear infinite;
+
+    .path {
+      stroke: currentColor;
+      animation: dash 1.5s ease-in-out infinite;
+    }
+  }
+}

package/styles/animations.scss

@@ -0,0 +1,14 @@
+@keyframes shimmer {
+  100% { transform: translateX(100%); }
+}
+
+@keyframes rotate {
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes dash {
+  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
+  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
+  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
+}
+

package/styles/grid.scss

@@ -0,0 +1,164 @@
+$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
+);
+
+@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}");
+}
+
+@mixin media-breakpoint-up($name) {
+  $min: breakpoint-min($name);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @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;
+    }
+    $result: $result * 10 + $quotient;
+    $factor: $factor * .1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+    @if ($precision < 0 and $remainder >= $divisor * 5) {
+      $result: $result + 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;
+    }
+
+    $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;
+        }
+      }
+    }
+  }
+}
+
+
+
+.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);
+
+    @include media-breakpoint-up($breakpoint) {
+      @if $grid-columns > 0 {
+        @for $i from 1 through $grid-columns {
+          .col#{$infix}-#{$i} {
+            grid-column: auto / span $i;
+          }
+        }
+
+        // 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;
+          }
+        }
+      }
+    }
+  }
+}

package/styles/reset.scss

@@ -0,0 +1,106 @@
+: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;
+
+  -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/root.scss

@@ -0,0 +1,152 @@
+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);
+
+  /* Colors */
+  --wr-color-white: #fff;
+  --wr-color-white-rgb: 255,255,255;
+  --wr-color-black: #000;
+  --wr-color-black-rgb: 0,0,0;
+
+  --wr-color-primary: #3969e2;
+  --wr-color-primary-rgb: 57,105,226;
+  --wr-color-primary-contrast: #fff;
+  --wr-color-primary-shade: #2e54b5;
+
+  --wr-color-secondary: #f51c6a;
+  --wr-color-secondary-rgb: 245,28,106;
+  --wr-color-secondary-contrast: #fff;
+  --wr-color-secondary-shade: #c41655;
+
+  --wr-color-success: #84cc16;
+  --wr-color-success-rgb: 132,204,22;
+  --wr-color-success-contrast: #000;
+  --wr-color-success-shade: #6aa312;
+
+  --wr-color-warning: #fbbf24;
+  --wr-color-warning-rgb: 251,191,36;
+  --wr-color-warning-contrast: #000;
+  --wr-color-warning-shade: #f59e0b;
+
+  --wr-color-danger: #dc2626;
+  --wr-color-danger-rgb: 220,38,38;
+  --wr-color-danger-contrast: #fff;
+  --wr-color-danger-shade: #b91c1c;
+
+  --wr-color-light: #e2e8f0;
+  --wr-color-light-rgb: 226,232,240;
+  --wr-color-light-contrast: #000;
+  --wr-color-light-shade: #b8c0d2;
+
+  --wr-color-medium: #8b93a2;
+  --wr-color-medium-rgb: 139,147,162;
+  --wr-color-medium-contrast: #fff;
+  --wr-color-medium-shade: #7a818f;
+
+  --wr-color-dark: #322e4f;
+  --wr-color-dark-rgb: 50,46,79;
+  --wr-color-dark-contrast: #fff;
+  --wr-color-dark-shade: #131123;
+
+  /* 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;
+
+  /* Button */
+  --wr-btn-padding-y-base: 0.5rem;
+  --wr-btn-padding-x-base: 1rem;
+  --wr-btn-border-radius-base: 0.5rem;
+  --wr-btn-font-size-base: 1rem;
+  --wr-btn-line-height-base: 1.4;
+  --wr-btn-font-weight-base: 500;
+  // Small
+  --wr-btn-padding-y-small: 0.375rem;
+  --wr-btn-padding-x-small: 0.625rem;
+  --wr-btn-border-radius-small: 0.375rem;
+  --wr-btn-font-size-small: 0.825rem;
+  --wr-btn-line-height-small: 1;
+  // Rounded
+  --wr-btn-rounded-border-radius: 50rem;
+  --wr-btn-rounded-padding-y: 0.5rem;
+  --wr-btn-rounded-padding-x: 1rem;
+
+  /* Checkbox */
+  --wr-checkbox-color-base: var(--wr-color-dark);
+  --wr-checkbox-border-radius: 0.25rem;
+  --wr-checkbox-font-size: 0.9rem;
+  --wr-checkbox-line-height: 1.2;
+  --wr-checkbox-font-weight: 500;
+  --wr-checkbox-height: 1.25rem;
+  --wr-checkbox-width: var(--wr-checkbox-height);
+
+  /* Input */
+  --wr-input-padding-y-base: 0.5rem;
+  --wr-input-padding-x-base: 1rem;
+  --wr-input-border-radius-base: 0.5rem;
+  --wr-input-font-size-base: 1rem;
+  --wr-input-line-height-base: 1.4;
+  --wr-input-font-weight-base: 500;
+
+  --wr-input-bg: var(--wr-color-white);
+  --wr-input-border-color: var(--wr-border-color-base);
+  --wr-input-color: var(--wr-color-dark);
+  --wr-input-suffix-prefix-color: var(--wr-color-medium);
+  --wr-input-suffix-prefix-bg: rgba(var(--wr-color-light-rgb), 0.375);
+
+  --wr-input-disabled-color: rgba(var(--wr-color-medium-rgb), 0.5);
+  --wr-input-disabled-border-color: var(--wr-border-color-base);
+  --wr-input-disabled-bg: var(--wr-border-color-base);
+
+  /* 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: #18152a;
+    --wr-body-bg-rgb: 24,21,42;
+    --wr-body-color: #fff;
+
+    --wr-border-color-base: #292349;
+
+
+    /* Checkbox */
+    --wr-checkbox-color-base: var(--wr-color-white);
+
+    --wr-input-bg: #18152a;
+    --wr-input-suffix-prefix-color: rgba(var(--wr-color-white-rgb), 0.5);
+    --wr-input-suffix-prefix-bg: rgba(var(--wr-color-primary-rgb), 0.125);
+    --wr-input-border-color: #493d7e;
+    --wr-input-color: #fff;
+  }
+}

package/styles/vars.scss

@@ -0,0 +1,2 @@
+/* Theme colors */
+$theme-colors: ('primary', 'secondary', 'light', 'medium', 'dark', 'success', 'warning', 'danger');

package/tag/index.d.ts

@@ -1,2 +1,2 @@
-export { WrTagComponent } from './tag.component';
-export { WrTagModule } from './tag.module';
+export { WrTag } from './tag';
+export { WrTagModule } from './tag-module';

package/tag/{tag.module.d.ts → tag-module.d.ts}

@@ -1,10 +1,10 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./tag.component";
+import * as i1 from "./tag";
 import * as i2 from "@angular/common";
-import * as i3 from "../icon/wr-icon.module";
-import * as i4 from "../spinner/spinner.module";
+import * as i3 from "ngwr/icon";
+import * as i4 from "ngwr/spinner";
 export declare class WrTagModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<WrTagModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<WrTagModule, [typeof i1.WrTagComponent], [typeof i2.CommonModule, typeof i3.WrIconModule, typeof i4.WrSpinnerModule], [typeof i1.WrTagComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<WrTagModule, [typeof i1.WrTag], [typeof i2.CommonModule, typeof i3.WrIconModule, typeof i4.WrSpinnerModule], [typeof i1.WrTag]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<WrTagModule>;
 }

package/tag/tag.d.ts

@@ -0,0 +1,18 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { WrThemeColor } from 'ngwr/core/color';
+import { SafeAny } from 'ngwr/core/types';
+import { wrIconName } from 'ngwr/icon';
+import * as i0 from "@angular/core";
+export declare class WrTag {
+    color: WrThemeColor | string;
+    icon: wrIconName | null;
+    iconPosition: 'start' | 'end';
+    outlined: BooleanInput;
+    rounded: BooleanInput;
+    transparent: BooleanInput;
+    hoverable: BooleanInput;
+    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>;
+}

package/tag/tag.scss

@@ -0,0 +1,106 @@
+@import '../styles/vars';
+
+.wr-tag {
+  display: inline-block;
+
+  padding: var(--wr-tag-padding-y) var(--wr-tag-padding-x);
+
+  font-family: var(--wr-tag-font-family-base);
+  font-size: var(--wr-tag-font-size-base);
+  font-weight: var(--wr-tag-font-weight-base);
+  line-height: var(--wr-tag-line-height-base);
+
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+
+  user-select: none;
+  pointer-events: none;
+  white-space: nowrap;
+
+  border: none;
+  border-radius: var(--wr-tag-border-radius-base);
+
+  cursor: pointer;
+  transition: var(--wr-transition-base);
+  position: relative;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &__icon,
+  &__spin {
+    width: 0.75rem !important;
+    height: 0.75rem !important;
+    min-width: 0.75rem !important;
+    min-height: 0.75rem !important;
+    transition: var(--wr-transition-base);
+  }
+
+  &--icon-start {
+    .wr-tag {
+      &__icon,
+      &__spin {
+        margin-right: 0.25rem;
+      }
+    }
+  }
+
+  &--icon-end {
+    .wr-tag {
+      &__icon,
+      &__spin {
+        margin-left: 0.25rem;
+      }
+    }
+  }
+
+  &--hoverable {
+    pointer-events: all;
+  }
+
+  &--rounded {
+    border-radius: var(--wr-tag-rounded-border-radius);
+    padding: var(--wr-tag-rounded-padding-y) var(--wr-tag-rounded-padding-x);
+  }
+}
+
+@each $color in $theme-colors {
+  .wr-tag--#{$color} {
+    color: var(--wr-color-#{$color}-contrast);
+    background-color: var(--wr-color-#{$color});
+
+    &:hover {
+      color: var(--wr-color-#{$color}-contrast);
+      background-color: var(--wr-color-#{$color}-shade);
+    }
+
+    &.wr-tag--outlined {
+      color: var(--wr-color-#{$color});
+      background-color: transparent;
+      box-shadow: inset 0 0 0 1.25px rgba(var(--wr-color-#{$color}-rgb), 0.375);
+
+      &.wr-tag--transparent {
+        background-color: rgba(var(--wr-color-#{$color}-rgb), 0.125);
+      }
+
+      &:hover {
+        color: var(--wr-color-#{$color}-contrast);
+        background-color: var(--wr-color-#{$color});
+        box-shadow: none;
+      }
+    }
+
+    &.wr-tag--transparent {
+      color: var(--wr-color-#{$color});
+      background-color: rgba(var(--wr-color-#{$color}-rgb), 0.125);
+
+      &:hover {
+        color: var(--wr-color-#{$color}-contrast);
+        background-color: var(--wr-color-#{$color});
+        box-shadow: none;
+      }
+    }
+  }
+}

package/_core/components/base.component.d.ts

@@ -1,9 +0,0 @@
-import { OnDestroy } from '@angular/core';
-import { Subject } from 'rxjs';
-import * as i0 from "@angular/core";
-export declare abstract class BaseComponent implements OnDestroy {
-    protected readonly ngUnsubscribe: Subject<void>;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<BaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseComponent, never, never, {}, {}, never, never, false>;
-}

package/_core/constants/style-prefix.d.ts

@@ -1 +0,0 @@
-export declare const stylePrefix = "wr";

package/_core/index.d.ts

@@ -1,4 +0,0 @@
-export { BaseComponent } from './components/base.component';
-export * from './constants/style-prefix';
-export * from './types';
-export * from './util/convert';

package/_core/types/boolean-input.d.ts

@@ -1 +0,0 @@
-export declare type BooleanInput = boolean | string | undefined | null;

package/_core/types/color.d.ts

@@ -1 +0,0 @@
-export declare type WrThemeColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';

package/_core/types/index.d.ts

@@ -1,8 +0,0 @@
-export { BooleanInput } from './boolean-input';
-export { WrThemeColor } from './color';
-export { WrInputAutocomplete } from './input-autocomplete-type';
-export { WrInputModeType } from './input-mode-type';
-export { WrInputType } from './input-type';
-export { OnChangeType } from './on-change-type';
-export { OnTouchedType } from './on-touched-type';
-export { SafeAny } from './safe-any';

package/_core/types/input-mode-type.d.ts

@@ -1 +0,0 @@
-export declare type WrInputModeType = 'text' | 'numeric' | 'tel' | 'email' | 'url';

package/_core/types/input-type.d.ts

@@ -1 +0,0 @@
-export declare type WrInputType = 'text' | 'number' | 'password' | 'email';

package/_core/util/convert.d.ts

@@ -1,19 +0,0 @@
-import { SafeAny } from '../types/safe-any';
-export declare function toBoolean(value: boolean | string): boolean;
-/**
- * Input decorator that handle a prop to do get/set automatically with toBoolean
- *
- * Why not using @InputBoolean alone without @Input? AOT needs @Input to be visible
- *
- * @howToUse
- * ```
- * @Input() @InputBoolean() visible: boolean = false;
- *
- * // Act as below:
- * // @Input()
- * // get visible() { return this.__visible; }
- * // set visible(value) { this.__visible = value; }
- * // __visible = false;
- * ```
- */
-export declare function InputBoolean(): SafeAny;