ngwr 14.0.0 → 14.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.
- package/README.md +57 -8
- package/aurora/aurora.scss +1 -1
- package/aurora/styles/_dark.scss +21 -0
- package/aurora/styles/_index.scss +11 -30
- package/aurora/styles/_rules.scss +25 -0
- package/border-glow/styles/_dark.scss +46 -0
- package/border-glow/styles/_index.scss +5 -0
- package/border-glow/styles/_rules.scss +0 -31
- package/button/styles/_index.scss +16 -0
- package/event-calendar/styles/_index.scss +15 -0
- package/fesm2022/ngwr-action-sheet.mjs +3 -3
- package/fesm2022/ngwr-affix.mjs +3 -3
- package/fesm2022/ngwr-alert.mjs +3 -3
- package/fesm2022/ngwr-anchor.mjs +3 -3
- package/fesm2022/ngwr-aurora.mjs +4 -4
- package/fesm2022/ngwr-aurora.mjs.map +1 -1
- package/fesm2022/ngwr-avatar.mjs +3 -3
- package/fesm2022/ngwr-back-top.mjs +3 -3
- package/fesm2022/ngwr-badge.mjs +6 -6
- package/fesm2022/ngwr-bar-chart.mjs +3 -3
- package/fesm2022/ngwr-blur-text.mjs +3 -3
- package/fesm2022/ngwr-border-glow.mjs +4 -4
- package/fesm2022/ngwr-border-glow.mjs.map +1 -1
- package/fesm2022/ngwr-breadcrumbs.mjs +7 -7
- package/fesm2022/ngwr-breadcrumbs.mjs.map +1 -1
- package/fesm2022/ngwr-burger.mjs +3 -3
- package/fesm2022/ngwr-button.mjs +86 -8
- package/fesm2022/ngwr-button.mjs.map +1 -1
- package/fesm2022/ngwr-calendar-heatmap.mjs +3 -3
- package/fesm2022/ngwr-calendar.mjs +3 -3
- package/fesm2022/ngwr-card.mjs +9 -9
- package/fesm2022/ngwr-carousel.mjs +6 -6
- package/fesm2022/ngwr-cascader.mjs +4 -4
- package/fesm2022/ngwr-cascader.mjs.map +1 -1
- package/fesm2022/ngwr-checkbox.mjs +6 -6
- package/fesm2022/ngwr-circular-text.mjs +3 -3
- package/fesm2022/ngwr-click-spark.mjs +3 -3
- package/fesm2022/ngwr-clipboard.mjs +3 -3
- package/fesm2022/ngwr-collapse.mjs +9 -9
- package/fesm2022/ngwr-color-picker.mjs +6 -6
- package/fesm2022/ngwr-command-palette.mjs +84 -7
- package/fesm2022/ngwr-command-palette.mjs.map +1 -1
- package/fesm2022/ngwr-compare.mjs +3 -3
- package/fesm2022/ngwr-confetti.mjs +3 -3
- package/fesm2022/ngwr-context-menu.mjs +12 -12
- package/fesm2022/ngwr-cookie.mjs +3 -3
- package/fesm2022/ngwr-counter.mjs +6 -6
- package/fesm2022/ngwr-date-adapters-fns.mjs +3 -3
- package/fesm2022/ngwr-date-adapters-luxon.mjs +3 -3
- package/fesm2022/ngwr-date-picker.mjs +18 -18
- package/fesm2022/ngwr-date.mjs +3 -3
- package/fesm2022/ngwr-decrypt-text.mjs +3 -3
- package/fesm2022/ngwr-density.mjs +6 -6
- package/fesm2022/ngwr-descriptions.mjs +6 -6
- package/fesm2022/ngwr-dialog.mjs +15 -15
- package/fesm2022/ngwr-directives.mjs +12 -12
- package/fesm2022/ngwr-divider.mjs +3 -3
- package/fesm2022/ngwr-donut-chart.mjs +3 -3
- package/fesm2022/ngwr-drag-drop.mjs +7 -7
- package/fesm2022/ngwr-drag-drop.mjs.map +1 -1
- package/fesm2022/ngwr-drawer.mjs +18 -18
- package/fesm2022/ngwr-dropdown.mjs +28 -12
- package/fesm2022/ngwr-dropdown.mjs.map +1 -1
- package/fesm2022/ngwr-empty.mjs +3 -3
- package/fesm2022/ngwr-event-calendar.mjs +6 -6
- package/fesm2022/ngwr-falling-text.mjs +3 -3
- package/fesm2022/ngwr-file-upload.mjs +3 -3
- package/fesm2022/ngwr-form-testing.mjs +13 -7
- package/fesm2022/ngwr-form-testing.mjs.map +1 -1
- package/fesm2022/ngwr-form.mjs +44 -25
- package/fesm2022/ngwr-form.mjs.map +1 -1
- package/fesm2022/ngwr-fuzzy-text.mjs +3 -3
- package/fesm2022/ngwr-gauge.mjs +3 -3
- package/fesm2022/ngwr-glitch-text.mjs +3 -3
- package/fesm2022/ngwr-gradient-text.mjs +3 -3
- package/fesm2022/ngwr-hotkey.mjs +6 -6
- package/fesm2022/ngwr-i18n-en.mjs +4 -0
- package/fesm2022/ngwr-i18n-en.mjs.map +1 -1
- package/fesm2022/ngwr-i18n-ru.mjs +1 -0
- package/fesm2022/ngwr-i18n-ru.mjs.map +1 -1
- package/fesm2022/ngwr-i18n.mjs +9 -9
- package/fesm2022/ngwr-icon.mjs +6 -6
- package/fesm2022/ngwr-image-cropper.mjs +3 -3
- package/fesm2022/ngwr-input-number.mjs +3 -3
- package/fesm2022/ngwr-input-otp.mjs +3 -3
- package/fesm2022/ngwr-input.mjs +24 -20
- package/fesm2022/ngwr-input.mjs.map +1 -1
- package/fesm2022/ngwr-keyboard.mjs +3 -3
- package/fesm2022/ngwr-knob.mjs +3 -3
- package/fesm2022/ngwr-layout.mjs +15 -15
- package/fesm2022/ngwr-lightbox.mjs +4 -4
- package/fesm2022/ngwr-lightbox.mjs.map +1 -1
- package/fesm2022/ngwr-line-chart.mjs +3 -3
- package/fesm2022/ngwr-list.mjs +7 -7
- package/fesm2022/ngwr-list.mjs.map +1 -1
- package/fesm2022/ngwr-loading-bar.mjs +6 -6
- package/fesm2022/ngwr-markdown.mjs +6 -6
- package/fesm2022/ngwr-marquee.mjs +3 -3
- package/fesm2022/ngwr-media.mjs +3 -3
- package/fesm2022/ngwr-mention.mjs +6 -6
- package/fesm2022/ngwr-meta.mjs +6 -6
- package/fesm2022/ngwr-meter-group.mjs +3 -3
- package/fesm2022/ngwr-overlay.mjs +6 -6
- package/fesm2022/ngwr-page-header.mjs +3 -3
- package/fesm2022/ngwr-pagination.mjs +3 -3
- package/fesm2022/ngwr-pipes.mjs +21 -21
- package/fesm2022/ngwr-platform.mjs +9 -9
- package/fesm2022/ngwr-popconfirm.mjs +6 -6
- package/fesm2022/ngwr-popover.mjs +6 -6
- package/fesm2022/ngwr-progress.mjs +3 -3
- package/fesm2022/ngwr-pull-to-refresh.mjs +3 -3
- package/fesm2022/ngwr-qr.mjs +3 -3
- package/fesm2022/ngwr-radio.mjs +6 -6
- package/fesm2022/ngwr-rating.mjs +48 -22
- package/fesm2022/ngwr-rating.mjs.map +1 -1
- package/fesm2022/ngwr-result.mjs +12 -12
- package/fesm2022/ngwr-rotating-text.mjs +3 -3
- package/fesm2022/ngwr-scroll.mjs +3 -3
- package/fesm2022/ngwr-segmented.mjs +12 -8
- package/fesm2022/ngwr-segmented.mjs.map +1 -1
- package/fesm2022/ngwr-select.mjs +125 -26
- package/fesm2022/ngwr-select.mjs.map +1 -1
- package/fesm2022/ngwr-shiny-text.mjs +7 -7
- package/fesm2022/ngwr-shiny-text.mjs.map +1 -1
- package/fesm2022/ngwr-sidebar.mjs +3 -3
- package/fesm2022/ngwr-skeleton.mjs +3 -3
- package/fesm2022/ngwr-slider.mjs +12 -8
- package/fesm2022/ngwr-slider.mjs.map +1 -1
- package/fesm2022/ngwr-sparkline.mjs +3 -3
- package/fesm2022/ngwr-speed-dial.mjs +3 -3
- package/fesm2022/ngwr-spinner.mjs +3 -3
- package/fesm2022/ngwr-splash-cursor.mjs +3 -3
- package/fesm2022/ngwr-split-text.mjs +3 -3
- package/fesm2022/ngwr-splitter.mjs +3 -3
- package/fesm2022/ngwr-spotlight-card.mjs +7 -7
- package/fesm2022/ngwr-spotlight-card.mjs.map +1 -1
- package/fesm2022/ngwr-squircle.mjs +6 -6
- package/fesm2022/ngwr-star-border.mjs +4 -4
- package/fesm2022/ngwr-star-border.mjs.map +1 -1
- package/fesm2022/ngwr-statistic.mjs +9 -9
- package/fesm2022/ngwr-stepper.mjs +6 -6
- package/fesm2022/ngwr-storage.mjs +11 -3
- package/fesm2022/ngwr-storage.mjs.map +1 -1
- package/fesm2022/ngwr-switch.mjs +3 -3
- package/fesm2022/ngwr-table.mjs +18 -18
- package/fesm2022/ngwr-tabs-router.mjs +3 -3
- package/fesm2022/ngwr-tabs.mjs +6 -6
- package/fesm2022/ngwr-textarea.mjs +26 -5
- package/fesm2022/ngwr-textarea.mjs.map +1 -1
- package/fesm2022/ngwr-theme.mjs +90 -4
- package/fesm2022/ngwr-theme.mjs.map +1 -1
- package/fesm2022/ngwr-tilt-card.mjs +7 -7
- package/fesm2022/ngwr-tilt-card.mjs.map +1 -1
- package/fesm2022/ngwr-timeline.mjs +6 -6
- package/fesm2022/ngwr-toast.mjs +116 -11
- package/fesm2022/ngwr-toast.mjs.map +1 -1
- package/fesm2022/ngwr-toolbar.mjs +3 -3
- package/fesm2022/ngwr-tour.mjs +6 -6
- package/fesm2022/ngwr-transfer.mjs +3 -3
- package/fesm2022/ngwr-tree.mjs +18 -11
- package/fesm2022/ngwr-tree.mjs.map +1 -1
- package/fesm2022/ngwr-typewriter.mjs +3 -3
- package/fesm2022/ngwr-typography.mjs +3 -3
- package/fesm2022/ngwr-version.mjs +1 -1
- package/fesm2022/ngwr-version.mjs.map +1 -1
- package/fesm2022/ngwr-virtual-scroll.mjs +3 -3
- package/fesm2022/ngwr-waves.mjs +4 -4
- package/fesm2022/ngwr-waves.mjs.map +1 -1
- package/fesm2022/ngwr-window.mjs +12 -12
- package/i18n/en.json +1 -0
- package/i18n/ru.json +1 -0
- package/llms-full.txt +9 -9
- package/llms.txt +82 -11
- package/package.json +1 -1
- package/shiny-text/styles/_dark.scss +20 -0
- package/shiny-text/styles/_index.scss +5 -0
- package/shiny-text/styles/_rules.scss +0 -4
- package/spotlight-card/styles/_dark.scss +21 -0
- package/spotlight-card/styles/_index.scss +5 -0
- package/spotlight-card/styles/_rules.scss +0 -6
- package/star-border/styles/_dark.scss +21 -0
- package/star-border/styles/_index.scss +5 -0
- package/star-border/styles/_rules.scss +0 -5
- package/theme/styles/_colors.scss +102 -0
- package/theme/styles/_focus.scss +31 -1
- package/tilt-card/styles/_dark.scss +21 -0
- package/tilt-card/styles/_index.scss +5 -0
- package/tilt-card/styles/_rules.scss +0 -5
- package/types/ngwr-button.d.ts +43 -0
- package/types/ngwr-command-palette.d.ts +59 -2
- package/types/ngwr-dropdown.d.ts +17 -1
- package/types/ngwr-form-testing.d.ts +13 -7
- package/types/ngwr-form.d.ts +47 -12
- package/types/ngwr-input.d.ts +2 -1
- package/types/ngwr-rating.d.ts +25 -4
- package/types/ngwr-segmented.d.ts +1 -0
- package/types/ngwr-select.d.ts +45 -9
- package/types/ngwr-slider.d.ts +1 -0
- package/types/ngwr-storage.d.ts +39 -1
- package/types/ngwr-textarea.d.ts +20 -0
- package/types/ngwr-theme.d.ts +92 -2
- package/types/ngwr-toast.d.ts +53 -0
- package/types/ngwr-tree.d.ts +3 -2
- package/types/ngwr-version.d.ts +1 -1
- package/waves/styles/_dark.scss +19 -0
- package/waves/styles/_index.scss +5 -0
- package/waves/styles/_rules.scss +0 -3
package/README.md
CHANGED
|
@@ -64,8 +64,7 @@ accessor for a signal-forms control — and every control is usable standalone
|
|
|
64
64
|
through its two-way `[(value)]` / `[(checked)]` model.
|
|
65
65
|
|
|
66
66
|
> **Status:** active development. v14 is the current major line (Angular 22 peer).
|
|
67
|
-
>
|
|
68
|
-
> Upgrading? `ng update ngwr@14` rewrites v14's five renames and reports the
|
|
67
|
+
> Upgrading? `ng update ngwr@14` rewrites v14's six renames and reports the
|
|
69
68
|
> changes no codemod should guess at — the
|
|
70
69
|
> [migration guide](https://ngwr.dev/start/migration) walks every step.
|
|
71
70
|
> [Open an issue](https://github.com/thekhegay/ngwr/issues/new)
|
|
@@ -87,9 +86,55 @@ through its two-way `[(value)]` / `[(checked)]` model.
|
|
|
87
86
|
| `lucide` _(optional)_ | `>= 1.0.0` |
|
|
88
87
|
|
|
89
88
|
TypeScript `~6.0.x` (Angular 22's compiler declares `typescript >=6.0 <6.1`) and
|
|
90
|
-
a Node version Angular 22 accepts — `^22.22.3 || ^24.15.0 || >=26`.
|
|
91
|
-
|
|
92
|
-
|
|
89
|
+
a Node version Angular 22 accepts — `^22.22.3 || ^24.15.0 || >=26`. ngwr itself
|
|
90
|
+
declares neither: no `engines` field and no TypeScript peer, because it ships
|
|
91
|
+
pre-compiled bundles and `.d.ts` files, so the versions that bind are the ones
|
|
92
|
+
your Angular names. Contributing to this repo needs the narrower
|
|
93
|
+
`^24.16.0 || >=26` it pins (`.nvmrc` says 24), plus pnpm ≥ 11.10.
|
|
94
|
+
|
|
95
|
+
**The floor is real; the missing ceiling promises nothing.** ngwr ships
|
|
96
|
+
partially compiled, and the floor is enforced by the bundles rather than by the
|
|
97
|
+
range — but by a minority of them, which is why the failure is confusing when it
|
|
98
|
+
arrives. Of 654 declarations, **25 record `minVersion: "22.0.0"`** (the service
|
|
99
|
+
declarations, across 22 files); the rest are older shapes an old linker reads
|
|
100
|
+
fine. So the install succeeds — every package manager treats an unmet peer as a
|
|
101
|
+
warning — and `ng build` then dies inside one `fesm2022` bundle with a message
|
|
102
|
+
that names no version at all. Read the peer warning at install time. Above the
|
|
103
|
+
floor, an open-ended range only means your package manager will not stop you
|
|
104
|
+
installing next to an Angular this release was never built against.
|
|
105
|
+
|
|
106
|
+
```sh
|
|
107
|
+
grep -ho 'minVersion: *"[^"]*"' node_modules/ngwr/fesm2022/*.mjs | sort | uniq -c
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Versioning and support
|
|
111
|
+
|
|
112
|
+
Semver, with the one rule that matters made mechanical: **a breaking change
|
|
113
|
+
cannot ride a minor or a patch.** `release:prepare` refuses `--bump=minor` and
|
|
114
|
+
`--bump=patch` when any commit since the last release tag carries a `!` type or
|
|
115
|
+
a `BREAKING CHANGE:` footer — it prints the offending subjects and exits
|
|
116
|
+
non-zero, and since a release is cut only by that workflow, the refusal is the
|
|
117
|
+
release. It exists because the opposite shipped: 12.2.0 was a minor carrying a
|
|
118
|
+
`BREAKING CHANGES` section, and `^12.1.0` picked it up silently. So a caret
|
|
119
|
+
range on a major is a safe range now. It was not then. What the guard cannot see
|
|
120
|
+
is a break nobody labelled as one — it reads commit metadata, which is what
|
|
121
|
+
commitlint on every commit and PR title gives it to read.
|
|
122
|
+
|
|
123
|
+
Public API is three surfaces, and all three move only in a major: the exported
|
|
124
|
+
TypeScript, the `.wr-*` BEM class names (components ship
|
|
125
|
+
`ViewEncapsulation.None`), and the `--wr-*` custom properties. Anything marked
|
|
126
|
+
`@internal` is not API, and the marker survives into the shipped types —
|
|
127
|
+
`grep -rn "@internal" node_modules/ngwr/types` is the whole check. A few helpers
|
|
128
|
+
are exported, unmarked and undocumented; treat those as unsupported until a page
|
|
129
|
+
describes them, and open an issue naming the one you need.
|
|
130
|
+
|
|
131
|
+
Two lines are supported at a time: the current major in full, the one before it
|
|
132
|
+
for mechanical security fixes only, and that second row ends when the next major
|
|
133
|
+
ships. Read it against the cadence rather than a calendar — eight majors shipped
|
|
134
|
+
between 2026-06-12 (v7.0.0) and 2026-09-04 (v14.0.0). Table, targets and the
|
|
135
|
+
private reporting route: [SECURITY.md](SECURITY.md). Full policy, with the
|
|
136
|
+
commands to check every claim in it against the installed package:
|
|
137
|
+
<https://ngwr.dev/start/versioning>.
|
|
93
138
|
|
|
94
139
|
## Install
|
|
95
140
|
|
|
@@ -175,9 +220,13 @@ Components render with `ViewEncapsulation.None`, so their `.wr-*` BEM classes an
|
|
|
175
220
|
their `--wr-*` custom properties are reachable — and both are treated as public
|
|
176
221
|
API: renaming one is a breaking change carrying a migration note. The DOM *shape*
|
|
177
222
|
is not. Which element holds which class, how deeply they nest, whether a wrapper
|
|
178
|
-
exists — all of that may move in a minor. A rule keyed on one class survives
|
|
179
|
-
descendant selector that encodes a structure
|
|
180
|
-
does not.
|
|
223
|
+
exists — all of that may move in a minor. A rule keyed on one class survives a
|
|
224
|
+
rename; a descendant selector that encodes a structure
|
|
225
|
+
(`.wr-select__trigger > span > svg`) does not. And a surviving rule is not a
|
|
226
|
+
winning one: 27 components ship their own stylesheet, which Angular emits after
|
|
227
|
+
your linked `styles.css`, so a single-class override loses to it at equal
|
|
228
|
+
specificity — reach for their `--wr-*` token instead. See
|
|
229
|
+
[Theming](https://ngwr.dev/guides/theming) for the full statement and the list.
|
|
181
230
|
|
|
182
231
|
## Quick start
|
|
183
232
|
|
package/aurora/aurora.scss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@forward './styles';
|
|
1
|
+
@forward './styles/rules';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// Dark theme: restore the neon reactbits palette.
|
|
2
|
+
//
|
|
3
|
+
// Keyed on `theme.dark-selector()`, never on a literal `[data-theme='dark']`.
|
|
4
|
+
// The attribute is renameable — `@use 'ngwr' with ($theme-attribute: '…')`
|
|
5
|
+
// alongside `provideWrTheme({ attribute: '…' })` — and a hand-written literal
|
|
6
|
+
// misses the rename in both directions: this block stops firing under the
|
|
7
|
+
// configured name, and it keeps firing under `data-theme`, which is the
|
|
8
|
+
// attribute a foreign design system owns and the rename exists to escape.
|
|
9
|
+
//
|
|
10
|
+
// It lives outside the `styleUrl` closure for the same reason. A component
|
|
11
|
+
// stylesheet is compiled when the LIBRARY is built, where `$theme-attribute` can
|
|
12
|
+
// only ever be the default, and Angular appends that copy after the app's linked
|
|
13
|
+
// sheet — so an inlined literal would not merely be dead, it would outrank the
|
|
14
|
+
// correctly-named rule beside it.
|
|
15
|
+
@use '../../theme/styles' as theme;
|
|
16
|
+
|
|
17
|
+
#{theme.dark-selector()} .wr-aurora {
|
|
18
|
+
--wr-aurora-stop-1: #5227ff;
|
|
19
|
+
--wr-aurora-stop-2: #7cff67;
|
|
20
|
+
--wr-aurora-stop-3: #5227ff;
|
|
21
|
+
}
|
|
@@ -1,30 +1,11 @@
|
|
|
1
|
-
//
|
|
2
|
-
//
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
position: absolute;
|
|
13
|
-
inset: 0;
|
|
14
|
-
display: block;
|
|
15
|
-
overflow: hidden;
|
|
16
|
-
pointer-events: none;
|
|
17
|
-
z-index: 0;
|
|
18
|
-
|
|
19
|
-
&__canvas {
|
|
20
|
-
display: block;
|
|
21
|
-
width: 100%;
|
|
22
|
-
height: 100%;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
[data-theme='dark'] .wr-aurora {
|
|
27
|
-
--wr-aurora-stop-1: #5227ff;
|
|
28
|
-
--wr-aurora-stop-2: #7cff67;
|
|
29
|
-
--wr-aurora-stop-3: #5227ff;
|
|
30
|
-
}
|
|
1
|
+
// Public Sass entry for `@use 'ngwr/aurora'`.
|
|
2
|
+
//
|
|
3
|
+
// `aurora.scss` — the component's `styleUrl` — forwards `_rules` and nothing
|
|
4
|
+
// else, so the compiled component styles carry this component's own CSS and no
|
|
5
|
+
// second copy of the theme layer. `_dark.scss` is loaded from HERE rather than
|
|
6
|
+
// from `_rules` because its selector is built out of `$theme-attribute`, which
|
|
7
|
+
// only a stylesheet compiled by the consuming app can configure.
|
|
8
|
+
@use '../../theme/styles';
|
|
9
|
+
|
|
10
|
+
@forward 'rules';
|
|
11
|
+
@forward 'dark';
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
// Aurora background (reactbits port). A WebGL2 canvas fills the nearest
|
|
2
|
+
// positioned ancestor; all the visuals live in the fragment shader.
|
|
3
|
+
|
|
4
|
+
.wr-aurora {
|
|
5
|
+
// Theme-default colour stops (overridden by `[colorStops]`): vivid
|
|
6
|
+
// indigo → emerald on light surfaces; dark restores the neon
|
|
7
|
+
// reactbits palette — see `_dark.scss`, which is loaded by the public Sass
|
|
8
|
+
// entry only.
|
|
9
|
+
--wr-aurora-stop-1: #6366f1;
|
|
10
|
+
--wr-aurora-stop-2: #10b981;
|
|
11
|
+
--wr-aurora-stop-3: #6366f1;
|
|
12
|
+
|
|
13
|
+
position: absolute;
|
|
14
|
+
inset: 0;
|
|
15
|
+
display: block;
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
pointer-events: none;
|
|
18
|
+
z-index: 0;
|
|
19
|
+
|
|
20
|
+
&__canvas {
|
|
21
|
+
display: block;
|
|
22
|
+
width: 100%;
|
|
23
|
+
height: 100%;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
// Dark theme: restore the reactbits look — pale halo + additive blends.
|
|
2
|
+
//
|
|
3
|
+
// Keyed on `theme.dark-selector()`, never on a literal `[data-theme='dark']`.
|
|
4
|
+
// The attribute is renameable — `@use 'ngwr' with ($theme-attribute: '…')`
|
|
5
|
+
// alongside `provideWrTheme({ attribute: '…' })` — and a hand-written literal
|
|
6
|
+
// misses the rename in both directions: this block stops firing under the
|
|
7
|
+
// configured name, and it keeps firing under `data-theme`, which is the
|
|
8
|
+
// attribute a foreign design system owns and the rename exists to escape.
|
|
9
|
+
//
|
|
10
|
+
// It lives outside the `styleUrl` closure for the same reason. A component
|
|
11
|
+
// stylesheet is compiled when the LIBRARY is built, where `$theme-attribute` can
|
|
12
|
+
// only ever be the default, and Angular appends that copy after the app's linked
|
|
13
|
+
// sheet — so an inlined literal would not merely be dead, it would outrank the
|
|
14
|
+
// correctly-named rule beside it.
|
|
15
|
+
@use '../../theme/styles' as theme;
|
|
16
|
+
|
|
17
|
+
#{theme.dark-selector()} .wr-border-glow {
|
|
18
|
+
--wr-border-glow-outline: rgb(255 255 255 / 15%);
|
|
19
|
+
--wr-border-glow-halo-blend: plus-lighter;
|
|
20
|
+
--wr-border-glow-fill-blend: soft-light;
|
|
21
|
+
--wr-border-glow-fill-scale: 1;
|
|
22
|
+
/* stylelint-disable-next-line */
|
|
23
|
+
--wr-border-glow-edge-shadow:
|
|
24
|
+
inset 0 0 0 1px var(--wr-border-glow-color), inset 0 0 1px 0 var(--wr-border-glow-color-60),
|
|
25
|
+
inset 0 0 3px 0 var(--wr-border-glow-color-50), inset 0 0 6px 0 var(--wr-border-glow-color-40),
|
|
26
|
+
inset 0 0 15px 0 var(--wr-border-glow-color-30), inset 0 0 25px 2px var(--wr-border-glow-color-20),
|
|
27
|
+
inset 0 0 50px 2px var(--wr-border-glow-color-10), 0 0 1px 0 var(--wr-border-glow-color-60),
|
|
28
|
+
0 0 3px 0 var(--wr-border-glow-color-50), 0 0 6px 0 var(--wr-border-glow-color-40),
|
|
29
|
+
0 0 15px 0 var(--wr-border-glow-color-30), 0 0 25px 2px var(--wr-border-glow-color-20),
|
|
30
|
+
0 0 50px 2px var(--wr-border-glow-color-10);
|
|
31
|
+
--wr-border-glow-color: hsl(40deg 80% 80% / 100%);
|
|
32
|
+
--wr-border-glow-color-60: hsl(40deg 80% 80% / 60%);
|
|
33
|
+
--wr-border-glow-color-50: hsl(40deg 80% 80% / 50%);
|
|
34
|
+
--wr-border-glow-color-40: hsl(40deg 80% 80% / 40%);
|
|
35
|
+
--wr-border-glow-color-30: hsl(40deg 80% 80% / 30%);
|
|
36
|
+
--wr-border-glow-color-20: hsl(40deg 80% 80% / 20%);
|
|
37
|
+
--wr-border-glow-color-10: hsl(40deg 80% 80% / 10%);
|
|
38
|
+
--wr-border-glow-gradient-one: radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%);
|
|
39
|
+
--wr-border-glow-gradient-two: radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%);
|
|
40
|
+
--wr-border-glow-gradient-three: radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%);
|
|
41
|
+
--wr-border-glow-gradient-four: radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%);
|
|
42
|
+
--wr-border-glow-gradient-five: radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%);
|
|
43
|
+
--wr-border-glow-gradient-six: radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%);
|
|
44
|
+
--wr-border-glow-gradient-seven: radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%);
|
|
45
|
+
--wr-border-glow-gradient-base: linear-gradient(#c299ff 0 100%);
|
|
46
|
+
}
|
|
@@ -11,5 +11,10 @@
|
|
|
11
11
|
// box-sizing reset into the compiled component styles, which ng-packagr then
|
|
12
12
|
// embeds in the FESM bundle as a string. `border-glow.scss` forwards `_rules`
|
|
13
13
|
// instead, so it carries this component's own CSS and nothing else.
|
|
14
|
+
//
|
|
15
|
+
// `_dark` is loaded from HERE for a second reason: its selector is built out of
|
|
16
|
+
// `$theme-attribute`, which only a stylesheet compiled by the consuming app can
|
|
17
|
+
// configure, so a copy inside the bundle could only ever carry the default name.
|
|
14
18
|
@use '../../theme/styles';
|
|
15
19
|
@forward 'rules';
|
|
20
|
+
@forward 'dark';
|
|
@@ -195,34 +195,3 @@
|
|
|
195
195
|
}
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
-
// Dark theme: restore the reactbits look — pale halo + additive blends.
|
|
199
|
-
[data-theme='dark'] .wr-border-glow {
|
|
200
|
-
--wr-border-glow-outline: rgb(255 255 255 / 15%);
|
|
201
|
-
--wr-border-glow-halo-blend: plus-lighter;
|
|
202
|
-
--wr-border-glow-fill-blend: soft-light;
|
|
203
|
-
--wr-border-glow-fill-scale: 1;
|
|
204
|
-
/* stylelint-disable-next-line */
|
|
205
|
-
--wr-border-glow-edge-shadow:
|
|
206
|
-
inset 0 0 0 1px var(--wr-border-glow-color), inset 0 0 1px 0 var(--wr-border-glow-color-60),
|
|
207
|
-
inset 0 0 3px 0 var(--wr-border-glow-color-50), inset 0 0 6px 0 var(--wr-border-glow-color-40),
|
|
208
|
-
inset 0 0 15px 0 var(--wr-border-glow-color-30), inset 0 0 25px 2px var(--wr-border-glow-color-20),
|
|
209
|
-
inset 0 0 50px 2px var(--wr-border-glow-color-10), 0 0 1px 0 var(--wr-border-glow-color-60),
|
|
210
|
-
0 0 3px 0 var(--wr-border-glow-color-50), 0 0 6px 0 var(--wr-border-glow-color-40),
|
|
211
|
-
0 0 15px 0 var(--wr-border-glow-color-30), 0 0 25px 2px var(--wr-border-glow-color-20),
|
|
212
|
-
0 0 50px 2px var(--wr-border-glow-color-10);
|
|
213
|
-
--wr-border-glow-color: hsl(40deg 80% 80% / 100%);
|
|
214
|
-
--wr-border-glow-color-60: hsl(40deg 80% 80% / 60%);
|
|
215
|
-
--wr-border-glow-color-50: hsl(40deg 80% 80% / 50%);
|
|
216
|
-
--wr-border-glow-color-40: hsl(40deg 80% 80% / 40%);
|
|
217
|
-
--wr-border-glow-color-30: hsl(40deg 80% 80% / 30%);
|
|
218
|
-
--wr-border-glow-color-20: hsl(40deg 80% 80% / 20%);
|
|
219
|
-
--wr-border-glow-color-10: hsl(40deg 80% 80% / 10%);
|
|
220
|
-
--wr-border-glow-gradient-one: radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%);
|
|
221
|
-
--wr-border-glow-gradient-two: radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%);
|
|
222
|
-
--wr-border-glow-gradient-three: radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%);
|
|
223
|
-
--wr-border-glow-gradient-four: radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%);
|
|
224
|
-
--wr-border-glow-gradient-five: radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%);
|
|
225
|
-
--wr-border-glow-gradient-six: radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%);
|
|
226
|
-
--wr-border-glow-gradient-seven: radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%);
|
|
227
|
-
--wr-border-glow-gradient-base: linear-gradient(#c299ff 0 100%);
|
|
228
|
-
}
|
|
@@ -120,6 +120,22 @@
|
|
|
120
120
|
// Sizes — share the `--wr-control-*` contract (22 / 30 / 36 px) so button,
|
|
121
121
|
// input and select line up in a row. Buttons keep a slightly wider padding-x
|
|
122
122
|
// (12 / 14 / 18) than input/select; gap + icon step with the size.
|
|
123
|
+
// `sm` is 22px tall (16 line-height + 2·2 padding + 2·1 border) and that is
|
|
124
|
+
// BELOW the 24×24 WCAG 2.2 asks of a target — deliberately, and it is the
|
|
125
|
+
// consumer's layout that decides whether it passes. 2.5.8 has a spacing
|
|
126
|
+
// exception: an undersized target is conforming when a 24px circle centred on
|
|
127
|
+
// it touches no other target's circle. So a lone `sm` button is fine, and a row
|
|
128
|
+
// of them packed edge to edge is not — an audit measuring `<a wr-btn size="sm">`
|
|
129
|
+
// Edit beside `<wr-btn size="sm">` Delete in a table row read 64.1×22 and
|
|
130
|
+
// reported `target-size` on every row.
|
|
131
|
+
//
|
|
132
|
+
// The `touch-target` mixin is NOT the fix here and was checked: it is gated on
|
|
133
|
+
// `@media (pointer: coarse)` while 2.5.8 applies to a mouse too, and its
|
|
134
|
+
// `::after` halo does not change the element's own client rects, which is what
|
|
135
|
+
// the rule measures. Growing `--wr-control-padding-y-sm` is not either — the
|
|
136
|
+
// three `--wr-control-*-sm` tokens are shared so button, input and select line
|
|
137
|
+
// up in a row, and 22px is the number `/guides/tokens/sizing` publishes.
|
|
138
|
+
// Space the targets, or use `md` where they sit together.
|
|
123
139
|
&--sm {
|
|
124
140
|
--wr-btn-radius: var(--wr-control-radius-sm);
|
|
125
141
|
--wr-btn-gap: 0.25rem;
|
|
@@ -1,9 +1,24 @@
|
|
|
1
1
|
/// Event calendar — month / week / day.
|
|
2
2
|
///
|
|
3
|
+
/// Pull the whole theme so a standalone `@use 'ngwr/event-calendar'` brings in
|
|
4
|
+
/// every design token these rules reference. Sass deduplicates `@use` per
|
|
5
|
+
/// compilation, so the umbrella sheet still emits the theme only once.
|
|
6
|
+
///
|
|
7
|
+
/// This entry point shipped WITHOUT the load until v14.1, and it was the only
|
|
8
|
+
/// one of the 120-odd style entries that referenced tokens without pulling the
|
|
9
|
+
/// layer that declares them: `@use 'ngwr/event-calendar'` on its own emitted
|
|
10
|
+
/// 5.5 kB of rules carrying 57 unresolved `var(--wr-*)` references, so the grid
|
|
11
|
+
/// lines (`box-shadow`, hence no fallback) vanished and the text fell back to
|
|
12
|
+
/// black. The ten other entries that skip the load — `affix`, `density` and the
|
|
13
|
+
/// eight canvas / text-animation ones — reference no token at all, which is why
|
|
14
|
+
/// a sweep for "who is missing it" is not enough on its own.
|
|
15
|
+
///
|
|
3
16
|
/// Grid lines are `box-shadow: inset`, never borders. A border would take up
|
|
4
17
|
/// layout space, and the whole chip model depends on cell boxes being exactly
|
|
5
18
|
/// contiguous: a band's `calc(var(--span) * 100%)` is only the right width if
|
|
6
19
|
/// one cell ends precisely where the next begins.
|
|
20
|
+
@use '../../theme/styles';
|
|
21
|
+
|
|
7
22
|
.wr-event-calendar {
|
|
8
23
|
--wr-event-calendar-slot-height: 1.5rem;
|
|
9
24
|
--wr-event-calendar-band-height: 1.25rem;
|
|
@@ -75,10 +75,10 @@ class WrActionSheet {
|
|
|
75
75
|
this.action.emit(item);
|
|
76
76
|
this.open.set(false);
|
|
77
77
|
}
|
|
78
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
79
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
78
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrActionSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
79
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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 }, titleFallback: { classPropertyName: "titleFallback", publicName: "titleFallback", 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>{{ resolvedTitleFallback() }}</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 });
|
|
80
80
|
}
|
|
81
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
81
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrActionSheet, decorators: [{
|
|
82
82
|
type: Component,
|
|
83
83
|
args: [{ selector: 'wr-action-sheet', encapsulation: ViewEncapsulation.None, imports: [WrDrawer, WrDrawerTitle, WrIcon], 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>{{ resolvedTitleFallback() }}</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" }]
|
|
84
84
|
}], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleFallback", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
|
package/fesm2022/ngwr-affix.mjs
CHANGED
|
@@ -106,10 +106,10 @@ class WrAffix {
|
|
|
106
106
|
});
|
|
107
107
|
});
|
|
108
108
|
}
|
|
109
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
110
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.
|
|
109
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
110
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: WrAffix, isStandalone: true, selector: "[wrAffix]", inputs: { offsetTop: { classPropertyName: "offsetTop", publicName: "wrAffixOffsetTop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { affixChange: "wrAffixChange" }, host: { properties: { "style.position": "\"sticky\"", "style.top.px": "offsetTop()" }, classAttribute: "wr-affix" }, ngImport: i0 });
|
|
111
111
|
}
|
|
112
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
112
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAffix, decorators: [{
|
|
113
113
|
type: Directive,
|
|
114
114
|
args: [{
|
|
115
115
|
selector: '[wrAffix]',
|
package/fesm2022/ngwr-alert.mjs
CHANGED
|
@@ -89,10 +89,10 @@ class WrAlert {
|
|
|
89
89
|
this.dismissed.set(true);
|
|
90
90
|
this.closed.emit();
|
|
91
91
|
}
|
|
92
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
93
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
92
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
93
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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 }, closable: { classPropertyName: "closable", publicName: "closable", 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 (closable()) {\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 });
|
|
94
94
|
}
|
|
95
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAlert, decorators: [{
|
|
96
96
|
type: Component,
|
|
97
97
|
args: [{ selector: 'wr-alert', imports: [WrIcon], encapsulation: ViewEncapsulation.None, host: {
|
|
98
98
|
'[class]': 'classes()',
|
package/fesm2022/ngwr-anchor.mjs
CHANGED
|
@@ -99,10 +99,10 @@ class WrAnchor {
|
|
|
99
99
|
this.scroll.to(`#${id}`, { offset: this.offset() });
|
|
100
100
|
this.activeId.set(id);
|
|
101
101
|
}
|
|
102
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
103
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
102
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
103
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrAnchor, isStandalone: true, selector: "wr-anchor", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, hitArea: { classPropertyName: "hitArea", publicName: "hitArea", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()" }, classAttribute: "wr-anchor" }, ngImport: i0, template: "<ul class=\"wr-anchor__list\">\n @for (link of links(); track link.id) {\n <li class=\"wr-anchor__item\">\n <a\n class=\"wr-anchor__link\"\n [class.wr-anchor__link--active]=\"activeId() === link.id\"\n [attr.aria-current]=\"activeId() === link.id ? 'location' : null\"\n [href]=\"`#${link.id}`\"\n (click)=\"onClick(link.id, $event)\"\n >\n {{ link.label }}\n </a>\n @if (link.children?.length) {\n <ul class=\"wr-anchor__list wr-anchor__list--nested\">\n @for (child of link.children; track child.id) {\n <li class=\"wr-anchor__item\">\n <a\n class=\"wr-anchor__link\"\n [class.wr-anchor__link--active]=\"activeId() === child.id\"\n [attr.aria-current]=\"activeId() === child.id ? 'location' : null\"\n [href]=\"`#${child.id}`\"\n (click)=\"onClick(child.id, $event)\"\n >\n {{ child.label }}\n </a>\n </li>\n }\n </ul>\n }\n </li>\n }\n</ul>\n", encapsulation: i0.ViewEncapsulation.None });
|
|
104
104
|
}
|
|
105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAnchor, decorators: [{
|
|
106
106
|
type: Component,
|
|
107
107
|
args: [{ selector: 'wr-anchor', encapsulation: ViewEncapsulation.None, host: { class: 'wr-anchor', role: 'navigation', '[attr.aria-label]': 'resolvedAriaLabel()' }, template: "<ul class=\"wr-anchor__list\">\n @for (link of links(); track link.id) {\n <li class=\"wr-anchor__item\">\n <a\n class=\"wr-anchor__link\"\n [class.wr-anchor__link--active]=\"activeId() === link.id\"\n [attr.aria-current]=\"activeId() === link.id ? 'location' : null\"\n [href]=\"`#${link.id}`\"\n (click)=\"onClick(link.id, $event)\"\n >\n {{ link.label }}\n </a>\n @if (link.children?.length) {\n <ul class=\"wr-anchor__list wr-anchor__list--nested\">\n @for (child of link.children; track child.id) {\n <li class=\"wr-anchor__item\">\n <a\n class=\"wr-anchor__link\"\n [class.wr-anchor__link--active]=\"activeId() === child.id\"\n [attr.aria-current]=\"activeId() === child.id ? 'location' : null\"\n [href]=\"`#${child.id}`\"\n (click)=\"onClick(child.id, $event)\"\n >\n {{ child.label }}\n </a>\n </li>\n }\n </ul>\n }\n </li>\n }\n</ul>\n" }]
|
|
108
108
|
}], ctorParameters: () => [], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], hitArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "hitArea", required: false }] }] } });
|
package/fesm2022/ngwr-aurora.mjs
CHANGED
|
@@ -294,12 +294,12 @@ class WrAurora {
|
|
|
294
294
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
295
295
|
gl.drawArrays(gl.TRIANGLES, 0, 3);
|
|
296
296
|
}
|
|
297
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
298
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.
|
|
297
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAurora, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
298
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: WrAurora, isStandalone: true, selector: "wr-aurora", inputs: { colorStops: { classPropertyName: "colorStops", publicName: "colorStops", isSignal: true, isRequired: false, transformFunction: null }, amplitude: { classPropertyName: "amplitude", publicName: "amplitude", isSignal: true, isRequired: false, transformFunction: null }, blend: { classPropertyName: "blend", publicName: "blend", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-aurora" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: '<canvas #canvas class="wr-aurora__canvas" aria-hidden="true"></canvas>', isInline: true, styles: [".wr-aurora{--wr-aurora-stop-1: #6366f1;--wr-aurora-stop-2: #10b981;--wr-aurora-stop-3: #6366f1;position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
299
299
|
}
|
|
300
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
300
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAurora, decorators: [{
|
|
301
301
|
type: Component,
|
|
302
|
-
args: [{ selector: 'wr-aurora', template: '<canvas #canvas class="wr-aurora__canvas" aria-hidden="true"></canvas>', encapsulation: ViewEncapsulation.None, host: { class: 'wr-aurora' }, styles: [".wr-aurora{--wr-aurora-stop-1: #6366f1;--wr-aurora-stop-2: #10b981;--wr-aurora-stop-3: #6366f1;position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}
|
|
302
|
+
args: [{ selector: 'wr-aurora', template: '<canvas #canvas class="wr-aurora__canvas" aria-hidden="true"></canvas>', encapsulation: ViewEncapsulation.None, host: { class: 'wr-aurora' }, styles: [".wr-aurora{--wr-aurora-stop-1: #6366f1;--wr-aurora-stop-2: #10b981;--wr-aurora-stop-3: #6366f1;position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}\n"] }]
|
|
303
303
|
}], ctorParameters: () => [], propDecorators: { colorStops: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorStops", required: false }] }], amplitude: [{ type: i0.Input, args: [{ isSignal: true, alias: "amplitude", required: false }] }], blend: [{ type: i0.Input, args: [{ isSignal: true, alias: "blend", required: false }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }] } });
|
|
304
304
|
|
|
305
305
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngwr-aurora.mjs","sources":["../../../projects/lib/aurora/aurora.ts","../../../projects/lib/aurora/ngwr-aurora.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 * Angular adaptation of the Aurora background by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/backgrounds/aurora\n *\n * The reactbits version renders through the OGL library; this port talks\n * to WebGL2 directly — same vertex/fragment shaders, zero dependencies.\n */\n\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n Component,\n DestroyRef,\n ElementRef,\n NgZone,\n PLATFORM_ID,\n ViewEncapsulation,\n afterNextRender,\n effect,\n inject,\n input,\n viewChild,\n} from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { numAttr } from 'ngwr/utils';\n\nconst VERT = `#version 300 es\nin vec2 position;\nvoid main() {\n gl_Position = vec4(position, 0.0, 1.0);\n}\n`;\n\nconst FRAG = `#version 300 es\nprecision highp float;\n\nuniform float uTime;\nuniform float uAmplitude;\nuniform vec3 uColorStops[3];\nuniform vec2 uResolution;\nuniform float uBlend;\n\nout vec4 fragColor;\n\nvec3 permute(vec3 x) {\n return mod(((x * 34.0) + 1.0) * x, 289.0);\n}\n\nfloat snoise(vec2 v){\n const vec4 C = vec4(\n 0.211324865405187, 0.366025403784439,\n -0.577350269189626, 0.024390243902439\n );\n vec2 i = floor(v + dot(v, C.yy));\n vec2 x0 = v - i + dot(i, C.xx);\n vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n vec4 x12 = x0.xyxy + C.xxzz;\n x12.xy -= i1;\n i = mod(i, 289.0);\n\n vec3 p = permute(\n permute(i.y + vec3(0.0, i1.y, 1.0))\n + i.x + vec3(0.0, i1.x, 1.0)\n );\n\n vec3 m = max(\n 0.5 - vec3(\n dot(x0, x0),\n dot(x12.xy, x12.xy),\n dot(x12.zw, x12.zw)\n ),\n 0.0\n );\n m = m * m;\n m = m * m;\n\n vec3 x = 2.0 * fract(p * C.www) - 1.0;\n vec3 h = abs(x) - 0.5;\n vec3 ox = floor(x + 0.5);\n vec3 a0 = x - ox;\n m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);\n\n vec3 g;\n g.x = a0.x * x0.x + h.x * x0.y;\n g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n return 130.0 * dot(m, g);\n}\n\nstruct ColorStop {\n vec3 color;\n float position;\n};\n\n#define COLOR_RAMP(colors, factor, finalColor) { \\\\\n int index = 0; \\\\\n for (int i = 0; i < 2; i++) { \\\\\n ColorStop currentColor = colors[i]; \\\\\n bool isInBetween = currentColor.position <= factor; \\\\\n index = int(mix(float(index), float(i), float(isInBetween))); \\\\\n } \\\\\n ColorStop currentColor = colors[index]; \\\\\n ColorStop nextColor = colors[index + 1]; \\\\\n float range = nextColor.position - currentColor.position; \\\\\n float lerpFactor = (factor - currentColor.position) / range; \\\\\n finalColor = mix(currentColor.color, nextColor.color, lerpFactor); \\\\\n}\n\nvoid main() {\n vec2 uv = gl_FragCoord.xy / uResolution;\n\n ColorStop colors[3];\n colors[0] = ColorStop(uColorStops[0], 0.0);\n colors[1] = ColorStop(uColorStops[1], 0.5);\n colors[2] = ColorStop(uColorStops[2], 1.0);\n\n vec3 rampColor;\n COLOR_RAMP(colors, uv.x, rampColor);\n\n float height = snoise(vec2(uv.x * 2.0 + uTime * 0.1, uTime * 0.25)) * 0.5 * uAmplitude;\n height = exp(height);\n height = (uv.y * 2.0 - height + 0.2);\n float intensity = 0.6 * height;\n\n float midPoint = 0.20;\n float auroraAlpha = smoothstep(midPoint - uBlend * 0.5, midPoint + uBlend * 0.5, intensity);\n\n // Clamp the brightness floor: the upstream shader multiplies colour by\n // raw intensity, which fades the ribbon to BLACK while still opaque —\n // invisible on dark pages, a dirty gray halo on light ones. Keeping the\n // hue saturated and letting alpha alone do the fading works on both.\n vec3 auroraColor = rampColor * max(intensity, 0.85);\n\n fragColor = vec4(auroraColor * auroraAlpha, auroraAlpha);\n}\n`;\n\nfunction hexToRgb01(hex: string): [number, number, number] {\n let val = hex.replace('#', '');\n if (val.length === 3) val = val[0] + val[0] + val[1] + val[1] + val[2] + val[2];\n return [\n Number.parseInt(val.slice(0, 2), 16) / 255,\n Number.parseInt(val.slice(2, 4), 16) / 255,\n Number.parseInt(val.slice(4, 6), 16) / 255,\n ];\n}\n\n/**\n * Aurora background — flowing northern-lights ribbons rendered with a\n * WebGL2 simplex-noise shader, ramped across three colour stops. Fills\n * its nearest positioned ancestor; renders nothing without WebGL2.\n *\n * Under `prefers-reduced-motion` a single static frame is drawn.\n *\n * @example\n * ```html\n * <div style=\"position: relative; min-height: 24rem; overflow: hidden\">\n * <wr-aurora />\n * <h1 style=\"position: relative\">Welcome aboard</h1>\n * </div>\n * ```\n *\n * @see https://ngwr.dev/animations/aurora\n */\n@Component({\n selector: 'wr-aurora',\n template: '<canvas #canvas class=\"wr-aurora__canvas\" aria-hidden=\"true\"></canvas>',\n styleUrl: './aurora.scss',\n encapsulation: ViewEncapsulation.None,\n host: { class: 'wr-aurora' },\n})\nexport class WrAurora {\n /**\n * Exactly three colour stops, ramped left → right. When unset, the\n * theme decides: deep violet/emerald on light, the neon reactbits\n * palette on dark.\n */\n readonly colorStops = input<readonly string[] | null>(null);\n\n /** Wave height multiplier. @default 1 */\n readonly amplitude = input(1, { transform: numAttr(1) });\n\n /** Softness of the aurora's lower edge, 0..1. @default 0.5 */\n readonly blend = input(0.5, { transform: numAttr(0.5) });\n\n /** Time multiplier. @default 1 */\n readonly speed = input(1, { transform: numAttr(1) });\n\n private readonly canvasRef = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');\n\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly zone = inject(NgZone);\n private readonly destroyRef = inject(DestroyRef);\n private readonly platform = inject(WrPlatform);\n private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n private gl: WebGL2RenderingContext | null = null;\n private uniforms: Record<string, WebGLUniformLocation | null> = {};\n private rafId = 0;\n\n constructor() {\n if (!this.isBrowser) return;\n\n afterNextRender(() => this.zone.runOutsideAngular(() => this.boot()));\n\n // Push input changes into uniforms without restarting the loop. Under\n // reduced motion this also repaints the static frame.\n effect(() => {\n this.colorStops();\n this.amplitude();\n this.blend();\n if (!this.gl) return;\n this.pushUniforms();\n if (this.platform.prefersReducedMotion()) this.draw(0);\n });\n }\n\n private boot(): void {\n const canvas = this.canvasRef().nativeElement;\n const gl = canvas.getContext('webgl2', { alpha: true, premultipliedAlpha: true, antialias: true });\n if (!gl) return;\n this.gl = gl;\n\n gl.clearColor(0, 0, 0, 0);\n gl.enable(gl.BLEND);\n gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);\n\n const compile = (type: number, source: string): WebGLShader => {\n const shader = gl.createShader(type)!;\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n // eslint-disable-next-line no-console -- GPU shader failures are otherwise invisible\n console.error('wr-aurora shader error:', gl.getShaderInfoLog(shader));\n }\n return shader;\n };\n\n const program = gl.createProgram();\n gl.attachShader(program, compile(gl.VERTEX_SHADER, VERT));\n gl.attachShader(program, compile(gl.FRAGMENT_SHADER, FRAG));\n gl.linkProgram(program);\n gl.useProgram(program);\n\n for (const name of ['uTime', 'uAmplitude', 'uColorStops', 'uResolution', 'uBlend']) {\n this.uniforms[name] = gl.getUniformLocation(program, name);\n }\n\n // One oversized triangle covers the viewport — no index buffer needed.\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);\n const position = gl.getAttribLocation(program, 'position');\n gl.enableVertexAttribArray(position);\n gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);\n\n const resize = (): void => {\n const rect = this.host.nativeElement.getBoundingClientRect();\n canvas.width = Math.max(1, Math.round(rect.width));\n canvas.height = Math.max(1, Math.round(rect.height));\n gl.viewport(0, 0, canvas.width, canvas.height);\n gl.uniform2f(this.uniforms['uResolution'], canvas.width, canvas.height);\n if (this.platform.prefersReducedMotion()) this.draw(0);\n };\n\n window.addEventListener('resize', resize);\n const ro = new ResizeObserver(resize);\n ro.observe(this.host.nativeElement);\n\n resize();\n this.pushUniforms();\n\n if (this.platform.prefersReducedMotion()) {\n // Static frame — the ribbons hold their t=0 shape.\n this.draw(0);\n } else {\n const loop = (t: number): void => {\n this.rafId = requestAnimationFrame(loop);\n this.pushUniforms();\n this.draw(t * 0.01 * this.speed() * 0.1);\n };\n this.rafId = requestAnimationFrame(loop);\n }\n\n this.destroyRef.onDestroy(() => {\n cancelAnimationFrame(this.rafId);\n window.removeEventListener('resize', resize);\n ro.disconnect();\n });\n }\n\n private pushUniforms(): void {\n const gl = this.gl;\n if (!gl) return;\n const stops = this.resolveStops();\n const flat = new Float32Array(9);\n for (let i = 0; i < 3; i++) {\n const [r, g, b] = hexToRgb01(stops[Math.min(i, stops.length - 1)] ?? '#5227ff');\n flat[i * 3] = r;\n flat[i * 3 + 1] = g;\n flat[i * 3 + 2] = b;\n }\n gl.uniform3fv(this.uniforms['uColorStops'], flat);\n gl.uniform1f(this.uniforms['uAmplitude'], this.amplitude());\n gl.uniform1f(this.uniforms['uBlend'], this.blend());\n }\n\n /** Explicit input wins; otherwise the theme's `--wr-aurora-stop-*` vars. */\n private resolveStops(): readonly string[] {\n const explicit = this.colorStops();\n if (explicit !== null) return explicit;\n const style = getComputedStyle(this.host.nativeElement);\n return [\n style.getPropertyValue('--wr-aurora-stop-1').trim() || '#5227ff',\n style.getPropertyValue('--wr-aurora-stop-2').trim() || '#7cff67',\n style.getPropertyValue('--wr-aurora-stop-3').trim() || '#5227ff',\n ];\n }\n\n private draw(time: number): void {\n const gl = this.gl;\n if (!gl) return;\n gl.uniform1f(this.uniforms['uTime'], time);\n gl.clear(gl.COLOR_BUFFER_BIT);\n gl.drawArrays(gl.TRIANGLES, 0, 3);\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-aurora.mjs","sources":["../../../projects/lib/aurora/aurora.ts","../../../projects/lib/aurora/ngwr-aurora.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 * Angular adaptation of the Aurora background by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/backgrounds/aurora\n *\n * The reactbits version renders through the OGL library; this port talks\n * to WebGL2 directly — same vertex/fragment shaders, zero dependencies.\n */\n\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n Component,\n DestroyRef,\n ElementRef,\n NgZone,\n PLATFORM_ID,\n ViewEncapsulation,\n afterNextRender,\n effect,\n inject,\n input,\n viewChild,\n} from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { numAttr } from 'ngwr/utils';\n\nconst VERT = `#version 300 es\nin vec2 position;\nvoid main() {\n gl_Position = vec4(position, 0.0, 1.0);\n}\n`;\n\nconst FRAG = `#version 300 es\nprecision highp float;\n\nuniform float uTime;\nuniform float uAmplitude;\nuniform vec3 uColorStops[3];\nuniform vec2 uResolution;\nuniform float uBlend;\n\nout vec4 fragColor;\n\nvec3 permute(vec3 x) {\n return mod(((x * 34.0) + 1.0) * x, 289.0);\n}\n\nfloat snoise(vec2 v){\n const vec4 C = vec4(\n 0.211324865405187, 0.366025403784439,\n -0.577350269189626, 0.024390243902439\n );\n vec2 i = floor(v + dot(v, C.yy));\n vec2 x0 = v - i + dot(i, C.xx);\n vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n vec4 x12 = x0.xyxy + C.xxzz;\n x12.xy -= i1;\n i = mod(i, 289.0);\n\n vec3 p = permute(\n permute(i.y + vec3(0.0, i1.y, 1.0))\n + i.x + vec3(0.0, i1.x, 1.0)\n );\n\n vec3 m = max(\n 0.5 - vec3(\n dot(x0, x0),\n dot(x12.xy, x12.xy),\n dot(x12.zw, x12.zw)\n ),\n 0.0\n );\n m = m * m;\n m = m * m;\n\n vec3 x = 2.0 * fract(p * C.www) - 1.0;\n vec3 h = abs(x) - 0.5;\n vec3 ox = floor(x + 0.5);\n vec3 a0 = x - ox;\n m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);\n\n vec3 g;\n g.x = a0.x * x0.x + h.x * x0.y;\n g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n return 130.0 * dot(m, g);\n}\n\nstruct ColorStop {\n vec3 color;\n float position;\n};\n\n#define COLOR_RAMP(colors, factor, finalColor) { \\\\\n int index = 0; \\\\\n for (int i = 0; i < 2; i++) { \\\\\n ColorStop currentColor = colors[i]; \\\\\n bool isInBetween = currentColor.position <= factor; \\\\\n index = int(mix(float(index), float(i), float(isInBetween))); \\\\\n } \\\\\n ColorStop currentColor = colors[index]; \\\\\n ColorStop nextColor = colors[index + 1]; \\\\\n float range = nextColor.position - currentColor.position; \\\\\n float lerpFactor = (factor - currentColor.position) / range; \\\\\n finalColor = mix(currentColor.color, nextColor.color, lerpFactor); \\\\\n}\n\nvoid main() {\n vec2 uv = gl_FragCoord.xy / uResolution;\n\n ColorStop colors[3];\n colors[0] = ColorStop(uColorStops[0], 0.0);\n colors[1] = ColorStop(uColorStops[1], 0.5);\n colors[2] = ColorStop(uColorStops[2], 1.0);\n\n vec3 rampColor;\n COLOR_RAMP(colors, uv.x, rampColor);\n\n float height = snoise(vec2(uv.x * 2.0 + uTime * 0.1, uTime * 0.25)) * 0.5 * uAmplitude;\n height = exp(height);\n height = (uv.y * 2.0 - height + 0.2);\n float intensity = 0.6 * height;\n\n float midPoint = 0.20;\n float auroraAlpha = smoothstep(midPoint - uBlend * 0.5, midPoint + uBlend * 0.5, intensity);\n\n // Clamp the brightness floor: the upstream shader multiplies colour by\n // raw intensity, which fades the ribbon to BLACK while still opaque —\n // invisible on dark pages, a dirty gray halo on light ones. Keeping the\n // hue saturated and letting alpha alone do the fading works on both.\n vec3 auroraColor = rampColor * max(intensity, 0.85);\n\n fragColor = vec4(auroraColor * auroraAlpha, auroraAlpha);\n}\n`;\n\nfunction hexToRgb01(hex: string): [number, number, number] {\n let val = hex.replace('#', '');\n if (val.length === 3) val = val[0] + val[0] + val[1] + val[1] + val[2] + val[2];\n return [\n Number.parseInt(val.slice(0, 2), 16) / 255,\n Number.parseInt(val.slice(2, 4), 16) / 255,\n Number.parseInt(val.slice(4, 6), 16) / 255,\n ];\n}\n\n/**\n * Aurora background — flowing northern-lights ribbons rendered with a\n * WebGL2 simplex-noise shader, ramped across three colour stops. Fills\n * its nearest positioned ancestor; renders nothing without WebGL2.\n *\n * Under `prefers-reduced-motion` a single static frame is drawn.\n *\n * @example\n * ```html\n * <div style=\"position: relative; min-height: 24rem; overflow: hidden\">\n * <wr-aurora />\n * <h1 style=\"position: relative\">Welcome aboard</h1>\n * </div>\n * ```\n *\n * @see https://ngwr.dev/animations/aurora\n */\n@Component({\n selector: 'wr-aurora',\n template: '<canvas #canvas class=\"wr-aurora__canvas\" aria-hidden=\"true\"></canvas>',\n styleUrl: './aurora.scss',\n encapsulation: ViewEncapsulation.None,\n host: { class: 'wr-aurora' },\n})\nexport class WrAurora {\n /**\n * Exactly three colour stops, ramped left → right. When unset, the\n * theme decides: deep violet/emerald on light, the neon reactbits\n * palette on dark.\n */\n readonly colorStops = input<readonly string[] | null>(null);\n\n /** Wave height multiplier. @default 1 */\n readonly amplitude = input(1, { transform: numAttr(1) });\n\n /** Softness of the aurora's lower edge, 0..1. @default 0.5 */\n readonly blend = input(0.5, { transform: numAttr(0.5) });\n\n /** Time multiplier. @default 1 */\n readonly speed = input(1, { transform: numAttr(1) });\n\n private readonly canvasRef = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');\n\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly zone = inject(NgZone);\n private readonly destroyRef = inject(DestroyRef);\n private readonly platform = inject(WrPlatform);\n private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n private gl: WebGL2RenderingContext | null = null;\n private uniforms: Record<string, WebGLUniformLocation | null> = {};\n private rafId = 0;\n\n constructor() {\n if (!this.isBrowser) return;\n\n afterNextRender(() => this.zone.runOutsideAngular(() => this.boot()));\n\n // Push input changes into uniforms without restarting the loop. Under\n // reduced motion this also repaints the static frame.\n effect(() => {\n this.colorStops();\n this.amplitude();\n this.blend();\n if (!this.gl) return;\n this.pushUniforms();\n if (this.platform.prefersReducedMotion()) this.draw(0);\n });\n }\n\n private boot(): void {\n const canvas = this.canvasRef().nativeElement;\n const gl = canvas.getContext('webgl2', { alpha: true, premultipliedAlpha: true, antialias: true });\n if (!gl) return;\n this.gl = gl;\n\n gl.clearColor(0, 0, 0, 0);\n gl.enable(gl.BLEND);\n gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);\n\n const compile = (type: number, source: string): WebGLShader => {\n const shader = gl.createShader(type)!;\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n // eslint-disable-next-line no-console -- GPU shader failures are otherwise invisible\n console.error('wr-aurora shader error:', gl.getShaderInfoLog(shader));\n }\n return shader;\n };\n\n const program = gl.createProgram();\n gl.attachShader(program, compile(gl.VERTEX_SHADER, VERT));\n gl.attachShader(program, compile(gl.FRAGMENT_SHADER, FRAG));\n gl.linkProgram(program);\n gl.useProgram(program);\n\n for (const name of ['uTime', 'uAmplitude', 'uColorStops', 'uResolution', 'uBlend']) {\n this.uniforms[name] = gl.getUniformLocation(program, name);\n }\n\n // One oversized triangle covers the viewport — no index buffer needed.\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);\n const position = gl.getAttribLocation(program, 'position');\n gl.enableVertexAttribArray(position);\n gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);\n\n const resize = (): void => {\n const rect = this.host.nativeElement.getBoundingClientRect();\n canvas.width = Math.max(1, Math.round(rect.width));\n canvas.height = Math.max(1, Math.round(rect.height));\n gl.viewport(0, 0, canvas.width, canvas.height);\n gl.uniform2f(this.uniforms['uResolution'], canvas.width, canvas.height);\n if (this.platform.prefersReducedMotion()) this.draw(0);\n };\n\n window.addEventListener('resize', resize);\n const ro = new ResizeObserver(resize);\n ro.observe(this.host.nativeElement);\n\n resize();\n this.pushUniforms();\n\n if (this.platform.prefersReducedMotion()) {\n // Static frame — the ribbons hold their t=0 shape.\n this.draw(0);\n } else {\n const loop = (t: number): void => {\n this.rafId = requestAnimationFrame(loop);\n this.pushUniforms();\n this.draw(t * 0.01 * this.speed() * 0.1);\n };\n this.rafId = requestAnimationFrame(loop);\n }\n\n this.destroyRef.onDestroy(() => {\n cancelAnimationFrame(this.rafId);\n window.removeEventListener('resize', resize);\n ro.disconnect();\n });\n }\n\n private pushUniforms(): void {\n const gl = this.gl;\n if (!gl) return;\n const stops = this.resolveStops();\n const flat = new Float32Array(9);\n for (let i = 0; i < 3; i++) {\n const [r, g, b] = hexToRgb01(stops[Math.min(i, stops.length - 1)] ?? '#5227ff');\n flat[i * 3] = r;\n flat[i * 3 + 1] = g;\n flat[i * 3 + 2] = b;\n }\n gl.uniform3fv(this.uniforms['uColorStops'], flat);\n gl.uniform1f(this.uniforms['uAmplitude'], this.amplitude());\n gl.uniform1f(this.uniforms['uBlend'], this.blend());\n }\n\n /** Explicit input wins; otherwise the theme's `--wr-aurora-stop-*` vars. */\n private resolveStops(): readonly string[] {\n const explicit = this.colorStops();\n if (explicit !== null) return explicit;\n const style = getComputedStyle(this.host.nativeElement);\n return [\n style.getPropertyValue('--wr-aurora-stop-1').trim() || '#5227ff',\n style.getPropertyValue('--wr-aurora-stop-2').trim() || '#7cff67',\n style.getPropertyValue('--wr-aurora-stop-3').trim() || '#5227ff',\n ];\n }\n\n private draw(time: number): void {\n const gl = this.gl;\n if (!gl) return;\n gl.uniform1f(this.uniforms['uTime'], time);\n gl.clear(gl.COLOR_BUFFER_BIT);\n gl.drawArrays(gl.TRIANGLES, 0, 3);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/fesm2022/ngwr-avatar.mjs
CHANGED
|
@@ -104,10 +104,10 @@ class WrAvatar {
|
|
|
104
104
|
onImageError() {
|
|
105
105
|
this.failed.set(true);
|
|
106
106
|
}
|
|
107
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
108
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
107
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
108
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrAvatar, isStandalone: true, selector: "wr-avatar", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.width": "cssSize()", "style.height": "cssSize()" } }, ngImport: i0, template: "<ng-content />\n\n@if (url(); as src) {\n @if (!failed()) {\n <img\n class=\"wr-avatar__img\"\n [src]=\"src\"\n [alt]=\"resolvedAlt()\"\n [attr.width]=\"pxSize()\"\n [attr.height]=\"pxSize()\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n decoding=\"async\"\n />\n\n @if (!loaded()) {\n <wr-spinner class=\"wr-avatar__spin\" />\n }\n }\n}\n", dependencies: [{ kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size", "ariaLabel"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
109
109
|
}
|
|
110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
110
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAvatar, decorators: [{
|
|
111
111
|
type: Component,
|
|
112
112
|
args: [{ selector: 'wr-avatar', encapsulation: ViewEncapsulation.None, host: {
|
|
113
113
|
'[class]': 'classes()',
|