ngwr 0.3.3 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (140) hide show
  1. package/button/button.d.ts +1 -1
  2. package/checkbox/checkbox.d.ts +1 -1
  3. package/core/abstract/base.d.ts +1 -1
  4. package/core/overlay/connected-overlay-directive.d.ts +16 -0
  5. package/core/overlay/get-placement-name.d.ts +2 -0
  6. package/core/overlay/index.d.ts +5 -0
  7. package/core/overlay/overlay-module.d.ts +7 -0
  8. package/core/overlay/overlay.scss +9 -0
  9. package/core/overlay/position-map.d.ts +17 -0
  10. package/core/overlay/position-type.d.ts +2 -0
  11. package/core/types/index.d.ts +2 -0
  12. package/core/types/ng-style-interface.d.ts +4 -0
  13. package/core/types/property-mapping.d.ts +3 -0
  14. package/dialog/dialog-base.d.ts +1 -1
  15. package/dialog/dialog-container.d.ts +1 -1
  16. package/dialog/dialog-content-directives.d.ts +4 -4
  17. package/divider/divider.d.ts +1 -1
  18. package/esm2020/button/button-module.mjs +5 -5
  19. package/esm2020/button/button.mjs +4 -4
  20. package/esm2020/checkbox/checkbox-module.mjs +5 -5
  21. package/esm2020/checkbox/checkbox.mjs +4 -4
  22. package/esm2020/core/abstract/base.mjs +4 -4
  23. package/esm2020/core/overlay/connected-overlay-directive.mjs +98 -0
  24. package/esm2020/core/overlay/get-placement-name.mjs +13 -0
  25. package/esm2020/core/overlay/index.mjs +5 -0
  26. package/esm2020/core/overlay/ngwr-core-overlay.mjs +5 -0
  27. package/esm2020/core/overlay/overlay-module.mjs +16 -0
  28. package/esm2020/core/overlay/position-map.mjs +18 -0
  29. package/esm2020/core/overlay/position-type.mjs +2 -0
  30. package/esm2020/core/types/index.mjs +3 -1
  31. package/esm2020/core/types/ng-style-interface.mjs +2 -0
  32. package/esm2020/core/types/property-mapping.mjs +2 -0
  33. package/esm2020/dialog/dialog-base.mjs +4 -4
  34. package/esm2020/dialog/dialog-container.mjs +4 -4
  35. package/esm2020/dialog/dialog-content-directives.mjs +13 -13
  36. package/esm2020/dialog/dialog-module.mjs +7 -7
  37. package/esm2020/dialog/dialog-service.mjs +4 -4
  38. package/esm2020/divider/divider-module.mjs +5 -5
  39. package/esm2020/divider/divider.mjs +4 -4
  40. package/esm2020/form/form-error.mjs +4 -4
  41. package/esm2020/form/form-item.mjs +4 -4
  42. package/esm2020/form/form-module.mjs +5 -5
  43. package/esm2020/icon/icon-module.mjs +5 -5
  44. package/esm2020/icon/icon-service.mjs +4 -4
  45. package/esm2020/icon/icon.mjs +4 -4
  46. package/esm2020/icon/icons.mjs +24 -4
  47. package/esm2020/input/input-module.mjs +5 -5
  48. package/esm2020/input/input.mjs +4 -4
  49. package/esm2020/skeleton/skeleton-module.mjs +5 -5
  50. package/esm2020/skeleton/skeleton.mjs +4 -4
  51. package/esm2020/spinner/spinner-module.mjs +5 -5
  52. package/esm2020/spinner/spinner.mjs +4 -4
  53. package/esm2020/tag/tag-module.mjs +5 -5
  54. package/esm2020/tag/tag.mjs +4 -4
  55. package/esm2020/tooltip/index.mjs +5 -0
  56. package/esm2020/tooltip/ngwr-tooltip.mjs +5 -0
  57. package/esm2020/tooltip/tooltip-component.mjs +93 -0
  58. package/esm2020/tooltip/tooltip-default-positions.mjs +8 -0
  59. package/esm2020/tooltip/tooltip-directive.mjs +85 -0
  60. package/esm2020/tooltip/tooltip-module.mjs +21 -0
  61. package/esm2020/tooltip/tooltip-trigger.mjs +2 -0
  62. package/fesm2015/ngwr-button.mjs +8 -7
  63. package/fesm2015/ngwr-button.mjs.map +1 -1
  64. package/fesm2015/ngwr-checkbox.mjs +8 -7
  65. package/fesm2015/ngwr-checkbox.mjs.map +1 -1
  66. package/fesm2015/ngwr-core-abstract.mjs +4 -3
  67. package/fesm2015/ngwr-core-abstract.mjs.map +1 -1
  68. package/fesm2015/ngwr-core-color.mjs +1 -0
  69. package/fesm2015/ngwr-core-decorators.mjs +1 -0
  70. package/fesm2015/ngwr-core-overlay.mjs +147 -0
  71. package/fesm2015/ngwr-core-overlay.mjs.map +1 -0
  72. package/fesm2015/ngwr-core-types.mjs +1 -0
  73. package/fesm2015/ngwr-dialog.mjs +28 -27
  74. package/fesm2015/ngwr-dialog.mjs.map +1 -1
  75. package/fesm2015/ngwr-divider.mjs +8 -7
  76. package/fesm2015/ngwr-divider.mjs.map +1 -1
  77. package/fesm2015/ngwr-form.mjs +11 -10
  78. package/fesm2015/ngwr-form.mjs.map +1 -1
  79. package/fesm2015/ngwr-icon.mjs +34 -13
  80. package/fesm2015/ngwr-icon.mjs.map +1 -1
  81. package/fesm2015/ngwr-input.mjs +8 -7
  82. package/fesm2015/ngwr-input.mjs.map +1 -1
  83. package/fesm2015/ngwr-skeleton.mjs +8 -7
  84. package/fesm2015/ngwr-skeleton.mjs.map +1 -1
  85. package/fesm2015/ngwr-spinner.mjs +8 -7
  86. package/fesm2015/ngwr-spinner.mjs.map +1 -1
  87. package/fesm2015/ngwr-tag.mjs +8 -7
  88. package/fesm2015/ngwr-tag.mjs.map +1 -1
  89. package/fesm2015/ngwr-tooltip.mjs +208 -0
  90. package/fesm2015/ngwr-tooltip.mjs.map +1 -0
  91. package/fesm2015/ngwr.mjs +1 -0
  92. package/fesm2020/ngwr-button.mjs +8 -7
  93. package/fesm2020/ngwr-button.mjs.map +1 -1
  94. package/fesm2020/ngwr-checkbox.mjs +8 -7
  95. package/fesm2020/ngwr-checkbox.mjs.map +1 -1
  96. package/fesm2020/ngwr-core-abstract.mjs +4 -3
  97. package/fesm2020/ngwr-core-abstract.mjs.map +1 -1
  98. package/fesm2020/ngwr-core-color.mjs +1 -0
  99. package/fesm2020/ngwr-core-decorators.mjs +1 -0
  100. package/fesm2020/ngwr-core-overlay.mjs +147 -0
  101. package/fesm2020/ngwr-core-overlay.mjs.map +1 -0
  102. package/fesm2020/ngwr-core-types.mjs +1 -0
  103. package/fesm2020/ngwr-dialog.mjs +28 -27
  104. package/fesm2020/ngwr-dialog.mjs.map +1 -1
  105. package/fesm2020/ngwr-divider.mjs +8 -7
  106. package/fesm2020/ngwr-divider.mjs.map +1 -1
  107. package/fesm2020/ngwr-form.mjs +11 -10
  108. package/fesm2020/ngwr-form.mjs.map +1 -1
  109. package/fesm2020/ngwr-icon.mjs +34 -13
  110. package/fesm2020/ngwr-icon.mjs.map +1 -1
  111. package/fesm2020/ngwr-input.mjs +8 -7
  112. package/fesm2020/ngwr-input.mjs.map +1 -1
  113. package/fesm2020/ngwr-skeleton.mjs +8 -7
  114. package/fesm2020/ngwr-skeleton.mjs.map +1 -1
  115. package/fesm2020/ngwr-spinner.mjs +8 -7
  116. package/fesm2020/ngwr-spinner.mjs.map +1 -1
  117. package/fesm2020/ngwr-tag.mjs +8 -7
  118. package/fesm2020/ngwr-tag.mjs.map +1 -1
  119. package/fesm2020/ngwr-tooltip.mjs +205 -0
  120. package/fesm2020/ngwr-tooltip.mjs.map +1 -0
  121. package/fesm2020/ngwr.mjs +1 -0
  122. package/form/form-error.d.ts +1 -1
  123. package/form/form-item.d.ts +1 -1
  124. package/icon/icon.d.ts +1 -1
  125. package/icon/icons.d.ts +29 -1
  126. package/input/input.d.ts +1 -1
  127. package/package.json +17 -1
  128. package/skeleton/skeleton.d.ts +1 -1
  129. package/spinner/spinner.d.ts +1 -1
  130. package/styles/grid.scss +35 -144
  131. package/styles/reset.scss +6 -0
  132. package/tag/tag.d.ts +1 -1
  133. package/tooltip/index.d.ts +5 -0
  134. package/tooltip/tooltip-component.d.ts +31 -0
  135. package/tooltip/tooltip-default-positions.d.ts +1 -0
  136. package/tooltip/tooltip-directive.d.ts +22 -0
  137. package/tooltip/tooltip-module.d.ts +11 -0
  138. package/tooltip/tooltip-trigger.d.ts +1 -0
  139. package/tooltip/tooltip.scss +67 -0
  140. package/logo.svg +0 -6
