ngwr 9.1.0 → 10.1.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 (276) hide show
  1. package/README.md +23 -8
  2. package/action-sheet/styles/_index.scss +6 -1
  3. package/badge/styles/_index.scss +17 -7
  4. package/badge/styles/_tag.scss +12 -3
  5. package/border-glow/styles/_index.scss +5 -0
  6. package/button/styles/_index.scss +48 -1
  7. package/calendar/styles/_index.scss +9 -1
  8. package/circular-text/styles/_index.scss +6 -1
  9. package/density/styles/_index.scss +3 -1
  10. package/dialog/styles/_index.scss +66 -2
  11. package/drag-drop/styles/_index.scss +20 -7
  12. package/drawer/styles/_index.scss +61 -1
  13. package/event-calendar/styles/_index.scss +284 -0
  14. package/falling-text/styles/_index.scss +5 -0
  15. package/fesm2022/ngwr-action-sheet.mjs +1 -1
  16. package/fesm2022/ngwr-action-sheet.mjs.map +1 -1
  17. package/fesm2022/ngwr-alert.mjs +8 -3
  18. package/fesm2022/ngwr-alert.mjs.map +1 -1
  19. package/fesm2022/ngwr-back-top.mjs +6 -4
  20. package/fesm2022/ngwr-back-top.mjs.map +1 -1
  21. package/fesm2022/ngwr-border-glow.mjs +12 -9
  22. package/fesm2022/ngwr-border-glow.mjs.map +1 -1
  23. package/fesm2022/ngwr-breadcrumbs.mjs +2 -2
  24. package/fesm2022/ngwr-breadcrumbs.mjs.map +1 -1
  25. package/fesm2022/ngwr-calendar.mjs +5 -3
  26. package/fesm2022/ngwr-calendar.mjs.map +1 -1
  27. package/fesm2022/ngwr-card.mjs +2 -2
  28. package/fesm2022/ngwr-card.mjs.map +1 -1
  29. package/fesm2022/ngwr-carousel.mjs +17 -4
  30. package/fesm2022/ngwr-carousel.mjs.map +1 -1
  31. package/fesm2022/ngwr-cascader.mjs +35 -7
  32. package/fesm2022/ngwr-cascader.mjs.map +1 -1
  33. package/fesm2022/ngwr-checkbox.mjs +12 -3
  34. package/fesm2022/ngwr-checkbox.mjs.map +1 -1
  35. package/fesm2022/ngwr-circular-text.mjs +2 -2
  36. package/fesm2022/ngwr-circular-text.mjs.map +1 -1
  37. package/fesm2022/ngwr-color-picker.mjs +6 -5
  38. package/fesm2022/ngwr-color-picker.mjs.map +1 -1
  39. package/fesm2022/ngwr-command-palette.mjs +7 -3
  40. package/fesm2022/ngwr-command-palette.mjs.map +1 -1
  41. package/fesm2022/ngwr-context-menu.mjs +7 -7
  42. package/fesm2022/ngwr-context-menu.mjs.map +1 -1
  43. package/fesm2022/ngwr-counter.mjs +9 -1
  44. package/fesm2022/ngwr-counter.mjs.map +1 -1
  45. package/fesm2022/ngwr-date-picker.mjs +37 -15
  46. package/fesm2022/ngwr-date-picker.mjs.map +1 -1
  47. package/fesm2022/ngwr-density.mjs +10 -2
  48. package/fesm2022/ngwr-density.mjs.map +1 -1
  49. package/fesm2022/ngwr-descriptions.mjs +5 -4
  50. package/fesm2022/ngwr-descriptions.mjs.map +1 -1
  51. package/fesm2022/ngwr-dialog.mjs +10 -1
  52. package/fesm2022/ngwr-dialog.mjs.map +1 -1
  53. package/fesm2022/ngwr-drag-drop.mjs +2 -2
  54. package/fesm2022/ngwr-drag-drop.mjs.map +1 -1
  55. package/fesm2022/ngwr-drawer.mjs +37 -16
  56. package/fesm2022/ngwr-drawer.mjs.map +1 -1
  57. package/fesm2022/ngwr-dropdown.mjs +8 -3
  58. package/fesm2022/ngwr-dropdown.mjs.map +1 -1
  59. package/fesm2022/ngwr-event-calendar.mjs +723 -0
  60. package/fesm2022/ngwr-event-calendar.mjs.map +1 -0
  61. package/fesm2022/ngwr-falling-text.mjs +2 -2
  62. package/fesm2022/ngwr-falling-text.mjs.map +1 -1
  63. package/fesm2022/ngwr-file-upload.mjs +2 -2
  64. package/fesm2022/ngwr-file-upload.mjs.map +1 -1
  65. package/fesm2022/ngwr-form.mjs +258 -42
  66. package/fesm2022/ngwr-form.mjs.map +1 -1
  67. package/fesm2022/ngwr-fuzzy-text.mjs +15 -1
  68. package/fesm2022/ngwr-fuzzy-text.mjs.map +1 -1
  69. package/fesm2022/ngwr-gauge.mjs +8 -3
  70. package/fesm2022/ngwr-gauge.mjs.map +1 -1
  71. package/fesm2022/ngwr-glitch-text.mjs +2 -2
  72. package/fesm2022/ngwr-glitch-text.mjs.map +1 -1
  73. package/fesm2022/ngwr-gradient-text.mjs +2 -2
  74. package/fesm2022/ngwr-gradient-text.mjs.map +1 -1
  75. package/fesm2022/ngwr-i18n-en.mjs +89 -5
  76. package/fesm2022/ngwr-i18n-en.mjs.map +1 -1
  77. package/fesm2022/ngwr-i18n-ru.mjs +90 -5
  78. package/fesm2022/ngwr-i18n-ru.mjs.map +1 -1
  79. package/fesm2022/ngwr-i18n.mjs +94 -3
  80. package/fesm2022/ngwr-i18n.mjs.map +1 -1
  81. package/fesm2022/ngwr-icon.mjs +79 -35
  82. package/fesm2022/ngwr-icon.mjs.map +1 -1
  83. package/fesm2022/ngwr-input-number.mjs +19 -3
  84. package/fesm2022/ngwr-input-number.mjs.map +1 -1
  85. package/fesm2022/ngwr-input.mjs +48 -6
  86. package/fesm2022/ngwr-input.mjs.map +1 -1
  87. package/fesm2022/ngwr-knob.mjs +8 -3
  88. package/fesm2022/ngwr-knob.mjs.map +1 -1
  89. package/fesm2022/ngwr-lightbox.mjs +32 -3
  90. package/fesm2022/ngwr-lightbox.mjs.map +1 -1
  91. package/fesm2022/ngwr-line-chart.mjs +3 -3
  92. package/fesm2022/ngwr-line-chart.mjs.map +1 -1
  93. package/fesm2022/ngwr-list.mjs +2 -2
  94. package/fesm2022/ngwr-list.mjs.map +1 -1
  95. package/fesm2022/ngwr-loading-bar.mjs +2 -2
  96. package/fesm2022/ngwr-loading-bar.mjs.map +1 -1
  97. package/fesm2022/ngwr-marquee.mjs +2 -2
  98. package/fesm2022/ngwr-marquee.mjs.map +1 -1
  99. package/fesm2022/ngwr-media.mjs +3 -0
  100. package/fesm2022/ngwr-media.mjs.map +1 -1
  101. package/fesm2022/ngwr-mention.mjs +166 -10
  102. package/fesm2022/ngwr-mention.mjs.map +1 -1
  103. package/fesm2022/ngwr-meter-group.mjs +14 -3
  104. package/fesm2022/ngwr-meter-group.mjs.map +1 -1
  105. package/fesm2022/ngwr-overlay.mjs +173 -3
  106. package/fesm2022/ngwr-overlay.mjs.map +1 -1
  107. package/fesm2022/ngwr-page-header.mjs +2 -2
  108. package/fesm2022/ngwr-page-header.mjs.map +1 -1
  109. package/fesm2022/ngwr-pagination.mjs +17 -4
  110. package/fesm2022/ngwr-pagination.mjs.map +1 -1
  111. package/fesm2022/ngwr-popconfirm.mjs +4 -3
  112. package/fesm2022/ngwr-popconfirm.mjs.map +1 -1
  113. package/fesm2022/ngwr-popover.mjs +10 -3
  114. package/fesm2022/ngwr-popover.mjs.map +1 -1
  115. package/fesm2022/ngwr-progress.mjs +8 -2
  116. package/fesm2022/ngwr-progress.mjs.map +1 -1
  117. package/fesm2022/ngwr-qr.mjs.map +1 -1
  118. package/fesm2022/ngwr-rating.mjs +6 -4
  119. package/fesm2022/ngwr-rating.mjs.map +1 -1
  120. package/fesm2022/ngwr-result.mjs +19 -12
  121. package/fesm2022/ngwr-result.mjs.map +1 -1
  122. package/fesm2022/ngwr-segmented.mjs +2 -2
  123. package/fesm2022/ngwr-segmented.mjs.map +1 -1
  124. package/fesm2022/ngwr-select.mjs +40 -13
  125. package/fesm2022/ngwr-select.mjs.map +1 -1
  126. package/fesm2022/ngwr-shiny-text.mjs +4 -6
  127. package/fesm2022/ngwr-shiny-text.mjs.map +1 -1
  128. package/fesm2022/ngwr-speed-dial.mjs +11 -3
  129. package/fesm2022/ngwr-speed-dial.mjs.map +1 -1
  130. package/fesm2022/ngwr-spotlight-card.mjs +2 -2
  131. package/fesm2022/ngwr-spotlight-card.mjs.map +1 -1
  132. package/fesm2022/ngwr-squircle.mjs +1 -1
  133. package/fesm2022/ngwr-squircle.mjs.map +1 -1
  134. package/fesm2022/ngwr-star-border.mjs +2 -2
  135. package/fesm2022/ngwr-star-border.mjs.map +1 -1
  136. package/fesm2022/ngwr-switch.mjs +10 -3
  137. package/fesm2022/ngwr-switch.mjs.map +1 -1
  138. package/fesm2022/ngwr-table.mjs +233 -19
  139. package/fesm2022/ngwr-table.mjs.map +1 -1
  140. package/fesm2022/ngwr-tabs.mjs +21 -4
  141. package/fesm2022/ngwr-tabs.mjs.map +1 -1
  142. package/fesm2022/ngwr-textarea.mjs +20 -4
  143. package/fesm2022/ngwr-textarea.mjs.map +1 -1
  144. package/fesm2022/ngwr-theme.mjs +13 -3
  145. package/fesm2022/ngwr-theme.mjs.map +1 -1
  146. package/fesm2022/ngwr-tilt-card.mjs +2 -2
  147. package/fesm2022/ngwr-tilt-card.mjs.map +1 -1
  148. package/fesm2022/ngwr-toolbar.mjs +2 -2
  149. package/fesm2022/ngwr-toolbar.mjs.map +1 -1
  150. package/fesm2022/ngwr-tour.mjs +264 -0
  151. package/fesm2022/ngwr-tour.mjs.map +1 -0
  152. package/fesm2022/ngwr-transfer.mjs +184 -0
  153. package/fesm2022/ngwr-transfer.mjs.map +1 -0
  154. package/fesm2022/ngwr-tree.mjs +27 -9
  155. package/fesm2022/ngwr-tree.mjs.map +1 -1
  156. package/fesm2022/ngwr-typewriter.mjs +2 -2
  157. package/fesm2022/ngwr-typewriter.mjs.map +1 -1
  158. package/fesm2022/ngwr-validators.mjs +118 -2
  159. package/fesm2022/ngwr-validators.mjs.map +1 -1
  160. package/fesm2022/ngwr-version.mjs +2 -2
  161. package/fesm2022/ngwr-version.mjs.map +1 -1
  162. package/fesm2022/ngwr-virtual-scroll.mjs +2 -2
  163. package/fesm2022/ngwr-virtual-scroll.mjs.map +1 -1
  164. package/fesm2022/ngwr-waves.mjs +25 -3
  165. package/fesm2022/ngwr-waves.mjs.map +1 -1
  166. package/form/styles/_index.scss +8 -4
  167. package/glitch-text/styles/_index.scss +5 -0
  168. package/gradient-text/styles/_index.scss +5 -0
  169. package/i18n/en.json +233 -0
  170. package/i18n/ru.json +233 -0
  171. package/icon/styles/_index.scss +15 -1
  172. package/input/styles/_index.scss +16 -0
  173. package/input-number/styles/_index.scss +8 -1
  174. package/keyboard/styles/_index.scss +15 -3
  175. package/llms-full.txt +124 -63
  176. package/llms.txt +29 -8
  177. package/loading-bar/styles/_index.scss +5 -0
  178. package/marquee/styles/_index.scss +7 -2
  179. package/mention/styles/_index.scss +23 -0
  180. package/overlay/styles/_index.scss +5 -0
  181. package/package.json +15 -1
  182. package/pagination/styles/_index.scss +12 -0
  183. package/popover/styles/_index.scss +165 -45
  184. package/pull-to-refresh/styles/_index.scss +5 -0
  185. package/result/styles/_index.scss +3 -3
  186. package/schematics/icon-set/index.js +80 -34
  187. package/schematics/icon-set/schema.json +8 -3
  188. package/schematics/ng-add/index.js +23 -6
  189. package/schematics/package.json +3 -0
  190. package/schematics/page/templates.js +17 -21
  191. package/schematics/provider/index.js +31 -13
  192. package/schematics/provider/schema.json +40 -24
  193. package/schematics/use/index.js +5 -1
  194. package/schematics/use/schema.json +8 -3
  195. package/schematics/use/symbol-map.json +7 -176
  196. package/segmented/styles/_index.scss +1 -1
  197. package/select/styles/_index.scss +20 -3
  198. package/shiny-text/styles/_index.scss +5 -0
  199. package/speed-dial/styles/_index.scss +12 -1
  200. package/splitter/styles/_index.scss +7 -1
  201. package/spotlight-card/styles/_index.scss +5 -0
  202. package/squircle/styles/_index.scss +5 -0
  203. package/star-border/styles/_index.scss +5 -0
  204. package/statistic/styles/_index.scss +2 -2
  205. package/styles/_animations.scss +6 -0
  206. package/styles.scss +3 -0
  207. package/table/styles/_index.scss +128 -12
  208. package/theme/styles/_box-model.scss +29 -0
  209. package/theme/styles/_colors.scss +116 -15
  210. package/theme/styles/_dark.scss +65 -7
  211. package/theme/styles/_focus.scss +2 -8
  212. package/theme/styles/_index.scss +1 -0
  213. package/tilt-card/styles/_index.scss +5 -0
  214. package/toast/styles/_index.scss +6 -3
  215. package/tour/styles/_index.scss +63 -0
  216. package/transfer/styles/_index.scss +105 -0
  217. package/types/ngwr-alert.d.ts +4 -1
  218. package/types/ngwr-avatar.d.ts +1 -1
  219. package/types/ngwr-back-top.d.ts +3 -2
  220. package/types/ngwr-badge.d.ts +1 -1
  221. package/types/ngwr-border-glow.d.ts +0 -1
  222. package/types/ngwr-carousel.d.ts +10 -1
  223. package/types/ngwr-cascader.d.ts +13 -1
  224. package/types/ngwr-checkbox.d.ts +9 -1
  225. package/types/ngwr-color-picker.d.ts +1 -0
  226. package/types/ngwr-command-palette.d.ts +4 -1
  227. package/types/ngwr-context-menu.d.ts +1 -0
  228. package/types/ngwr-date-picker.d.ts +14 -4
  229. package/types/ngwr-density.d.ts +9 -2
  230. package/types/ngwr-dialog.d.ts +9 -0
  231. package/types/ngwr-divider.d.ts +1 -1
  232. package/types/ngwr-drawer.d.ts +20 -4
  233. package/types/ngwr-dropdown.d.ts +1 -0
  234. package/types/ngwr-event-calendar.d.ts +358 -0
  235. package/types/ngwr-form.d.ts +177 -20
  236. package/types/ngwr-fuzzy-text.d.ts +8 -0
  237. package/types/ngwr-gauge.d.ts +4 -1
  238. package/types/ngwr-i18n.d.ts +80 -2
  239. package/types/ngwr-icon.d.ts +11 -19
  240. package/types/ngwr-input-number.d.ts +8 -1
  241. package/types/ngwr-input.d.ts +50 -20
  242. package/types/ngwr-knob.d.ts +4 -1
  243. package/types/ngwr-lightbox.d.ts +7 -1
  244. package/types/ngwr-line-chart.d.ts +1 -1
  245. package/types/ngwr-media.d.ts +1 -1
  246. package/types/ngwr-mention.d.ts +45 -1
  247. package/types/ngwr-meter-group.d.ts +9 -1
  248. package/types/ngwr-overlay.d.ts +80 -2
  249. package/types/ngwr-page-header.d.ts +2 -2
  250. package/types/ngwr-pagination.d.ts +15 -2
  251. package/types/ngwr-popconfirm.d.ts +1 -0
  252. package/types/ngwr-popover.d.ts +1 -0
  253. package/types/ngwr-progress.d.ts +4 -1
  254. package/types/ngwr-rating.d.ts +3 -2
  255. package/types/ngwr-result.d.ts +12 -6
  256. package/types/ngwr-segmented.d.ts +6 -0
  257. package/types/ngwr-select.d.ts +19 -7
  258. package/types/ngwr-shiny-text.d.ts +2 -4
  259. package/types/ngwr-speed-dial.d.ts +7 -1
  260. package/types/ngwr-squircle.d.ts +1 -1
  261. package/types/ngwr-switch.d.ts +7 -1
  262. package/types/ngwr-table.d.ts +126 -6
  263. package/types/ngwr-tabs.d.ts +1 -4
  264. package/types/ngwr-textarea.d.ts +8 -1
  265. package/types/ngwr-theme.d.ts +8 -1
  266. package/types/ngwr-toolbar.d.ts +2 -2
  267. package/types/ngwr-tour.d.ts +132 -0
  268. package/types/ngwr-transfer.d.ts +118 -0
  269. package/types/ngwr-tree.d.ts +11 -2
  270. package/types/ngwr-validators.d.ts +62 -2
  271. package/types/ngwr-version.d.ts +2 -2
  272. package/types/ngwr-waves.d.ts +10 -0
  273. package/typewriter/styles/_index.scss +5 -0
  274. package/typography/styles/_index.scss +3 -3
  275. package/virtual-scroll/styles/_index.scss +6 -1
  276. package/waves/styles/_index.scss +26 -0