package/icon/icons.d.ts CHANGED
@@ -106,10 +106,18 @@ export declare const wrIconClock: {
106
106
  name: 'clock';
107
107
  data: string;
108
108
  };
109
+ export declare const wrIconCloseCircleOutline: {
110
+ name: 'close-circle-outline';
111
+ data: string;
112
+ };
109
113
  export declare const wrIconCloseCircle: {
110
114
  name: 'close-circle';
111
115
  data: string;
112
116
  };
117
+ export declare const wrIconClose: {
118
+ name: 'close';
119
+ data: string;
120
+ };
113
121
  export declare const wrIconCog: {
114
122
  name: 'cog';
115
123
  data: string;
@@ -142,6 +150,10 @@ export declare const wrIconDownload: {
142
150
  name: 'download';
143
151
  data: string;
144
152
  };
153
+ export declare const wrIconExternalOutline: {
154
+ name: 'external-outline';
155
+ data: string;
156
+ };
145
157
  export declare const wrIconEyeOff: {
146
158
  name: 'eye-off';
147
159
  data: string;
@@ -294,6 +306,10 @@ export declare const wrIconShield: {
294
306
  name: 'shield';
295
307
  data: string;
296
308
  };
309
+ export declare const wrIconShuffle: {
310
+ name: 'shuffle';
311
+ data: string;
312
+ };
297
313
  export declare const wrIconStopCircle: {
298
314
  name: 'stop-circle';
299
315
  data: string;
@@ -334,7 +350,7 @@ export declare const wrIconWarning: {
334
350
  name: 'warning';
335
351
  data: string;
336
352
  };
337
- export declare type wrIconName = 'add-circle-outline' | 'add-circle' | 'add' | 'alert-circle-outline' | 'alert-circle' | 'alert-squircle' | 'alert' | 'arrow-back-circle' | 'arrow-back' | 'arrow-bottom-circle' | 'arrow-bottom' | 'arrow-forward-circle' | 'arrow-forward' | 'arrow-top-circle' | 'arrow-top' | 'bug-outline' | 'bug' | 'caret-back-circle' | 'caret-back' | 'caret-forward-circle' | 'caret-forward' | 'checkmark-circle-outline' | 'checkmark-circle' | 'checkmark' | 'chevron-down' | 'chevron-up' | 'clock' | 'close-circle' | 'cog' | 'copy-outline' | 'copy' | 'discover' | 'document' | 'dots-horizontal' | 'dots-vertical' | 'download' | 'eye-off' | 'eye' | 'file-aab' | 'file-apk' | 'file-ipa' | 'file-zip' | 'filter-outline' | 'filter' | 'flash' | 'folder' | 'help' | 'home' | 'info-circle-outline' | 'lock-opened' | 'lock' | 'logo-android' | 'logo-apple' | 'logo-appscreener' | 'logo-appstore' | 'logo-github' | 'logo-google-play' | 'logo-oversecured' | 'logo-rustore' | 'logo-stingray' | 'modules' | 'moon' | 'play-back' | 'play-circle' | 'play-forward' | 'play' | 'plus-circle' | 'reader' | 'repeat' | 'search' | 'shield-checkmark-outline' | 'shield-checkmark' | 'shield-outline' | 'shield' | 'stop-circle' | 'stop' | 'sun' | 'terminal' | 'trash' | 'user-add' | 'user-circle' | 'user-remove' | 'user' | 'warning';
353
+ export declare type wrIconName = 'add-circle-outline' | 'add-circle' | 'add' | 'alert-circle-outline' | 'alert-circle' | 'alert-squircle' | 'alert' | 'arrow-back-circle' | 'arrow-back' | 'arrow-bottom-circle' | 'arrow-bottom' | 'arrow-forward-circle' | 'arrow-forward' | 'arrow-top-circle' | 'arrow-top' | 'bug-outline' | 'bug' | 'caret-back-circle' | 'caret-back' | 'caret-forward-circle' | 'caret-forward' | 'checkmark-circle-outline' | 'checkmark-circle' | 'checkmark' | 'chevron-down' | 'chevron-up' | 'clock' | 'close-circle-outline' | 'close-circle' | 'close' | 'cog' | 'copy-outline' | 'copy' | 'discover' | 'document' | 'dots-horizontal' | 'dots-vertical' | 'download' | 'external-outline' | 'eye-off' | 'eye' | 'file-aab' | 'file-apk' | 'file-ipa' | 'file-zip' | 'filter-outline' | 'filter' | 'flash' | 'folder' | 'help' | 'home' | 'info-circle-outline' | 'lock-opened' | 'lock' | 'logo-android' | 'logo-apple' | 'logo-appscreener' | 'logo-appstore' | 'logo-github' | 'logo-google-play' | 'logo-oversecured' | 'logo-rustore' | 'logo-stingray' | 'modules' | 'moon' | 'play-back' | 'play-circle' | 'play-forward' | 'play' | 'plus-circle' | 'reader' | 'repeat' | 'search' | 'shield-checkmark-outline' | 'shield-checkmark' | 'shield-outline' | 'shield' | 'shuffle' | 'stop-circle' | 'stop' | 'sun' | 'terminal' | 'trash' | 'user-add' | 'user-circle' | 'user-remove' | 'user' | 'warning';
338
354
  export interface IWrIcon {
339
355
  name: wrIconName;
340
356
  data: string;
@@ -421,9 +437,15 @@ export declare const wrIconSet: ({
421
437
  } | {
422
438
  name: 'clock';
423
439
  data: string;
440
+ } | {
441
+ name: 'close-circle-outline';
442
+ data: string;
424
443
  } | {
425
444
  name: 'close-circle';
426
445
  data: string;
446
+ } | {
447
+ name: 'close';
448
+ data: string;
427
449
  } | {
428
450
  name: 'cog';
429
451
  data: string;
@@ -448,6 +470,9 @@ export declare const wrIconSet: ({
448
470
  } | {
449
471
  name: 'download';
450
472
  data: string;
473
+ } | {
474
+ name: 'external-outline';
475
+ data: string;
451
476
  } | {
452
477
  name: 'eye-off';
453
478
  data: string;
@@ -562,6 +587,9 @@ export declare const wrIconSet: ({
562
587
  } | {
563
588
  name: 'shield';
564
589
  data: string;
590
+ } | {
591
+ name: 'shuffle';
592
+ data: string;
565
593
  } | {
566
594
  name: 'stop-circle';
567
595
  data: string;
package/input/input.d.ts CHANGED
@@ -61,5 +61,5 @@ export declare class WrInput extends WrAbstractBase implements ControlValueAcces
61
61
  onPasswordVisibilityChange(): void;
62
62
  setDisabledState(isDisabled: boolean): void;
63
63
  static ɵfac: i0.ɵɵFactoryDeclaration<WrInput, never>;
64
- static ɵcmp: i0.ɵɵComponentDeclaration<WrInput, "wr-input", ["wrInput"], { "placeholder": "placeholder"; "prefix": "prefix"; "suffix": "suffix"; "passwordIcons": "passwordIcons"; "type": "type"; "inputmode": "inputmode"; "disabled": "disabled"; "readonly": "readonly"; "required": "required"; "autofocus": "autofocus"; "autocomplete": "autocomplete"; "value": "value"; }, {}, never, never, false>;
64
+ static ɵcmp: i0.ɵɵComponentDeclaration<WrInput, "wr-input", ["wrInput"], { "placeholder": "placeholder"; "prefix": "prefix"; "suffix": "suffix"; "passwordIcons": "passwordIcons"; "type": "type"; "inputmode": "inputmode"; "disabled": "disabled"; "readonly": "readonly"; "required": "required"; "autofocus": "autofocus"; "autocomplete": "autocomplete"; "value": "value"; }, {}, never, never, false, never>;
65
65
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ngwr",
3
- "version": "0.3.3",
3
+ "version": "0.5.0",
4
4
  "license": "MIT",
5
5
  "description": "NGWR – Angular UI components library",
6
6
  "author": "Roman Khegay <rk@garuna.dev> (https://garuna.dev/)",
@@ -73,6 +73,14 @@
73
73
  "node": "./fesm2015/ngwr-core-decorators.mjs",
74
74
  "default": "./fesm2020/ngwr-core-decorators.mjs"
75
75
  },
76
+ "./core/overlay": {
77
+ "types": "./core/overlay/index.d.ts",
78
+ "esm2020": "./esm2020/core/overlay/ngwr-core-overlay.mjs",
79
+ "es2020": "./fesm2020/ngwr-core-overlay.mjs",
80
+ "es2015": "./fesm2015/ngwr-core-overlay.mjs",
81
+ "node": "./fesm2015/ngwr-core-overlay.mjs",
82
+ "default": "./fesm2020/ngwr-core-overlay.mjs"
83
+ },
76
84
  "./core/types": {
77
85
  "types": "./core/types/index.d.ts",
78
86
  "esm2020": "./esm2020/core/types/ngwr-core-types.mjs",
@@ -144,6 +152,14 @@
144
152
  "es2015": "./fesm2015/ngwr-tag.mjs",
145
153
  "node": "./fesm2015/ngwr-tag.mjs",
146
154
  "default": "./fesm2020/ngwr-tag.mjs"
155
+ },
156
+ "./tooltip": {
157
+ "types": "./tooltip/index.d.ts",
158
+ "esm2020": "./esm2020/tooltip/ngwr-tooltip.mjs",
159
+ "es2020": "./fesm2020/ngwr-tooltip.mjs",
160
+ "es2015": "./fesm2015/ngwr-tooltip.mjs",
161
+ "node": "./fesm2015/ngwr-tooltip.mjs",
162
+ "default": "./fesm2020/ngwr-tooltip.mjs"
147
163
  }
148
164
  },
149
165
  "dependencies": {
@@ -7,5 +7,5 @@ export declare class WrSkeleton {
7
7
  animated: BooleanInput;
8
8
  get elClasses(): SafeAny;
9
9
  static ɵfac: i0.ɵɵFactoryDeclaration<WrSkeleton, never>;
10
- static ɵdir: i0.ɵɵDirectiveDeclaration<WrSkeleton, "wr-skeleton", ["wrSkeleton"], { "color": "color"; "animated": "animated"; }, {}, never, never, false>;
10
+ static ɵdir: i0.ɵɵDirectiveDeclaration<WrSkeleton, "wr-skeleton", ["wrSkeleton"], { "color": "color"; "animated": "animated"; }, {}, never, never, false, never>;
11
11
  }
@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
2
2
  export declare class WrSpinner {
3
3
  class: string;
4
4
  static ɵfac: i0.ɵɵFactoryDeclaration<WrSpinner, never>;
5
- static ɵcmp: i0.ɵɵComponentDeclaration<WrSpinner, "wr-spin", ["wrSpin"], {}, {}, never, never, false>;
5
+ static ɵcmp: i0.ɵɵComponentDeclaration<WrSpinner, "wr-spin", ["wrSpin"], {}, {}, never, never, false, never>;
6
6
  }
package/styles/grid.scss CHANGED
@@ -1,164 +1,55 @@
1
- $grid-columns: 12;
2
- $grid-rows: 1;
3
-
4
- $spacer: 1rem !default;
5
- $gutters: (
6
- 0: 0,
7
- 1: $spacer * .25,
8
- 2: $spacer * .5,
9
- 3: $spacer,
10
- 4: $spacer * 1.5,
11
- 5: $spacer * 3,
12
- );
13
-
14
- $grid-breakpoints: (
15
- 'xs': 0,
16
- 'sm': 576px,
17
- 'md': 768px,
18
- 'lg': 992px,
19
- 'xl': 1200px,
20
- 'xxl': 1400px,
21
- 'xga': 1600px,
22
- 'fhd': 1920px,
23
- 'rt': 2560px
24
- );
25
-
26
- $grid-displays-widths: (
27
- 'sm': 540px,
28
- 'md': 720px,
29
- 'lg': 960px,
30
- 'xl': 1140px,
31
- 'xxl': 1320px,
32
- 'xga': 1530px,
33
- 'fhd': 1830px,
34
- 'rt': 2470px
1
+ $columns: 12;
2
+ $gap: #{var(--wr-grid-gutter)};
3
+ $breakpoints: (
4
+ xs: 640px,
5
+ sm: 768px,
6
+ md: 960px,
7
+ lg: 1170px,
8
+ xl: 1280px
35
9
  );
36
10
 
37
- @function breakpoint-min($name) {
38
- $min: map-get($grid-breakpoints, $name);
39
- @return if($min != 0, $min, null);
40
- }
41
-
42
- @function breakpoint-infix($name) {
43
- @return if(breakpoint-min($name) == null, "", "-#{$name}");
44
- }
11
+ .container {
12
+ width: calc(100% - var(--wr-grid-gutter));
13
+ margin-left: auto;
14
+ margin-right: auto;
45
15
 
46
- @mixin media-breakpoint-up($name) {
47
- $min: breakpoint-min($name);
48
- @if $min {
49
- @media (min-width: $min) {
50
- @content;
16
+ @each $bp, $value in $breakpoints {
17
+ @media only screen and (min-width: $value) {
18
+ max-width: $value;
51
19
  }
52
- } @else {
53
- @content;
54
20
  }
55
21
  }
56
22
 
57
- @function divide($dividend, $divisor, $precision: 10) {
58
- $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
59
- $dividend: abs($dividend);
60
- $divisor: abs($divisor);
61
- @if $dividend == 0 {
62
- @return 0;
63
- }
64
- @if $divisor == 0 {
65
- @error 'Cannot divide by 0';
66
- }
67
- $remainder: $dividend;
68
- $result: 0;
69
- $factor: 10;
70
- @while ($remainder > 0 and $precision >= 0) {
71
- $quotient: 0;
72
- @while ($remainder >= $divisor) {
73
- $remainder: $remainder - $divisor;
74
- $quotient: $quotient + 1;
23
+ @mixin create-selectors($breakpoint: null) {
24
+ $infix: if($breakpoint == null, '', '-#{$breakpoint}');
25
+
26
+ @for $i from 1 through $columns {
27
+ .col#{$infix}-#{$i} {
28
+ grid-column-end: span $i;
75
29
  }
76
- $result: $result * 10 + $quotient;
77
- $factor: $factor * .1;
78
- $remainder: $remainder * 10;
79
- $precision: $precision - 1;
80
- @if ($precision < 0 and $remainder >= $divisor * 5) {
81
- $result: $result + 1;
30
+ .col-offset#{$infix}-#{$i} {
31
+ grid-column-start: $i + 1;
82
32
  }
83
- }
84
- $result: $result * $factor * $sign;
85
- $dividend-unit: unit($dividend);
86
- $divisor-unit: unit($divisor);
87
- $unit-map: (
88
- "px": 1px,
89
- "rem": 1rem,
90
- "em": 1em,
91
- "%": 1%
92
- );
93
- @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
94
- $result: $result * map-get($unit-map, $dividend-unit);
95
- }
96
- @return $result;
97
- }
98
-
99
- .container {
100
- position: relative;
101
- margin: 0 auto;
102
- flex-grow: 1;
103
- width: 100%;
104
- padding-right: var(--wr-grid-gutter);
105
- padding-left: var(--wr-grid-gutter);
106
-
107
- &-fluid {
108
- max-width: none !important;
109
- }
110
- }
111
-
112
- @each $breakpoint, $value in $grid-displays-widths {
113
- @include media-breakpoint-up($breakpoint) {
114
- %responsive-container-#{$breakpoint} {
115
- max-width: $value;
33
+ .row#{$infix}-#{$i} {
34
+ grid-row-end: span $i;
116
35
  }
117
-
118
- $extend-breakpoint: true;
119
-
120
- @each $name, $width in $grid-breakpoints {
121
- @if ($extend-breakpoint) {
122
- .container#{breakpoint-infix($name)} {
123
- @extend %responsive-container-#{$breakpoint};
124
- }
125
-
126
- // Once the current breakpoint is reached, stop extending
127
- @if ($breakpoint == $name) {
128
- $extend-breakpoint: false;
129
- }
130
- }
36
+ .row-offset#{$infix}-#{$i} {
37
+ grid-row-start: $i + 1;
131
38
  }
132
39
  }
133
40
  }
134
41
 
135
-
136
-
137
42
  .grid {
138
43
  display: grid;
139
- grid-template-rows: repeat($grid-rows, 1fr);
140
- grid-template-columns: repeat($grid-columns, 1fr);
141
- gap: var(--wr-grid-gutter, 1rem);
142
-
143
- @each $breakpoint in map-keys($grid-breakpoints) {
144
- $infix: breakpoint-infix($breakpoint);
44
+ grid-template-columns: repeat($columns, 1fr);
45
+ grid-gap: $gap;
46
+ gap: $gap;
47
+ }
145
48
 
146
- @include media-breakpoint-up($breakpoint) {
147
- @if $grid-columns > 0 {
148
- @for $i from 1 through $grid-columns {
149
- .col#{$infix}-#{$i} {
150
- grid-column: auto / span $i;
151
- }
152
- }
49
+ @include create-selectors;
153
50
 
154
- // Start with `1` because `0` is and invalid value.
155
- // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
156
- @for $i from 1 through ($grid-columns - 1) {
157
- .col-start#{$infix}-#{$i} {
158
- grid-column-start: $i;
159
- }
160
- }
161
- }
162
- }
51
+ @each $breakpoint, $width in $breakpoints {
52
+ @media (min-width: $width) {
53
+ @include create-selectors($breakpoint);
163
54
  }
164
55
  }
package/styles/reset.scss CHANGED
@@ -20,6 +20,12 @@ body {
20
20
  margin: 0;
21
21
  padding: 0;
22
22
 
23
+ height: 100%;
24
+ width: 100%;
25
+
26
+ left: 0;
27
+ top: 0;
28
+
23
29
  -webkit-text-size-adjust: 100%;
24
30
  -webkit-tap-highlight-color: rgba(0,0,0,0);
25
31
  -webkit-font-smoothing: antialiased;
package/tag/tag.d.ts CHANGED
@@ -14,5 +14,5 @@ export declare class WrTag {
14
14
  loading: BooleanInput;
15
15
  get elClasses(): SafeAny;
16
16
  static ɵfac: i0.ɵɵFactoryDeclaration<WrTag, never>;
17
- 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>;
17
+ 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>;
18
18
  }
@@ -0,0 +1,5 @@
1
+ export { WrTooltipComponent } from './tooltip-component';
2
+ export { WR_TOOLTIP_DEFAULT_POSITIONS } from './tooltip-default-positions';
3
+ export { WrTooltipDirective } from './tooltip-directive';
4
+ export { WrTooltipModule } from './tooltip-module';
5
+ export { WrTooltipTrigger } from './tooltip-trigger';
@@ -0,0 +1,31 @@
1
+ import { CdkConnectedOverlay, ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay';
2
+ import { ChangeDetectorRef, ElementRef } from '@angular/core';
3
+ import { WrTooltipTrigger } from './tooltip-trigger';
4
+ import * as i0 from "@angular/core";
5
+ export declare class WrTooltipComponent {
6
+ private readonly cdr;
7
+ overlay: CdkConnectedOverlay;
8
+ get message(): string | null;
9
+ set message(value: string | null);
10
+ private _message;
11
+ get trigger(): WrTooltipTrigger;
12
+ set trigger(value: WrTooltipTrigger);
13
+ private _trigger;
14
+ get visible(): boolean;
15
+ set visible(value: boolean);
16
+ private _visible;
17
+ get origin(): ElementRef;
18
+ set origin(value: ElementRef);
19
+ private _origin;
20
+ get position(): string;
21
+ set position(value: string);
22
+ private _position;
23
+ readonly positions: ConnectionPositionPair[];
24
+ constructor(cdr: ChangeDetectorRef);
25
+ show(): void;
26
+ hide(): void;
27
+ onPositionChange(position: ConnectedOverlayPositionChange): void;
28
+ onClickOutside(event: MouseEvent): void;
29
+ static ɵfac: i0.ɵɵFactoryDeclaration<WrTooltipComponent, never>;
30
+ static ɵcmp: i0.ɵɵComponentDeclaration<WrTooltipComponent, "wr-tooltip", never, { "message": "message"; "trigger": "trigger"; "visible": "visible"; "origin": "origin"; "position": "position"; }, {}, never, never, false, never>;
31
+ }
@@ -0,0 +1 @@
1
+ export declare const WR_TOOLTIP_DEFAULT_POSITIONS: import("@angular/cdk/overlay").ConnectionPositionPair[];
@@ -0,0 +1,22 @@
1
+ import { AfterViewInit, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
2
+ import { WrTooltipTrigger } from './tooltip-trigger';
3
+ import * as i0 from "@angular/core";
4
+ export declare class WrTooltipDirective implements AfterViewInit {
5
+ private readonly elRef;
6
+ private readonly r2;
7
+ private readonly vcr;
8
+ message: string | null;
9
+ trigger: WrTooltipTrigger;
10
+ onClick(event: MouseEvent): void;
11
+ onMouseEnter(): void;
12
+ onMouseLeave(): void;
13
+ private readonly componentRef;
14
+ private delayTimer;
15
+ constructor(elRef: ElementRef, r2: Renderer2, vcr: ViewContainerRef);
16
+ ngAfterViewInit(): void;
17
+ private onTooltipShow;
18
+ private onTooltipHide;
19
+ private leaveDelay;
20
+ static ɵfac: i0.ɵɵFactoryDeclaration<WrTooltipDirective, never>;
21
+ static ɵdir: i0.ɵɵDirectiveDeclaration<WrTooltipDirective, "[wrTooltip]", ["wrTooltip"], { "message": "wrTooltip"; "trigger": "trigger"; }, {}, never, never, false, never>;
22
+ }
@@ -0,0 +1,11 @@
1
+ import * as i0 from "@angular/core";
2
+ import * as i1 from "./tooltip-component";
3
+ import * as i2 from "./tooltip-directive";
4
+ import * as i3 from "@angular/common";
5
+ import * as i4 from "@angular/cdk/overlay";
6
+ import * as i5 from "ngwr/core/overlay";
7
+ export declare class WrTooltipModule {
8
+ static ɵfac: i0.ɵɵFactoryDeclaration<WrTooltipModule, never>;
9
+ 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]>;
10
+ static ɵinj: i0.ɵɵInjectorDeclaration<WrTooltipModule>;
11
+ }
@@ -0,0 +1 @@
1
+ export declare type WrTooltipTrigger = 'hover' | 'click';
@@ -0,0 +1,67 @@
1
+ .wr-tooltip {
2
+ $wrTooltipRoot: &;
3
+
4
+ margin: 0.5rem;
5
+
6
+ position: relative;
7
+
8
+ &__wrapper {
9
+ display: inline-block;
10
+
11
+ background: var(--wr-color-dark);
12
+ padding: 0.5rem;
13
+ border-radius: 0.25rem;
14
+ }
15
+
16
+ &__title {
17
+ display: block;
18
+ color: var(--wr-color-white);
19
+ font-size: 0.875rem;
20
+ font-weight: 400;
21
+ line-height: 1rem;
22
+ word-break: break-word;
23
+ }
24
+
25
+ &__arrow {
26
+ display: block;
27
+
28
+ position: absolute;
29
+ z-index: 2;
30
+
31
+ width: 0.5rem;
32
+ height: 0.5rem;
33
+
34
+ background: var(--wr-color-dark);
35
+ pointer-events: none;
36
+
37
+ transform: rotate(45deg);
38
+
39
+ #{$wrTooltipRoot}--top & {
40
+ bottom: -0.25rem;
41
+ left: 0;
42
+ right: 0;
43
+ margin: auto;
44
+ }
45
+
46
+ #{$wrTooltipRoot}--bottom & {
47
+ top: -0.25rem;
48
+ left: 0;
49
+ right: 0;
50
+ margin: auto;
51
+ }
52
+
53
+ #{$wrTooltipRoot}--left & {
54
+ top: 0;
55
+ bottom: 0;
56
+ right: -0.25rem;
57
+ margin: auto;
58
+ }
59
+
60
+ #{$wrTooltipRoot}--right & {
61
+ top: 0;
62
+ bottom: 0;
63
+ left: -0.25rem;
64
+ margin: auto;
65
+ }
66
+ }
67
+ }
package/logo.svg DELETED
@@ -1,6 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3195.1 996.4">
2
- <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"/>
3
- <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" />
4
- <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" />
5
- <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"/>
6
- </svg>