@@ -0,0 +1,284 @@
1
+ /// Event calendar — month / week / day.
2
+ ///
3
+ /// Grid lines are `box-shadow: inset`, never borders. A border would take up
4
+ /// layout space, and the whole chip model depends on cell boxes being exactly
5
+ /// contiguous: a band's `calc(var(--span) * 100%)` is only the right width if
6
+ /// one cell ends precisely where the next begins.
7
+ .wr-event-calendar {
8
+ --wr-event-calendar-slot-height: 1.5rem;
9
+ --wr-event-calendar-band-height: 1.25rem;
10
+ --wr-event-calendar-gutter: 3.75rem;
11
+ --wr-event-calendar-line: var(--wr-color-outline);
12
+ // The house fill for a header strip — `wr-table` and `wr-transfer` use the
13
+ // same one. NOT `--wr-color-light`, which is an intent colour: it composites
14
+ // dark enough that `--wr-color-on-surface-muted` on top of it lands at 3.6:1.
15
+ --wr-event-calendar-fill: rgba(var(--wr-color-outline-rgb), 0.25);
16
+ --wr-event-calendar-cols: 7;
17
+
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: 0.75rem;
21
+ color: var(--wr-color-on-surface);
22
+
23
+ &__header {
24
+ display: flex;
25
+ flex-wrap: wrap;
26
+ align-items: center;
27
+ gap: 0.5rem 0.75rem;
28
+ }
29
+
30
+ &__nav {
31
+ display: flex;
32
+ align-items: center;
33
+ gap: 0.25rem;
34
+ }
35
+
36
+ &__step .wr-icon__svg {
37
+ width: 1em;
38
+ height: 1em;
39
+ }
40
+
41
+ &__title {
42
+ flex: 1 1 auto;
43
+ margin: 0;
44
+ font-size: var(--wr-text-lg);
45
+ font-weight: var(--wr-font-weight-semibold);
46
+ }
47
+
48
+ &__grid {
49
+ display: grid;
50
+ overflow: hidden;
51
+ border-radius: var(--wr-border-radius-base);
52
+ box-shadow: 0 0 0 1px var(--wr-event-calendar-line);
53
+
54
+ &--month {
55
+ grid-template-columns: repeat(7, minmax(0, 1fr));
56
+ }
57
+
58
+ &--time {
59
+ grid-template-columns: var(--wr-event-calendar-gutter) repeat(var(--wr-event-calendar-cols), minmax(0, 1fr));
60
+ }
61
+ }
62
+
63
+ // The row box is dissolved so its cells land on the parent grid; the ARIA
64
+ // role survives — `display: contents` removes the box, not the semantics.
65
+ &__row {
66
+ display: contents;
67
+ }
68
+
69
+ &__weekday,
70
+ &__colhead {
71
+ padding: 0.5rem 0.375rem;
72
+ font-size: var(--wr-text-xs);
73
+ font-weight: var(--wr-font-weight-medium);
74
+ color: var(--wr-color-on-surface-muted);
75
+ text-align: center;
76
+ background: var(--wr-event-calendar-fill);
77
+ box-shadow: inset 0 -1px 0 var(--wr-event-calendar-line);
78
+ }
79
+
80
+ &__colhead {
81
+ display: flex;
82
+ flex-direction: column;
83
+ gap: 0.125rem;
84
+
85
+ &--today {
86
+ color: var(--wr-color-primary-ink);
87
+ }
88
+
89
+ &-day {
90
+ font-size: var(--wr-text-base);
91
+ font-weight: var(--wr-font-weight-semibold);
92
+ color: var(--wr-color-on-surface);
93
+ }
94
+ }
95
+
96
+ &__gutter {
97
+ padding: 0 0.5rem;
98
+ font-size: var(--wr-text-xs);
99
+ color: var(--wr-color-on-surface-muted);
100
+ text-align: end;
101
+ // Nudged up so the label reads as the line it labels, not the band below it.
102
+ transform: translateY(-0.5em);
103
+ box-shadow: inset -1px 0 0 var(--wr-event-calendar-line);
104
+ }
105
+
106
+ &__cell {
107
+ // `relative` with NO z-index: that keeps the cell out of the stacking
108
+ // order, so a chip's `z-index: 1` lifts it over the cells that follow it in
109
+ // the DOM. Give the cell a z-index and it becomes a stacking context, and
110
+ // every chip is trapped inside its own cell again.
111
+ position: relative;
112
+ min-width: 0;
113
+ cursor: pointer;
114
+ box-shadow: inset -1px -1px 0 var(--wr-event-calendar-line);
115
+
116
+ &:focus-visible {
117
+ z-index: 2;
118
+ outline: 2px solid var(--wr-color-primary);
119
+ outline-offset: -2px;
120
+ }
121
+
122
+ &--day {
123
+ min-height: 5.5rem;
124
+ padding: 0.25rem;
125
+ }
126
+
127
+ &--muted {
128
+ background: var(--wr-event-calendar-fill);
129
+
130
+ .wr-event-calendar__daynum {
131
+ color: var(--wr-color-on-surface-muted);
132
+ }
133
+ }
134
+
135
+ &--today .wr-event-calendar__daynum {
136
+ color: var(--wr-color-primary-contrast);
137
+ background: var(--wr-color-primary);
138
+ }
139
+
140
+ &--allday {
141
+ min-height: calc(var(--wr-event-calendar-band-height) + 0.5rem);
142
+ padding: 0.125rem 0;
143
+ }
144
+
145
+ &--slot {
146
+ height: var(--wr-event-calendar-slot-height);
147
+ box-shadow: inset -1px 0 0 var(--wr-event-calendar-line);
148
+ }
149
+
150
+ &--major {
151
+ box-shadow:
152
+ inset -1px 0 0 var(--wr-event-calendar-line),
153
+ inset 0 1px 0 var(--wr-event-calendar-line);
154
+ }
155
+ }
156
+
157
+ &__daynum {
158
+ display: inline-flex;
159
+ align-items: center;
160
+ justify-content: center;
161
+ min-width: 1.5rem;
162
+ height: 1.5rem;
163
+ font-size: var(--wr-text-sm);
164
+ border-radius: var(--wr-border-radius-pill);
165
+ }
166
+
167
+ &__chip {
168
+ position: absolute;
169
+ z-index: 1;
170
+ display: flex;
171
+ gap: 0.25rem;
172
+ align-items: baseline;
173
+ overflow: hidden;
174
+ font: inherit;
175
+ font-size: var(--wr-text-xs);
176
+ line-height: 1.2;
177
+ color: var(--wr-color-on-surface);
178
+ text-align: start;
179
+ white-space: nowrap;
180
+ cursor: inherit;
181
+ background: color-mix(in srgb, var(--wr-event-calendar-color) 18%, transparent);
182
+ border: 0;
183
+ border-inline-start: 3px solid var(--wr-event-calendar-color);
184
+ border-radius: var(--wr-border-radius-sm);
185
+ transition: filter var(--wr-transition-short);
186
+
187
+ &:hover {
188
+ filter: brightness(0.96);
189
+ }
190
+
191
+ &:focus-visible {
192
+ z-index: 3;
193
+ outline: 2px solid var(--wr-color-primary);
194
+ outline-offset: 1px;
195
+ }
196
+
197
+ &--band {
198
+ inset-inline-start: 0.125rem;
199
+ top: calc(
200
+ var(--wr-event-calendar-offset) + var(--wr-event-calendar-lane) *
201
+ (var(--wr-event-calendar-band-height) + 0.125rem)
202
+ );
203
+ // Reaching across `--span` cells: each is exactly 100% of this one,
204
+ // because the grid has no gaps and the lines cost no layout space.
205
+ width: calc(var(--wr-event-calendar-span) * 100% - 0.25rem);
206
+ height: var(--wr-event-calendar-band-height);
207
+ padding: 0 0.375rem;
208
+ }
209
+
210
+ &--time {
211
+ padding: 0.125rem 0.25rem;
212
+ flex-direction: column;
213
+ gap: 0;
214
+ align-items: stretch;
215
+ white-space: normal;
216
+ }
217
+
218
+ // A segment clipped by the edge of the view loses the rounding on that side,
219
+ // so a week boundary reads as "continues" rather than "ends here".
220
+ &--continues-before {
221
+ border-inline-start-width: 0;
222
+ border-start-start-radius: 0;
223
+ border-end-start-radius: 0;
224
+ }
225
+
226
+ &--continues-after {
227
+ border-start-end-radius: 0;
228
+ border-end-end-radius: 0;
229
+ }
230
+
231
+ &--dragging {
232
+ // Off the hit-testing path: the drop target is read with
233
+ // `elementFromPoint`, which would otherwise only ever see the chip.
234
+ pointer-events: none;
235
+ opacity: 0.6;
236
+ }
237
+
238
+ &-time {
239
+ font-weight: var(--wr-font-weight-medium);
240
+ color: var(--wr-color-on-surface-muted);
241
+ }
242
+
243
+ &-title {
244
+ overflow: hidden;
245
+ text-overflow: ellipsis;
246
+ }
247
+ }
248
+
249
+ &__resize {
250
+ position: absolute;
251
+ inset-inline: 0;
252
+ bottom: 0;
253
+ height: 0.375rem;
254
+ cursor: ns-resize;
255
+ }
256
+
257
+ &__more {
258
+ position: absolute;
259
+ inset-inline-start: 0.125rem;
260
+ top: calc(1.75rem + var(--wr-event-calendar-lane) * (var(--wr-event-calendar-band-height) + 0.125rem));
261
+ padding: 0 0.375rem;
262
+ font: inherit;
263
+ font-size: var(--wr-text-xs);
264
+ color: var(--wr-color-on-surface-muted);
265
+ cursor: pointer;
266
+ background: none;
267
+ border: 0;
268
+ border-radius: var(--wr-border-radius-sm);
269
+
270
+ &:hover {
271
+ color: var(--wr-color-on-surface);
272
+ text-decoration: underline;
273
+ }
274
+ }
275
+
276
+ &--editable &__chip {
277
+ cursor: grab;
278
+ }
279
+
280
+ &--dragging {
281
+ cursor: grabbing;
282
+ user-select: none;
283
+ }
284
+ }
@@ -1,3 +1,8 @@
1
+ // Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
2
+ // design token this stylesheet references. Sass deduplicates `@use` per
3
+ // compilation, so the umbrella sheet still emits the theme only once.
4
+ @use '../../theme/styles' as theme;
5
+
1
6
  .wr-falling-text {
2
7
  position: relative;
3
8
  display: block;
@@ -66,7 +66,7 @@ class WrActionSheet {
66
66
  this.open.set(false);
67
67
  }
68
68
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrActionSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
69
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrActionSheet, isStandalone: true, selector: "wr-action-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", action: "action" }, ngImport: i0, template: "<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n <div class=\"wr-action-sheet\">\n @if (title() || message()) {\n <div class=\"wr-action-sheet__header\">\n @if (title()) {\n <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n }\n @if (message()) {\n <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n }\n </div>\n }\n <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n When there is no visible title, a screen-reader-only fallback keeps the\n dialog from being announced as unnamed. -->\n @if (!title()) {\n <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>Actions</span>\n }\n\n <div class=\"wr-action-sheet__group\">\n @for (item of mainActions(); track $index) {\n <button\n type=\"button\"\n class=\"wr-action-sheet__action\"\n [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n [disabled]=\"item.disabled\"\n (click)=\"select(item)\"\n >\n @if (item.icon) {\n <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n }\n <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n </button>\n }\n </div>\n\n @if (cancelActions().length) {\n <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n @for (item of cancelActions(); track $index) {\n <button\n type=\"button\"\n class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n [disabled]=\"item.disabled\"\n (click)=\"select(item)\"\n >\n <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n </button>\n }\n </div>\n }\n </div>\n</wr-drawer>\n", dependencies: [{ kind: "component", type: WrDrawer, selector: "wr-drawer", inputs: ["open", "position", "width", "height", "maxHeight", "rounded", "showHandle", "safeArea", "hasBackdrop", "closeOnBackdropClick", "closeOnEscape"], outputs: ["openChange"] }, { kind: "directive", type: WrDrawerTitle, selector: "[wrDrawerTitle]" }, { kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
69
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrActionSheet, isStandalone: true, selector: "wr-action-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", action: "action" }, ngImport: i0, template: "<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n <div class=\"wr-action-sheet\">\n @if (title() || message()) {\n <div class=\"wr-action-sheet__header\">\n @if (title()) {\n <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n }\n @if (message()) {\n <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n }\n </div>\n }\n <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n When there is no visible title, a screen-reader-only fallback keeps the\n dialog from being announced as unnamed. -->\n @if (!title()) {\n <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>Actions</span>\n }\n\n <div class=\"wr-action-sheet__group\">\n @for (item of mainActions(); track $index) {\n <button\n type=\"button\"\n class=\"wr-action-sheet__action\"\n [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n [disabled]=\"item.disabled\"\n (click)=\"select(item)\"\n >\n @if (item.icon) {\n <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n }\n <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n </button>\n }\n </div>\n\n @if (cancelActions().length) {\n <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n @for (item of cancelActions(); track $index) {\n <button\n type=\"button\"\n class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n [disabled]=\"item.disabled\"\n (click)=\"select(item)\"\n >\n <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n </button>\n }\n </div>\n }\n </div>\n</wr-drawer>\n", dependencies: [{ kind: "component", type: WrDrawer, selector: "wr-drawer", inputs: ["open", "position", "width", "height", "maxHeight", "rounded", "showHandle", "safeArea", "hasBackdrop", "closeOnBackdropClick", "closeOnEscape", "closable", "closeLabel"], outputs: ["openChange"] }, { kind: "directive", type: WrDrawerTitle, selector: "[wrDrawerTitle]" }, { kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
70
70
  }
71
71
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrActionSheet, decorators: [{
72
72
  type: Component,
@@ -1 +1 @@
1
- {"version":3,"file":"ngwr-action-sheet.mjs","sources":["../../../projects/lib/action-sheet/action-sheet.ts","../../../projects/lib/action-sheet/action-sheet.html","../../../projects/lib/action-sheet/ngwr-action-sheet.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, computed, inject, input, model, output } from '@angular/core';\n\nimport { WrDrawer, WrDrawerTitle } from 'ngwr/drawer';\nimport { WrIcon } from 'ngwr/icon';\nimport { WrHaptics } from 'ngwr/platform';\n\nimport type { WrActionSheetAction } from './interfaces';\n\n/**\n * iOS-style action sheet — a bottom sheet offering a short list of choices.\n * A thin preset over {@link WrDrawer} (bottom position, rounded, grab handle,\n * safe-area padding), driven by data rather than projected content.\n *\n * Pass `actions`; picking one emits `action` and closes the sheet. Rows with\n * `role: 'destructive'` are painted in the danger colour, and `role: 'cancel'`\n * rows drop to a separate group at the bottom. Dismissing via the backdrop,\n * `Escape`, or a swipe-down closes without emitting. Picking fires a light\n * {@link WrHaptics} tick.\n *\n * @example\n * ```html\n * <wr-action-sheet\n * [(open)]=\"sheetOpen\"\n * title=\"Photo\"\n * [actions]=\"[\n * { label: 'Take Photo', icon: 'camera', value: 'camera' },\n * { label: 'Choose from Library', icon: 'image', value: 'library' },\n * { label: 'Delete', role: 'destructive', value: 'delete' },\n * { label: 'Cancel', role: 'cancel' },\n * ]\"\n * (action)=\"onPick($event)\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/action-sheet\n */\n@Component({\n selector: 'wr-action-sheet',\n templateUrl: './action-sheet.html',\n encapsulation: ViewEncapsulation.None,\n imports: [WrDrawer, WrDrawerTitle, WrIcon],\n})\nexport class WrActionSheet {\n private readonly haptics = inject(WrHaptics);\n\n /** Whether the sheet is open. Two-way. @default false */\n readonly open = model<boolean>(false);\n\n /** The rows to offer. */\n readonly actions = input<readonly WrActionSheetAction[]>([]);\n\n /** Optional bold heading above the rows. */\n readonly title = input<string>('');\n\n /** Optional muted sub-heading under the title. */\n readonly message = input<string>('');\n\n /** Fires with the chosen row (never fires on a dismiss). */\n readonly action = output<WrActionSheetAction>();\n\n protected readonly mainActions = computed(() => this.actions().filter(a => a.role !== 'cancel'));\n protected readonly cancelActions = computed(() => this.actions().filter(a => a.role === 'cancel'));\n\n protected select(item: WrActionSheetAction): void {\n if (item.disabled) return;\n this.haptics.selection();\n this.action.emit(item);\n this.open.set(false);\n }\n}\n","<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n <div class=\"wr-action-sheet\">\n @if (title() || message()) {\n <div class=\"wr-action-sheet__header\">\n @if (title()) {\n <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n }\n @if (message()) {\n <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n }\n </div>\n }\n <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n When there is no visible title, a screen-reader-only fallback keeps the\n dialog from being announced as unnamed. -->\n @if (!title()) {\n <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>Actions</span>\n }\n\n <div class=\"wr-action-sheet__group\">\n @for (item of mainActions(); track $index) {\n <button\n type=\"button\"\n class=\"wr-action-sheet__action\"\n [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n [disabled]=\"item.disabled\"\n (click)=\"select(item)\"\n >\n @if (item.icon) {\n <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n }\n <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n </button>\n }\n </div>\n\n @if (cancelActions().length) {\n <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n @for (item of cancelActions(); track $index) {\n <button\n type=\"button\"\n class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n [disabled]=\"item.disabled\"\n (click)=\"select(item)\"\n >\n <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n </button>\n }\n </div>\n }\n </div>\n</wr-drawer>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAAA;;;;;AAKG;AAUH;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;MAOU,aAAa,CAAA;AACP,IAAA,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC;;IAGnC,IAAI,GAAG,KAAK,CAAU,KAAK;6EAAC;;IAG5B,OAAO,GAAG,KAAK,CAAiC,EAAE;gFAAC;;IAGnD,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;;IAGzB,OAAO,GAAG,KAAK,CAAS,EAAE;gFAAC;;IAG3B,MAAM,GAAG,MAAM,EAAuB;IAE5B,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC;oFAAC;IAC7E,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC;sFAAC;AAExF,IAAA,MAAM,CAAC,IAAyB,EAAA;QACxC,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;AACxB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;IACtB;uGA1BW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,mnBCjD1B,y5DAoDA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDLY,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,SAAA,EAAA,YAAA,EAAA,UAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,4DAAE,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAE9B,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;+BACE,iBAAiB,EAAA,aAAA,EAEZ,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B,CAAC,QAAQ,EAAE,aAAa,EAAE,MAAM,CAAC,EAAA,QAAA,EAAA,y5DAAA,EAAA;;;AE/C5C;;AAEG;;;;"}
1
+ {"version":3,"file":"ngwr-action-sheet.mjs","sources":["../../../projects/lib/action-sheet/action-sheet.ts","../../../projects/lib/action-sheet/action-sheet.html","../../../projects/lib/action-sheet/ngwr-action-sheet.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, computed, inject, input, model, output } from '@angular/core';\n\nimport { WrDrawer, WrDrawerTitle } from 'ngwr/drawer';\nimport { WrIcon } from 'ngwr/icon';\nimport { WrHaptics } from 'ngwr/platform';\n\nimport type { WrActionSheetAction } from './interfaces';\n\n/**\n * iOS-style action sheet — a bottom sheet offering a short list of choices.\n * A thin preset over {@link WrDrawer} (bottom position, rounded, grab handle,\n * safe-area padding), driven by data rather than projected content.\n *\n * Pass `actions`; picking one emits `action` and closes the sheet. Rows with\n * `role: 'destructive'` are painted in the danger colour, and `role: 'cancel'`\n * rows drop to a separate group at the bottom. Dismissing via the backdrop,\n * `Escape`, or a swipe-down closes without emitting. Picking fires a light\n * {@link WrHaptics} tick.\n *\n * @example\n * ```html\n * <wr-action-sheet\n * [(open)]=\"sheetOpen\"\n * title=\"Photo\"\n * [actions]=\"[\n * { label: 'Take Photo', icon: 'camera', value: 'camera' },\n * { label: 'Choose from Library', icon: 'image', value: 'library' },\n * { label: 'Delete', role: 'destructive', value: 'delete' },\n * { label: 'Cancel', role: 'cancel' },\n * ]\"\n * (action)=\"onPick($event)\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/action-sheet\n */\n@Component({\n selector: 'wr-action-sheet',\n templateUrl: './action-sheet.html',\n encapsulation: ViewEncapsulation.None,\n imports: [WrDrawer, WrDrawerTitle, WrIcon],\n})\nexport class WrActionSheet {\n private readonly haptics = inject(WrHaptics);\n\n /** Whether the sheet is open. Two-way. @default false */\n readonly open = model<boolean>(false);\n\n /** The rows to offer. */\n readonly actions = input<readonly WrActionSheetAction[]>([]);\n\n /** Optional bold heading above the rows. */\n readonly title = input<string>('');\n\n /** Optional muted sub-heading under the title. */\n readonly message = input<string>('');\n\n /** Fires with the chosen row (never fires on a dismiss). */\n readonly action = output<WrActionSheetAction>();\n\n protected readonly mainActions = computed(() => this.actions().filter(a => a.role !== 'cancel'));\n protected readonly cancelActions = computed(() => this.actions().filter(a => a.role === 'cancel'));\n\n protected select(item: WrActionSheetAction): void {\n if (item.disabled) return;\n this.haptics.selection();\n this.action.emit(item);\n this.open.set(false);\n }\n}\n","<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n <div class=\"wr-action-sheet\">\n @if (title() || message()) {\n <div class=\"wr-action-sheet__header\">\n @if (title()) {\n <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n }\n @if (message()) {\n <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n }\n </div>\n }\n <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n When there is no visible title, a screen-reader-only fallback keeps the\n dialog from being announced as unnamed. -->\n @if (!title()) {\n <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>Actions</span>\n }\n\n <div class=\"wr-action-sheet__group\">\n @for (item of mainActions(); track $index) {\n <button\n type=\"button\"\n class=\"wr-action-sheet__action\"\n [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n [disabled]=\"item.disabled\"\n (click)=\"select(item)\"\n >\n @if (item.icon) {\n <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n }\n <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n </button>\n }\n </div>\n\n @if (cancelActions().length) {\n <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n @for (item of cancelActions(); track $index) {\n <button\n type=\"button\"\n class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n [disabled]=\"item.disabled\"\n (click)=\"select(item)\"\n >\n <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n </button>\n }\n </div>\n }\n </div>\n</wr-drawer>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAAA;;;;;AAKG;AAUH;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;MAOU,aAAa,CAAA;AACP,IAAA,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC;;IAGnC,IAAI,GAAG,KAAK,CAAU,KAAK;6EAAC;;IAG5B,OAAO,GAAG,KAAK,CAAiC,EAAE;gFAAC;;IAGnD,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;;IAGzB,OAAO,GAAG,KAAK,CAAS,EAAE;gFAAC;;IAG3B,MAAM,GAAG,MAAM,EAAuB;IAE5B,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC;oFAAC;IAC7E,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC;sFAAC;AAExF,IAAA,MAAM,CAAC,IAAyB,EAAA;QACxC,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;AACxB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;IACtB;uGA1BW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,mnBCjD1B,y5DAoDA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDLY,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,SAAA,EAAA,YAAA,EAAA,UAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,4DAAE,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAE9B,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;+BACE,iBAAiB,EAAA,aAAA,EAEZ,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B,CAAC,QAAQ,EAAE,aAAa,EAAE,MAAM,CAAC,EAAA,QAAA,EAAA,y5DAAA,EAAA;;;AE/C5C;;AAEG;;;;"}
@@ -1,6 +1,7 @@
1
1
  import { coerceBooleanProperty } from '@angular/cdk/coercion';
2
2
  import * as i0 from '@angular/core';
3
3
  import { input, output, signal, computed, ViewEncapsulation, Component } from '@angular/core';
4
+ import { useI18nText } from 'ngwr/i18n';
4
5
  import { WrIcon } from 'ngwr/icon';
5
6
 
6
7
  /**
@@ -21,6 +22,10 @@ import { WrIcon } from 'ngwr/icon';
21
22
  * @see https://ngwr.dev/reference/components/alert
22
23
  */
23
24
  class WrAlert {
25
+ /** Accessible name. Falls back to `alert.close`, then `'Close alert'`. */
26
+ closeLabel = input(null, /* @ts-ignore */
27
+ ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
28
+ resolvedCloseLabel = useI18nText(this.closeLabel, 'alert.close', 'Close alert');
24
29
  /**
25
30
  * Optional headline shown at the top of the alert.
26
31
  *
@@ -85,7 +90,7 @@ class WrAlert {
85
90
  this.closed.emit();
86
91
  }
87
92
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
88
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrAlert, isStandalone: true, selector: "wr-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "classes()", "attr.role": "liveRole()", "attr.aria-live": "liveLevel()" } }, ngImport: i0, template: "@if (!dismissed()) {\n @if (iconName(); as n) {\n <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n } @else if (icon()) {\n <svg\n class=\"wr-alert__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n @switch (type()) {\n @case ('success') {\n <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n <path d=\"m9 11 3 3L22 4\" />\n }\n @case ('warning') {\n <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n }\n @case ('danger') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 8v4\" />\n <path d=\"M12 16h.01\" />\n }\n @case ('neutral') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 8v4\" />\n <path d=\"M12 16h.01\" />\n }\n @case ('offline') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"m4.9 4.9 14.2 14.2\" />\n }\n @default {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 16v-4\" />\n <path d=\"M12 8h.01\" />\n }\n }\n </svg>\n }\n\n <div class=\"wr-alert__body\">\n @if (title(); as t) {\n <p class=\"wr-alert__title\">{{ t }}</p>\n @if (message(); as m) {\n <p class=\"wr-alert__message\">{{ m }}</p>\n }\n } @else if (message(); as m) {\n <p class=\"wr-alert__title\">{{ m }}</p>\n }\n </div>\n\n @if (closeable()) {\n <button type=\"button\" class=\"wr-alert__close\" aria-label=\"Close alert\" (click)=\"onClose()\">\n <svg\n class=\"wr-icon__svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n </button>\n }\n}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
93
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrAlert, isStandalone: true, selector: "wr-alert", inputs: { closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "classes()", "attr.role": "liveRole()", "attr.aria-live": "liveLevel()" } }, ngImport: i0, template: "@if (!dismissed()) {\n @if (iconName(); as n) {\n <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n } @else if (icon()) {\n <svg\n class=\"wr-alert__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n @switch (type()) {\n @case ('success') {\n <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n <path d=\"m9 11 3 3L22 4\" />\n }\n @case ('warning') {\n <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n }\n @case ('danger') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 8v4\" />\n <path d=\"M12 16h.01\" />\n }\n @case ('neutral') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 8v4\" />\n <path d=\"M12 16h.01\" />\n }\n @case ('offline') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"m4.9 4.9 14.2 14.2\" />\n }\n @default {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 16v-4\" />\n <path d=\"M12 8h.01\" />\n }\n }\n </svg>\n }\n\n <div class=\"wr-alert__body\">\n @if (title(); as t) {\n <p class=\"wr-alert__title\">{{ t }}</p>\n @if (message(); as m) {\n <p class=\"wr-alert__message\">{{ m }}</p>\n }\n } @else if (message(); as m) {\n <p class=\"wr-alert__title\">{{ m }}</p>\n }\n </div>\n\n @if (closeable()) {\n <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n <svg\n class=\"wr-icon__svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n </button>\n }\n}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
89
94
  }
90
95
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrAlert, decorators: [{
91
96
  type: Component,
@@ -93,8 +98,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
93
98
  '[class]': 'classes()',
94
99
  '[attr.role]': 'liveRole()',
95
100
  '[attr.aria-live]': 'liveLevel()',
96
- }, template: "@if (!dismissed()) {\n @if (iconName(); as n) {\n <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n } @else if (icon()) {\n <svg\n class=\"wr-alert__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n @switch (type()) {\n @case ('success') {\n <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n <path d=\"m9 11 3 3L22 4\" />\n }\n @case ('warning') {\n <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n }\n @case ('danger') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 8v4\" />\n <path d=\"M12 16h.01\" />\n }\n @case ('neutral') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 8v4\" />\n <path d=\"M12 16h.01\" />\n }\n @case ('offline') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"m4.9 4.9 14.2 14.2\" />\n }\n @default {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 16v-4\" />\n <path d=\"M12 8h.01\" />\n }\n }\n </svg>\n }\n\n <div class=\"wr-alert__body\">\n @if (title(); as t) {\n <p class=\"wr-alert__title\">{{ t }}</p>\n @if (message(); as m) {\n <p class=\"wr-alert__message\">{{ m }}</p>\n }\n } @else if (message(); as m) {\n <p class=\"wr-alert__title\">{{ m }}</p>\n }\n </div>\n\n @if (closeable()) {\n <button type=\"button\" class=\"wr-alert__close\" aria-label=\"Close alert\" (click)=\"onClose()\">\n <svg\n class=\"wr-icon__svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n </button>\n }\n}\n" }]
97
- }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
101
+ }, template: "@if (!dismissed()) {\n @if (iconName(); as n) {\n <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n } @else if (icon()) {\n <svg\n class=\"wr-alert__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n @switch (type()) {\n @case ('success') {\n <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n <path d=\"m9 11 3 3L22 4\" />\n }\n @case ('warning') {\n <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n }\n @case ('danger') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 8v4\" />\n <path d=\"M12 16h.01\" />\n }\n @case ('neutral') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 8v4\" />\n <path d=\"M12 16h.01\" />\n }\n @case ('offline') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"m4.9 4.9 14.2 14.2\" />\n }\n @default {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 16v-4\" />\n <path d=\"M12 8h.01\" />\n }\n }\n </svg>\n }\n\n <div class=\"wr-alert__body\">\n @if (title(); as t) {\n <p class=\"wr-alert__title\">{{ t }}</p>\n @if (message(); as m) {\n <p class=\"wr-alert__message\">{{ m }}</p>\n }\n } @else if (message(); as m) {\n <p class=\"wr-alert__title\">{{ m }}</p>\n }\n </div>\n\n @if (closeable()) {\n <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n <svg\n class=\"wr-icon__svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n </button>\n }\n}\n" }]
102
+ }], propDecorators: { closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
98
103
 
99
104
  /**
100
105
  * Generated bundle index. Do not edit.
@@ -1 +1 @@
1
- {"version":3,"file":"ngwr-alert.mjs","sources":["../../../projects/lib/alert/alert.ts","../../../projects/lib/alert/alert.html","../../../projects/lib/alert/ngwr-alert.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input, output, signal } from '@angular/core';\n\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\n\nimport type { WrAlertType } from './interfaces';\n\n/**\n * Inline status banner. Use for feedback messages — saved/failed/notice etc.\n *\n * @example\n * ```html\n * <wr-alert title=\"Saved\" message=\"Your changes are live.\" type=\"success\" />\n * <wr-alert title=\"Failed\" type=\"danger\" closeable (closed)=\"onClose()\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/alert\n */\n@Component({\n selector: 'wr-alert',\n templateUrl: './alert.html',\n imports: [WrIcon],\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'classes()',\n '[attr.role]': 'liveRole()',\n '[attr.aria-live]': 'liveLevel()',\n },\n})\nexport class WrAlert {\n /**\n * Optional headline shown at the top of the alert.\n *\n * @default null\n */\n readonly title = input<string | null>(null);\n\n /**\n * Visual variant.\n *\n * @default 'info'\n */\n readonly type = input<WrAlertType>('info');\n\n /**\n * Override the default per-type icon with any ngwr icon name.\n *\n * @default null\n */\n readonly iconName = input<WrIconName | null>(null);\n\n /**\n * Optional secondary message rendered below the title.\n *\n * @default null\n */\n readonly message = input<string | null>(null);\n\n /**\n * When `true`, renders a leading status icon matching the `type`.\n * Pass `false` to hide. Ignored when `iconName` is set.\n *\n * @default true\n */\n readonly icon = input(true, { transform: coerceBooleanProperty });\n\n /**\n * When `true`, renders a close button.\n *\n * @default false\n */\n readonly closeable = input(false, { transform: coerceBooleanProperty });\n\n /**\n * Emitted when the user dismisses the alert via the close button.\n */\n readonly closed = output<void>();\n\n protected readonly dismissed = signal(false);\n\n protected readonly classes = computed(() => {\n const parts = ['wr-alert', `wr-alert--${this.type()}`];\n if (this.dismissed()) parts.push('wr-alert--dismissed');\n return parts.join(' ');\n });\n\n /** Escalate role/aria-live for danger/warning alerts. */\n protected readonly liveRole = computed(() =>\n this.dismissed() ? null : this.type() === 'danger' ? 'alert' : 'status'\n );\n protected readonly liveLevel = computed(() =>\n this.dismissed() ? null : this.type() === 'danger' || this.type() === 'warning' ? 'assertive' : 'polite'\n );\n\n protected onClose(): void {\n this.dismissed.set(true);\n this.closed.emit();\n }\n}\n","@if (!dismissed()) {\n @if (iconName(); as n) {\n <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n } @else if (icon()) {\n <svg\n class=\"wr-alert__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n @switch (type()) {\n @case ('success') {\n <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n <path d=\"m9 11 3 3L22 4\" />\n }\n @case ('warning') {\n <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n }\n @case ('danger') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 8v4\" />\n <path d=\"M12 16h.01\" />\n }\n @case ('neutral') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 8v4\" />\n <path d=\"M12 16h.01\" />\n }\n @case ('offline') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"m4.9 4.9 14.2 14.2\" />\n }\n @default {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 16v-4\" />\n <path d=\"M12 8h.01\" />\n }\n }\n </svg>\n }\n\n <div class=\"wr-alert__body\">\n @if (title(); as t) {\n <p class=\"wr-alert__title\">{{ t }}</p>\n @if (message(); as m) {\n <p class=\"wr-alert__message\">{{ m }}</p>\n }\n } @else if (message(); as m) {\n <p class=\"wr-alert__title\">{{ m }}</p>\n }\n </div>\n\n @if (closeable()) {\n <button type=\"button\" class=\"wr-alert__close\" aria-label=\"Close alert\" (click)=\"onClose()\">\n <svg\n class=\"wr-icon__svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n </button>\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ngwr-alert.mjs","sources":["../../../projects/lib/alert/alert.ts","../../../projects/lib/alert/alert.html","../../../projects/lib/alert/ngwr-alert.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input, output, signal } from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\n\nimport type { WrAlertType } from './interfaces';\n\n/**\n * Inline status banner. Use for feedback messages — saved/failed/notice etc.\n *\n * @example\n * ```html\n * <wr-alert title=\"Saved\" message=\"Your changes are live.\" type=\"success\" />\n * <wr-alert title=\"Failed\" type=\"danger\" closeable (closed)=\"onClose()\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/alert\n */\n@Component({\n selector: 'wr-alert',\n templateUrl: './alert.html',\n imports: [WrIcon],\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'classes()',\n '[attr.role]': 'liveRole()',\n '[attr.aria-live]': 'liveLevel()',\n },\n})\nexport class WrAlert {\n /** Accessible name. Falls back to `alert.close`, then `'Close alert'`. */\n readonly closeLabel = input<string | null>(null);\n\n protected readonly resolvedCloseLabel = useI18nText(this.closeLabel, 'alert.close', 'Close alert');\n\n /**\n * Optional headline shown at the top of the alert.\n *\n * @default null\n */\n readonly title = input<string | null>(null);\n\n /**\n * Visual variant.\n *\n * @default 'info'\n */\n readonly type = input<WrAlertType>('info');\n\n /**\n * Override the default per-type icon with any ngwr icon name.\n *\n * @default null\n */\n readonly iconName = input<WrIconName | null>(null);\n\n /**\n * Optional secondary message rendered below the title.\n *\n * @default null\n */\n readonly message = input<string | null>(null);\n\n /**\n * When `true`, renders a leading status icon matching the `type`.\n * Pass `false` to hide. Ignored when `iconName` is set.\n *\n * @default true\n */\n readonly icon = input(true, { transform: coerceBooleanProperty });\n\n /**\n * When `true`, renders a close button.\n *\n * @default false\n */\n readonly closeable = input(false, { transform: coerceBooleanProperty });\n\n /**\n * Emitted when the user dismisses the alert via the close button.\n */\n readonly closed = output<void>();\n\n protected readonly dismissed = signal(false);\n\n protected readonly classes = computed(() => {\n const parts = ['wr-alert', `wr-alert--${this.type()}`];\n if (this.dismissed()) parts.push('wr-alert--dismissed');\n return parts.join(' ');\n });\n\n /** Escalate role/aria-live for danger/warning alerts. */\n protected readonly liveRole = computed(() =>\n this.dismissed() ? null : this.type() === 'danger' ? 'alert' : 'status'\n );\n protected readonly liveLevel = computed(() =>\n this.dismissed() ? null : this.type() === 'danger' || this.type() === 'warning' ? 'assertive' : 'polite'\n );\n\n protected onClose(): void {\n this.dismissed.set(true);\n this.closed.emit();\n }\n}\n","@if (!dismissed()) {\n @if (iconName(); as n) {\n <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n } @else if (icon()) {\n <svg\n class=\"wr-alert__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n @switch (type()) {\n @case ('success') {\n <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n <path d=\"m9 11 3 3L22 4\" />\n }\n @case ('warning') {\n <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n }\n @case ('danger') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 8v4\" />\n <path d=\"M12 16h.01\" />\n }\n @case ('neutral') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 8v4\" />\n <path d=\"M12 16h.01\" />\n }\n @case ('offline') {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"m4.9 4.9 14.2 14.2\" />\n }\n @default {\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 16v-4\" />\n <path d=\"M12 8h.01\" />\n }\n }\n </svg>\n }\n\n <div class=\"wr-alert__body\">\n @if (title(); as t) {\n <p class=\"wr-alert__title\">{{ t }}</p>\n @if (message(); as m) {\n <p class=\"wr-alert__message\">{{ m }}</p>\n }\n } @else if (message(); as m) {\n <p class=\"wr-alert__title\">{{ m }}</p>\n }\n </div>\n\n @if (closeable()) {\n <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n <svg\n class=\"wr-icon__svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n </button>\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAAA;;;;;AAKG;AAUH;;;;;;;;;;AAUG;MAYU,OAAO,CAAA;;IAET,UAAU,GAAG,KAAK,CAAgB,IAAI;mFAAC;IAE7B,kBAAkB,GAAG,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,EAAE,aAAa,CAAC;AAElG;;;;AAIG;IACM,KAAK,GAAG,KAAK,CAAgB,IAAI;8EAAC;AAE3C;;;;AAIG;IACM,IAAI,GAAG,KAAK,CAAc,MAAM;6EAAC;AAE1C;;;;AAIG;IACM,QAAQ,GAAG,KAAK,CAAoB,IAAI;iFAAC;AAElD;;;;AAIG;IACM,OAAO,GAAG,KAAK,CAAgB,IAAI;gFAAC;AAE7C;;;;;AAKG;IACM,IAAI,GAAG,KAAK,CAAC,IAAI,4EAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAEjE;;;;AAIG;IACM,SAAS,GAAG,KAAK,CAAC,KAAK,iFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAEvE;;AAEG;IACM,MAAM,GAAG,MAAM,EAAQ;IAEb,SAAS,GAAG,MAAM,CAAC,KAAK;kFAAC;AAEzB,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,UAAU,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE,CAAC;QACtD,IAAI,IAAI,CAAC,SAAS,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AACvD,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;;AAGiB,IAAA,QAAQ,GAAG,QAAQ,CAAC,MACrC,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,QAAQ,GAAG,OAAO,GAAG,QAAQ;iFACxE;AACkB,IAAA,SAAS,GAAG,QAAQ,CAAC,MACtC,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,SAAS,GAAG,WAAW,GAAG,QAAQ;kFACzG;IAES,OAAO,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;AACxB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;IACpB;uGAzEW,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAP,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,WAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrCpB,qwEA8EA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDjDY,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAQL,OAAO,EAAA,UAAA,EAAA,CAAA;kBAXnB,SAAS;+BACE,UAAU,EAAA,OAAA,EAEX,CAAC,MAAM,CAAC,iBACF,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,aAAa,EAAE,YAAY;AAC3B,wBAAA,kBAAkB,EAAE,aAAa;AAClC,qBAAA,EAAA,QAAA,EAAA,qwEAAA,EAAA;;;AEnCH;;AAEG;;;;"}
@@ -1,6 +1,7 @@
1
1
  import { coerceNumberProperty } from '@angular/cdk/coercion';
2
2
  import * as i0 from '@angular/core';
3
3
  import { input, signal, inject, NgZone, DestroyRef, computed, ViewEncapsulation, Component } from '@angular/core';
4
+ import { useI18nText } from 'ngwr/i18n';
4
5
  import { WrPlatform } from 'ngwr/platform';
5
6
  import { WrScroll } from 'ngwr/scroll';
6
7
 
@@ -30,9 +31,10 @@ class WrBackTop {
30
31
  visibilityThreshold = input(400, { ...(ngDevMode ? { debugName: "visibilityThreshold" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 400)) });
31
32
  /** Pixel offset subtracted from the scroll target — for sticky headers. @default 0 */
32
33
  offset = input(0, { ...(ngDevMode ? { debugName: "offset" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 0)) });
33
- /** Accessible label for the button. @default 'Back to top' */
34
- ariaLabel = input('Back to top', /* @ts-ignore */
34
+ /** Accessible label for the button. Falls back to `backTop.label`, then `'Back to top'`. */
35
+ ariaLabel = input(null, /* @ts-ignore */
35
36
  ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
37
+ resolvedAriaLabel = useI18nText(this.ariaLabel, 'backTop.label', 'Back to top');
36
38
  visible = signal(false, /* @ts-ignore */
37
39
  ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
38
40
  scroll = inject(WrScroll);
@@ -63,14 +65,14 @@ class WrBackTop {
63
65
  this.scroll.toTop({ offset: this.offset() });
64
66
  }
65
67
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrBackTop, deps: [], target: i0.ɵɵFactoryTarget.Component });
66
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrBackTop, isStandalone: true, selector: "wr-back-top", inputs: { visibilityThreshold: { classPropertyName: "visibilityThreshold", publicName: "visibilityThreshold", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-hidden": "!visible()" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-back-top__button\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick()\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <path\n d=\"M9 4 L9 14 M4 9 L9 4 L14 9\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <ng-content />\n</button>\n", encapsulation: i0.ViewEncapsulation.None });
68
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrBackTop, isStandalone: true, selector: "wr-back-top", inputs: { visibilityThreshold: { classPropertyName: "visibilityThreshold", publicName: "visibilityThreshold", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-hidden": "!visible()" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-back-top__button\" [attr.aria-label]=\"resolvedAriaLabel()\" (click)=\"onClick()\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <path\n d=\"M9 4 L9 14 M4 9 L9 4 L14 9\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <ng-content />\n</button>\n", encapsulation: i0.ViewEncapsulation.None });
67
69
  }
68
70
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrBackTop, decorators: [{
69
71
  type: Component,
70
72
  args: [{ selector: 'wr-back-top', encapsulation: ViewEncapsulation.None, host: {
71
73
  '[class]': 'classes()',
72
74
  '[attr.aria-hidden]': '!visible()',
73
- }, template: "<button type=\"button\" class=\"wr-back-top__button\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick()\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <path\n d=\"M9 4 L9 14 M4 9 L9 4 L14 9\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <ng-content />\n</button>\n" }]
75
+ }, template: "<button type=\"button\" class=\"wr-back-top__button\" [attr.aria-label]=\"resolvedAriaLabel()\" (click)=\"onClick()\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <path\n d=\"M9 4 L9 14 M4 9 L9 4 L14 9\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <ng-content />\n</button>\n" }]
74
76
  }], ctorParameters: () => [], propDecorators: { visibilityThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibilityThreshold", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
75
77
 
76
78
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"ngwr-back-top.mjs","sources":["../../../projects/lib/back-top/back-top.ts","../../../projects/lib/back-top/back-top.html","../../../projects/lib/back-top/ngwr-back-top.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, DestroyRef, NgZone, ViewEncapsulation, computed, inject, input, signal } from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { WrScroll } from 'ngwr/scroll';\n\n/**\n * Pinned floating button that scrolls the page back to the top. Appears\n * once the user has scrolled past `visibilityThreshold` pixels.\n *\n * @example\n * ```html\n * <wr-back-top />\n *\n * <wr-back-top visibilityThreshold=\"600\" [offset]=\"80\">\n * <svg>…custom icon…</svg>\n * </wr-back-top>\n * ```\n *\n * @see https://ngwr.dev/reference/components/back-top\n */\n@Component({\n selector: 'wr-back-top',\n templateUrl: './back-top.html',\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'classes()',\n '[attr.aria-hidden]': '!visible()',\n },\n})\nexport class WrBackTop {\n /** Show the button once `window.scrollY` exceeds this many pixels. @default 400 */\n readonly visibilityThreshold = input(400, {\n transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 400)),\n });\n\n /** Pixel offset subtracted from the scroll target — for sticky headers. @default 0 */\n readonly offset = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n /** Accessible label for the button. @default 'Back to top' */\n readonly ariaLabel = input<string>('Back to top');\n\n protected readonly visible = signal(false);\n\n private readonly scroll = inject(WrScroll);\n private readonly platform = inject(WrPlatform);\n private readonly zone = inject(NgZone);\n private readonly destroyRef = inject(DestroyRef);\n\n protected readonly classes = computed(() => {\n const parts = ['wr-back-top'];\n if (this.visible()) parts.push('wr-back-top--visible');\n return parts.join(' ');\n });\n\n constructor() {\n if (!this.platform.isBrowser) return;\n const handler = (): void => {\n const should = window.scrollY > this.visibilityThreshold();\n if (should !== this.visible()) this.zone.run(() => this.visible.set(should));\n };\n this.zone.runOutsideAngular(() => window.addEventListener('scroll', handler, { passive: true }));\n // Initial check (page might already be scrolled).\n handler();\n this.destroyRef.onDestroy(() => window.removeEventListener('scroll', handler));\n }\n\n protected onClick(): void {\n this.scroll.toTop({ offset: this.offset() });\n }\n}\n","<button type=\"button\" class=\"wr-back-top__button\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick()\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <path\n d=\"M9 4 L9 14 M4 9 L9 4 L14 9\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <ng-content />\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ngwr-back-top.mjs","sources":["../../../projects/lib/back-top/back-top.ts","../../../projects/lib/back-top/back-top.html","../../../projects/lib/back-top/ngwr-back-top.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, DestroyRef, NgZone, ViewEncapsulation, computed, inject, input, signal } from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrPlatform } from 'ngwr/platform';\nimport { WrScroll } from 'ngwr/scroll';\n\n/**\n * Pinned floating button that scrolls the page back to the top. Appears\n * once the user has scrolled past `visibilityThreshold` pixels.\n *\n * @example\n * ```html\n * <wr-back-top />\n *\n * <wr-back-top visibilityThreshold=\"600\" [offset]=\"80\">\n * <svg>…custom icon…</svg>\n * </wr-back-top>\n * ```\n *\n * @see https://ngwr.dev/reference/components/back-top\n */\n@Component({\n selector: 'wr-back-top',\n templateUrl: './back-top.html',\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'classes()',\n '[attr.aria-hidden]': '!visible()',\n },\n})\nexport class WrBackTop {\n /** Show the button once `window.scrollY` exceeds this many pixels. @default 400 */\n readonly visibilityThreshold = input(400, {\n transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 400)),\n });\n\n /** Pixel offset subtracted from the scroll target — for sticky headers. @default 0 */\n readonly offset = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n /** Accessible label for the button. Falls back to `backTop.label`, then `'Back to top'`. */\n readonly ariaLabel = input<string | null>(null);\n\n protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'backTop.label', 'Back to top');\n\n protected readonly visible = signal(false);\n\n private readonly scroll = inject(WrScroll);\n private readonly platform = inject(WrPlatform);\n private readonly zone = inject(NgZone);\n private readonly destroyRef = inject(DestroyRef);\n\n protected readonly classes = computed(() => {\n const parts = ['wr-back-top'];\n if (this.visible()) parts.push('wr-back-top--visible');\n return parts.join(' ');\n });\n\n constructor() {\n if (!this.platform.isBrowser) return;\n const handler = (): void => {\n const should = window.scrollY > this.visibilityThreshold();\n if (should !== this.visible()) this.zone.run(() => this.visible.set(should));\n };\n this.zone.runOutsideAngular(() => window.addEventListener('scroll', handler, { passive: true }));\n // Initial check (page might already be scrolled).\n handler();\n this.destroyRef.onDestroy(() => window.removeEventListener('scroll', handler));\n }\n\n protected onClick(): void {\n this.scroll.toTop({ offset: this.offset() });\n }\n}\n","<button type=\"button\" class=\"wr-back-top__button\" [attr.aria-label]=\"resolvedAriaLabel()\" (click)=\"onClick()\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <path\n d=\"M9 4 L9 14 M4 9 L9 4 L14 9\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <ng-content />\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAAA;;;;;AAKG;AASH;;;;;;;;;;;;;;AAcG;MAUU,SAAS,CAAA;;IAEX,mBAAmB,GAAG,KAAK,CAAC,GAAG,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,qBAAA,EAAA,8BAAA,EAAA,CAAA,EACtC,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAA,CAC5E;;IAGO,MAAM,GAAG,KAAK,CAAC,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAA,CAAG;;IAGjG,SAAS,GAAG,KAAK,CAAgB,IAAI;kFAAC;IAE5B,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,eAAe,EAAE,aAAa,CAAC;IAE/E,OAAO,GAAG,MAAM,CAAC,KAAK;gFAAC;AAEzB,IAAA,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC;AACzB,IAAA,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC;AAC7B,IAAA,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC;AACrB,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,aAAa,CAAC;QAC7B,IAAI,IAAI,CAAC,OAAO,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,sBAAsB,CAAC;AACtD,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;AAEF,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS;YAAE;QAC9B,MAAM,OAAO,GAAG,MAAW;YACzB,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,mBAAmB,EAAE;AAC1D,YAAA,IAAI,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE;AAAE,gBAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AAC9E,QAAA,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;;AAEhG,QAAA,OAAO,EAAE;AACT,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAChF;IAEU,OAAO,GAAA;AACf,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;IAC9C;uGAzCW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,skBCtCtB,0bAaA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDyBa,SAAS,EAAA,UAAA,EAAA,CAAA;kBATrB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,aAAA,EAER,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,oBAAoB,EAAE,YAAY;AACnC,qBAAA,EAAA,QAAA,EAAA,0bAAA,EAAA;;;AEpCH;;AAEG;;;;"}