@ui-organized/angular 0.0.0-stage → 6.0.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/LICENSE +201 -0
- package/README.md +166 -2
- package/dist/LICENSE +201 -0
- package/dist/README.md +167 -0
- package/dist/fesm2022/ui-organized-angular-icons-heroicons.mjs +179 -0
- package/dist/fesm2022/ui-organized-angular-icons-heroicons.mjs.map +1 -0
- package/dist/fesm2022/ui-organized-angular-icons-lucide.mjs +130 -0
- package/dist/fesm2022/ui-organized-angular-icons-lucide.mjs.map +1 -0
- package/dist/fesm2022/ui-organized-angular-icons-tabler.mjs +159 -0
- package/dist/fesm2022/ui-organized-angular-icons-tabler.mjs.map +1 -0
- package/dist/fesm2022/ui-organized-angular.mjs +32267 -0
- package/dist/fesm2022/ui-organized-angular.mjs.map +1 -0
- package/dist/overlay.css +23 -0
- package/dist/styles.css +6045 -0
- package/dist/types/ui-organized-angular-icons-heroicons.d.ts +53 -0
- package/dist/types/ui-organized-angular-icons-lucide.d.ts +53 -0
- package/dist/types/ui-organized-angular-icons-tabler.d.ts +53 -0
- package/dist/types/ui-organized-angular.d.ts +10359 -0
- package/overlay.css +23 -0
- package/package.json +114 -3
- package/styles.css +6045 -0
package/dist/README.md
ADDED
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
# @ui-organized/angular
|
|
2
|
+
|
|
3
|
+
Angular component library for the **ui-organized** design system, built on the
|
|
4
|
+
[Angular CDK](https://material.angular.dev/cdk/categories) and themed entirely
|
|
5
|
+
through design tokens (CSS custom properties from
|
|
6
|
+
[`@ui-organized/tokens`](https://www.npmjs.com/package/@ui-organized/tokens)).
|
|
7
|
+
|
|
8
|
+
The same 68 components the React, Svelte and Vue libraries ship, rendering the
|
|
9
|
+
same DOM: one stylesheet, one set of class names, one token contract. A gate in
|
|
10
|
+
this repo renders every component in every library and diffs the markup, so
|
|
11
|
+
"same component" is asserted rather than intended.
|
|
12
|
+
|
|
13
|
+
Ark UI has no Angular package, so the overlays here are built on the CDK's
|
|
14
|
+
overlay and portal primitives rather than on Zag state machines. Same rendered
|
|
15
|
+
result, different engine underneath.
|
|
16
|
+
|
|
17
|
+
## Install
|
|
18
|
+
|
|
19
|
+
```sh
|
|
20
|
+
npm install @ui-organized/angular @ui-organized/tokens @angular/cdk @angular/forms
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
`@angular/core`, `@angular/common`, `@angular/forms` and `@angular/cdk` (>=21)
|
|
24
|
+
are peer dependencies. Every component is standalone — there is no NgModule to
|
|
25
|
+
import.
|
|
26
|
+
|
|
27
|
+
### If you build with Vite rather than the Angular CLI
|
|
28
|
+
|
|
29
|
+
`@angular/cdk/overlay-prebuilt.css` is exported under the `style` condition
|
|
30
|
+
alone. Angular's own builder applies it; Vite does not by default, and the error
|
|
31
|
+
it raises — "No known conditions for ./overlay-prebuilt.css" — reads like a
|
|
32
|
+
broken import rather than a missing resolve condition. Naming any condition
|
|
33
|
+
replaces Vite's whole default list, so restore it alongside:
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
// vite.config.js
|
|
37
|
+
export default {
|
|
38
|
+
resolve: { conditions: ["style", "module", "browser", "development|production"] },
|
|
39
|
+
esbuild: {
|
|
40
|
+
tsconfigRaw: {
|
|
41
|
+
compilerOptions: { experimentalDecorators: true, useDefineForClassFields: false },
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
The `esbuild` block is not optional either. Angular's decorators need
|
|
48
|
+
`experimentalDecorators`, and with `useDefineForClassFields` on, a decorated
|
|
49
|
+
field's initializer overwrites what the decorator installed, so every component
|
|
50
|
+
silently loses its inputs. Without a compiler plugin Vite also runs Angular in
|
|
51
|
+
JIT mode, so `import "@angular/compiler";` must be the first line of `main.ts`.
|
|
52
|
+
|
|
53
|
+
## Icons
|
|
54
|
+
|
|
55
|
+
Icon packs are **optional** peers, and genuinely so: this package imports none of
|
|
56
|
+
them. Install the one you want and register it with a single import.
|
|
57
|
+
|
|
58
|
+
```sh
|
|
59
|
+
npm install @ng-icons/lucide # or @ng-icons/tabler-icons, or @ng-icons/heroicons
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
```ts
|
|
63
|
+
// once, near your app entry
|
|
64
|
+
import { registerIcons } from "@ui-organized/angular/icons/lucide";
|
|
65
|
+
import { lucideChevronDown, lucideSearch, lucideX } from "@ng-icons/lucide";
|
|
66
|
+
|
|
67
|
+
registerIcons({ lucideChevronDown, lucideSearch, lucideX });
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Names are the icon library's own, exactly as it publishes them: `search` and
|
|
71
|
+
`x` in Lucide, `x-mark` in Heroicons. Nothing is renamed, so a name belongs to
|
|
72
|
+
one library, and only the icons you register reach your bundle. The subpath
|
|
73
|
+
import alone is enough for the components' own icons (a dialog's close button,
|
|
74
|
+
a select's chevron), which follow whichever library is active.
|
|
75
|
+
|
|
76
|
+
```ts
|
|
77
|
+
import { provideIconConfig } from "@ui-organized/angular";
|
|
78
|
+
|
|
79
|
+
bootstrapApplication(App, {
|
|
80
|
+
providers: [provideIconConfig({ library: "lucide", style: "outline" })],
|
|
81
|
+
});
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
```html
|
|
85
|
+
<span uioIcon name="search" label="Search"></span>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
The subpath is the only module that touches `@ng-icons/lucide`, so the two packs
|
|
89
|
+
you didn't choose are never resolved — not at install, not at build. Forget the
|
|
90
|
+
import and the icon renders nothing and logs the line to add.
|
|
91
|
+
|
|
92
|
+
`provideIconConfig` accepts a signal as well as a plain object, so a theme
|
|
93
|
+
switcher flipping `style` to `"solid"` re-renders every icon below it:
|
|
94
|
+
|
|
95
|
+
```ts
|
|
96
|
+
providers: [provideIconConfig(computed(() => ({ library: "lucide", style: iconStyle() })))];
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Usage
|
|
100
|
+
|
|
101
|
+
Import the stylesheets once, at your app entry, **in this order**:
|
|
102
|
+
|
|
103
|
+
```ts
|
|
104
|
+
// src/main.ts
|
|
105
|
+
import "@ui-organized/tokens/variables.css"; // 1. token baseline
|
|
106
|
+
import "@angular/cdk/overlay-prebuilt.css"; // 2. the CDK's overlay pane
|
|
107
|
+
import "@ui-organized/angular/styles"; // 3. component styles
|
|
108
|
+
import "@ui-organized/angular/overlay.css"; // 4. overlay stacking
|
|
109
|
+
import "./styles/theme.css"; // 5. your theme — last, so it wins
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
Order is load-bearing. A theme and the baseline both declare on `:root`, and
|
|
113
|
+
`:root` vs `:root` is a specificity tie — decided by source order. Import the
|
|
114
|
+
theme earlier and the baseline silently wins.
|
|
115
|
+
|
|
116
|
+
The two overlay sheets are this library's only extra. The CDK renders every
|
|
117
|
+
dialog, popover and menu into a container it positions itself, and
|
|
118
|
+
`overlay-prebuilt.css` is what lays that container out; skip it and overlays
|
|
119
|
+
render unpositioned. `overlay.css` then stacks the container on the design
|
|
120
|
+
system's z-index scale, so overlays land above the page the way they do in the
|
|
121
|
+
other three libraries.
|
|
122
|
+
|
|
123
|
+
On the Angular CLI, list the same five files in the `styles` array of
|
|
124
|
+
`angular.json`, in the same order, instead of importing them from `main.ts`.
|
|
125
|
+
|
|
126
|
+
Most components are **attribute directives** on your own element, so the tag
|
|
127
|
+
stays yours:
|
|
128
|
+
|
|
129
|
+
```html
|
|
130
|
+
<button uioButton intent="primary">Save</button> <span uioTag variant="success">Active</span>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
The overlays own their host instead, because they project content into a surface
|
|
134
|
+
they control:
|
|
135
|
+
|
|
136
|
+
```html
|
|
137
|
+
<uio-dialog [(open)]="open">
|
|
138
|
+
<button uioDialogTrigger>Open</button>
|
|
139
|
+
<h2 uioDialogTitle>Title</h2>
|
|
140
|
+
</uio-dialog>
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
Form controls implement `ControlValueAccessor`, so `[(ngModel)]` and
|
|
144
|
+
`[formControl]` work without a wrapper.
|
|
145
|
+
|
|
146
|
+
## Theming
|
|
147
|
+
|
|
148
|
+
Components reference semantic _roles_ — `--color-surface-primary`,
|
|
149
|
+
`--color-interactive-primary-default` — never literal colors, so re-theming
|
|
150
|
+
means redefining those properties. The contract is shared with every other
|
|
151
|
+
library in the system, so a theme written once themes all four.
|
|
152
|
+
|
|
153
|
+
Light and dark ship together and are switched by attribute, not by re-import:
|
|
154
|
+
|
|
155
|
+
```ts
|
|
156
|
+
document.documentElement.setAttribute("data-theme", "dark");
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
Pin the default in your HTML (`<html data-theme="light">`) so the first frame
|
|
160
|
+
paints correctly, before any JavaScript runs.
|
|
161
|
+
|
|
162
|
+
Full guide, including the three ways to produce a theme:
|
|
163
|
+
<https://uiorganized.com/docs/theming>.
|
|
164
|
+
|
|
165
|
+
## License
|
|
166
|
+
|
|
167
|
+
Apache-2.0
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import { heroArrowUturnLeft, heroEyeDropper, heroCalendar, heroHome, heroCog6Tooth, heroUser, heroPause, heroPlay, heroFolder, heroDocument, heroListBullet, heroSquares2x2, heroBars3, heroTag, heroStar, heroEyeSlash, heroEye, heroMagnifyingGlass, heroInformationCircle, heroExclamationTriangle, heroExclamationCircle, heroCheckCircle, heroFunnel, heroBarsArrowDown, heroBarsArrowUp, heroArrowPath, heroArrowUpTray, heroArrowDownTray, heroTrash, heroPencil, heroDocumentDuplicate, heroMinus, heroPlus, heroCheck, heroXMark, heroChevronRight, heroChevronLeft, heroChevronUp, heroChevronDown } from '@ng-icons/heroicons/outline';
|
|
2
|
+
import { heroArrowUturnLeftSolid, heroEyeDropperSolid, heroCalendarSolid, heroHomeSolid, heroCog6ToothSolid, heroUserSolid, heroPauseSolid, heroPlaySolid, heroFolderSolid, heroDocumentSolid, heroListBulletSolid, heroSquares2x2Solid, heroBars3Solid, heroTagSolid, heroStarSolid, heroEyeSlashSolid, heroEyeSolid, heroMagnifyingGlassSolid, heroInformationCircleSolid, heroExclamationTriangleSolid, heroExclamationCircleSolid, heroCheckCircleSolid, heroFunnelSolid, heroBarsArrowDownSolid, heroBarsArrowUpSolid, heroArrowPathSolid, heroArrowUpTraySolid, heroArrowDownTraySolid, heroTrashSolid, heroPencilSolid, heroDocumentDuplicateSolid, heroMinusSolid, heroPlusSolid, heroCheckSolid, heroXMarkSolid, heroChevronRightSolid, heroChevronLeftSolid, heroChevronUpSolid, heroChevronDownSolid } from '@ng-icons/heroicons/solid';
|
|
3
|
+
import { createIconRegistry } from '@ui-organized/core';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Heroicons name maps.
|
|
7
|
+
*
|
|
8
|
+
* Each of the components' own glyphs (`SystemGlyph` in @ui-organized/core) to the SVG markup `@ng-icons/heroicons`
|
|
9
|
+
* publishes for it. Written by hand, as React's are: `@ng-icons` derives its
|
|
10
|
+
* export names from the upstream file names, which is close to but not the same
|
|
11
|
+
* as the component names the React packages use — `Grid2X2`, `ArrowUpAZ` and
|
|
12
|
+
* `Trash2` are exactly where a mechanical transform goes wrong.
|
|
13
|
+
*
|
|
14
|
+
* Named imports, so only the icons listed here reach a bundle; the pack itself
|
|
15
|
+
* is a catalogue of thousands.
|
|
16
|
+
*/
|
|
17
|
+
/**
|
|
18
|
+
* Two substitutions carried over from the React adapter, for the same reason:
|
|
19
|
+
* Heroicons ships no spinner and no clockwise-rotate glyph, so `loader` and
|
|
20
|
+
* `rotate-cw` both use ArrowPath, which already backs `refresh`.
|
|
21
|
+
*/
|
|
22
|
+
const heroiconsOutlineSet = {
|
|
23
|
+
"chevron-down": heroChevronDown,
|
|
24
|
+
"chevron-up": heroChevronUp,
|
|
25
|
+
"chevron-left": heroChevronLeft,
|
|
26
|
+
"chevron-right": heroChevronRight,
|
|
27
|
+
"close": heroXMark,
|
|
28
|
+
"check": heroCheck,
|
|
29
|
+
"plus": heroPlus,
|
|
30
|
+
"minus": heroMinus,
|
|
31
|
+
"copy": heroDocumentDuplicate,
|
|
32
|
+
"edit": heroPencil,
|
|
33
|
+
"trash": heroTrash,
|
|
34
|
+
"download": heroArrowDownTray,
|
|
35
|
+
"upload": heroArrowUpTray,
|
|
36
|
+
"refresh": heroArrowPath,
|
|
37
|
+
"undo": heroArrowUturnLeft,
|
|
38
|
+
"sort-asc": heroBarsArrowUp,
|
|
39
|
+
"sort-desc": heroBarsArrowDown,
|
|
40
|
+
"sort": heroBarsArrowDown,
|
|
41
|
+
"filter": heroFunnel,
|
|
42
|
+
"check-circle": heroCheckCircle,
|
|
43
|
+
"alert-circle": heroExclamationCircle,
|
|
44
|
+
"alert-triangle": heroExclamationTriangle,
|
|
45
|
+
"info": heroInformationCircle,
|
|
46
|
+
"search": heroMagnifyingGlass,
|
|
47
|
+
"eye": heroEye,
|
|
48
|
+
"eye-off": heroEyeSlash,
|
|
49
|
+
"star": heroStar,
|
|
50
|
+
"tag": heroTag,
|
|
51
|
+
"menu": heroBars3,
|
|
52
|
+
"grid": heroSquares2x2,
|
|
53
|
+
"list": heroListBullet,
|
|
54
|
+
"file": heroDocument,
|
|
55
|
+
"folder": heroFolder,
|
|
56
|
+
"play": heroPlay,
|
|
57
|
+
"pause": heroPause,
|
|
58
|
+
"user": heroUser,
|
|
59
|
+
"settings": heroCog6Tooth,
|
|
60
|
+
"home": heroHome,
|
|
61
|
+
"calendar": heroCalendar,
|
|
62
|
+
"pipette": heroEyeDropper,
|
|
63
|
+
"rotate-ccw": heroArrowUturnLeft,
|
|
64
|
+
};
|
|
65
|
+
const heroiconsSolidSet = {
|
|
66
|
+
"chevron-down": heroChevronDownSolid,
|
|
67
|
+
"chevron-up": heroChevronUpSolid,
|
|
68
|
+
"chevron-left": heroChevronLeftSolid,
|
|
69
|
+
"chevron-right": heroChevronRightSolid,
|
|
70
|
+
"close": heroXMarkSolid,
|
|
71
|
+
"check": heroCheckSolid,
|
|
72
|
+
"plus": heroPlusSolid,
|
|
73
|
+
"minus": heroMinusSolid,
|
|
74
|
+
"copy": heroDocumentDuplicateSolid,
|
|
75
|
+
"edit": heroPencilSolid,
|
|
76
|
+
"trash": heroTrashSolid,
|
|
77
|
+
"download": heroArrowDownTraySolid,
|
|
78
|
+
"upload": heroArrowUpTraySolid,
|
|
79
|
+
"refresh": heroArrowPathSolid,
|
|
80
|
+
"undo": heroArrowUturnLeftSolid,
|
|
81
|
+
"sort-asc": heroBarsArrowUpSolid,
|
|
82
|
+
"sort-desc": heroBarsArrowDownSolid,
|
|
83
|
+
"sort": heroBarsArrowDownSolid,
|
|
84
|
+
"filter": heroFunnelSolid,
|
|
85
|
+
"check-circle": heroCheckCircleSolid,
|
|
86
|
+
"alert-circle": heroExclamationCircleSolid,
|
|
87
|
+
"alert-triangle": heroExclamationTriangleSolid,
|
|
88
|
+
"info": heroInformationCircleSolid,
|
|
89
|
+
"search": heroMagnifyingGlassSolid,
|
|
90
|
+
"eye": heroEyeSolid,
|
|
91
|
+
"eye-off": heroEyeSlashSolid,
|
|
92
|
+
"star": heroStarSolid,
|
|
93
|
+
"tag": heroTagSolid,
|
|
94
|
+
"menu": heroBars3Solid,
|
|
95
|
+
"grid": heroSquares2x2Solid,
|
|
96
|
+
"list": heroListBulletSolid,
|
|
97
|
+
"file": heroDocumentSolid,
|
|
98
|
+
"folder": heroFolderSolid,
|
|
99
|
+
"play": heroPlaySolid,
|
|
100
|
+
"pause": heroPauseSolid,
|
|
101
|
+
"user": heroUserSolid,
|
|
102
|
+
"settings": heroCog6ToothSolid,
|
|
103
|
+
"home": heroHomeSolid,
|
|
104
|
+
"calendar": heroCalendarSolid,
|
|
105
|
+
"pipette": heroEyeDropperSolid,
|
|
106
|
+
"rotate-ccw": heroArrowUturnLeftSolid,
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
const { registerIconSet, getIconSet, registeredLibraries, registerIcons: registerIcons$1, getIcon, registeredNames } = createIconRegistry(Symbol.for("@ui-organized/angular.iconRegistry"));
|
|
110
|
+
/**
|
|
111
|
+
* The prop mapping every `@ng-icons`-sourced set uses.
|
|
112
|
+
*
|
|
113
|
+
* The three React adapters each need their own, because lucide takes
|
|
114
|
+
* `strokeWidth`, tabler takes `stroke` and heroicons takes `width`/`height`.
|
|
115
|
+
* Here there is one, because every `@ng-icons` pack ships its icons carrying
|
|
116
|
+
* `style="stroke-width:var(--ng-icon__stroke-width, 2)"` — so the weight is set
|
|
117
|
+
* by one custom property regardless of which library drew the glyph.
|
|
118
|
+
*
|
|
119
|
+
* The property name belongs to another project and stays as written: it is that
|
|
120
|
+
* project's published contract, it never reaches a consumer's code, and
|
|
121
|
+
* rewriting it per icon at registration would buy nothing.
|
|
122
|
+
*
|
|
123
|
+
* Exported because a consumer assembling their own set out of `@ng-icons`
|
|
124
|
+
* markup needs exactly this.
|
|
125
|
+
*/
|
|
126
|
+
function ngIconsSvgProps(size, stroke) {
|
|
127
|
+
return {
|
|
128
|
+
width: size,
|
|
129
|
+
height: size,
|
|
130
|
+
// Omitted rather than passed as undefined — a solid icon has no stroke, and
|
|
131
|
+
// the property must not be written at all. See `applySvgProps`.
|
|
132
|
+
...(stroke !== undefined ? { "--ng-icon__stroke-width": stroke } : {}),
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* The `@ui-organized/angular/icons/heroicons` entry point.
|
|
138
|
+
*
|
|
139
|
+
* Importing it registers the set; that side effect is the whole purpose, and the
|
|
140
|
+
* reason the package's `sideEffects` field has to keep this file. React shipped
|
|
141
|
+
* a version where it did not, and icons rendered in dev and vanished in
|
|
142
|
+
* `vite build`.
|
|
143
|
+
*
|
|
144
|
+
* import "@ui-organized/angular/icons/heroicons";
|
|
145
|
+
*
|
|
146
|
+
* This file and everything it reaches must stay inside `src/lib/icons/`:
|
|
147
|
+
* ng-packagr sets a secondary entry point's `rootDir` to the directory of its
|
|
148
|
+
* entry file, and anything above that is a TS6059.
|
|
149
|
+
*/
|
|
150
|
+
const heroiconsIcons = {
|
|
151
|
+
library: "heroicons",
|
|
152
|
+
outline: heroiconsOutlineSet,
|
|
153
|
+
solid: heroiconsSolidSet,
|
|
154
|
+
svgProps: ngIconsSvgProps,
|
|
155
|
+
};
|
|
156
|
+
registerIconSet(heroiconsIcons);
|
|
157
|
+
/**
|
|
158
|
+
* Make Heroicons icons available to `<Icon name>` under their own names.
|
|
159
|
+
*
|
|
160
|
+
* Pass them as imported and the names follow from the exports
|
|
161
|
+
* (`heroCamera` → `"camera"`), or key them by native name yourself where
|
|
162
|
+
* the export can't be read back unambiguously (`{ h1: heroH1 }`).
|
|
163
|
+
* Only what you register reaches your bundle.
|
|
164
|
+
*
|
|
165
|
+
* ```ts
|
|
166
|
+
* import { heroCamera, heroRocketLaunch } from "@ng-icons/heroicons/outline";
|
|
167
|
+
* registerIcons({ heroCamera, heroRocketLaunch });
|
|
168
|
+
* ```
|
|
169
|
+
*/
|
|
170
|
+
function registerIcons(icons, options) {
|
|
171
|
+
registerIcons$1("heroicons", icons, options);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* Generated bundle index. Do not edit.
|
|
176
|
+
*/
|
|
177
|
+
|
|
178
|
+
export { heroiconsIcons, registerIcons };
|
|
179
|
+
//# sourceMappingURL=ui-organized-angular-icons-heroicons.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ui-organized-angular-icons-heroicons.mjs","sources":["../../src/lib/icons/heroicons.ts","../../src/lib/icons/registry.ts","../../src/lib/icons/entry-heroicons.ts","../../src/lib/icons/ui-organized-angular-icons-heroicons.ts"],"sourcesContent":["/**\n * Heroicons name maps.\n *\n * Each of the components' own glyphs (`SystemGlyph` in @ui-organized/core) to the SVG markup `@ng-icons/heroicons`\n * publishes for it. Written by hand, as React's are: `@ng-icons` derives its\n * export names from the upstream file names, which is close to but not the same\n * as the component names the React packages use — `Grid2X2`, `ArrowUpAZ` and\n * `Trash2` are exactly where a mechanical transform goes wrong.\n *\n * Named imports, so only the icons listed here reach a bundle; the pack itself\n * is a catalogue of thousands.\n */\nimport {\n heroArrowDownTray,\n heroArrowPath,\n heroArrowUpTray,\n heroArrowUturnLeft,\n heroBars3,\n heroBarsArrowDown,\n heroBarsArrowUp,\n heroCalendar,\n heroCheck,\n heroCheckCircle,\n heroChevronDown,\n heroChevronLeft,\n heroChevronRight,\n heroChevronUp,\n heroCog6Tooth,\n heroDocument,\n heroDocumentDuplicate,\n heroExclamationCircle,\n heroExclamationTriangle,\n heroEye,\n heroEyeDropper,\n heroEyeSlash,\n heroFolder,\n heroFunnel,\n heroHome,\n heroInformationCircle,\n heroListBullet,\n heroMagnifyingGlass,\n heroMinus,\n heroPause,\n heroPencil,\n heroPlay,\n heroPlus,\n heroSquares2x2,\n heroStar,\n heroTag,\n heroTrash,\n heroUser,\n heroXMark,\n} from \"@ng-icons/heroicons/outline\";\nimport {\n heroArrowDownTraySolid,\n heroArrowPathSolid,\n heroArrowUpTraySolid,\n heroArrowUturnLeftSolid,\n heroBars3Solid,\n heroBarsArrowDownSolid,\n heroBarsArrowUpSolid,\n heroCalendarSolid,\n heroCheckCircleSolid,\n heroCheckSolid,\n heroChevronDownSolid,\n heroChevronLeftSolid,\n heroChevronRightSolid,\n heroChevronUpSolid,\n heroCog6ToothSolid,\n heroDocumentDuplicateSolid,\n heroDocumentSolid,\n heroExclamationCircleSolid,\n heroExclamationTriangleSolid,\n heroEyeDropperSolid,\n heroEyeSlashSolid,\n heroEyeSolid,\n heroFolderSolid,\n heroFunnelSolid,\n heroHomeSolid,\n heroInformationCircleSolid,\n heroListBulletSolid,\n heroMagnifyingGlassSolid,\n heroMinusSolid,\n heroPauseSolid,\n heroPencilSolid,\n heroPlaySolid,\n heroPlusSolid,\n heroSquares2x2Solid,\n heroStarSolid,\n heroTagSolid,\n heroTrashSolid,\n heroUserSolid,\n heroXMarkSolid,\n} from \"@ng-icons/heroicons/solid\";\nimport type { SystemGlyph } from \"@ui-organized/core\";\n\n/**\n * Two substitutions carried over from the React adapter, for the same reason:\n * Heroicons ships no spinner and no clockwise-rotate glyph, so `loader` and\n * `rotate-cw` both use ArrowPath, which already backs `refresh`.\n */\nexport const heroiconsOutlineSet: Record<SystemGlyph, string> = {\n \"chevron-down\": heroChevronDown,\n \"chevron-up\": heroChevronUp,\n \"chevron-left\": heroChevronLeft,\n \"chevron-right\": heroChevronRight,\n \"close\": heroXMark,\n \"check\": heroCheck,\n \"plus\": heroPlus,\n \"minus\": heroMinus,\n \"copy\": heroDocumentDuplicate,\n \"edit\": heroPencil,\n \"trash\": heroTrash,\n \"download\": heroArrowDownTray,\n \"upload\": heroArrowUpTray,\n \"refresh\": heroArrowPath,\n \"undo\": heroArrowUturnLeft,\n \"sort-asc\": heroBarsArrowUp,\n \"sort-desc\": heroBarsArrowDown,\n \"sort\": heroBarsArrowDown,\n \"filter\": heroFunnel,\n \"check-circle\": heroCheckCircle,\n \"alert-circle\": heroExclamationCircle,\n \"alert-triangle\": heroExclamationTriangle,\n \"info\": heroInformationCircle,\n \"search\": heroMagnifyingGlass,\n \"eye\": heroEye,\n \"eye-off\": heroEyeSlash,\n \"star\": heroStar,\n \"tag\": heroTag,\n \"menu\": heroBars3,\n \"grid\": heroSquares2x2,\n \"list\": heroListBullet,\n \"file\": heroDocument,\n \"folder\": heroFolder,\n \"play\": heroPlay,\n \"pause\": heroPause,\n \"user\": heroUser,\n \"settings\": heroCog6Tooth,\n \"home\": heroHome,\n \"calendar\": heroCalendar,\n \"pipette\": heroEyeDropper,\n \"rotate-ccw\": heroArrowUturnLeft,\n};\n\nexport const heroiconsSolidSet: Record<SystemGlyph, string> = {\n \"chevron-down\": heroChevronDownSolid,\n \"chevron-up\": heroChevronUpSolid,\n \"chevron-left\": heroChevronLeftSolid,\n \"chevron-right\": heroChevronRightSolid,\n \"close\": heroXMarkSolid,\n \"check\": heroCheckSolid,\n \"plus\": heroPlusSolid,\n \"minus\": heroMinusSolid,\n \"copy\": heroDocumentDuplicateSolid,\n \"edit\": heroPencilSolid,\n \"trash\": heroTrashSolid,\n \"download\": heroArrowDownTraySolid,\n \"upload\": heroArrowUpTraySolid,\n \"refresh\": heroArrowPathSolid,\n \"undo\": heroArrowUturnLeftSolid,\n \"sort-asc\": heroBarsArrowUpSolid,\n \"sort-desc\": heroBarsArrowDownSolid,\n \"sort\": heroBarsArrowDownSolid,\n \"filter\": heroFunnelSolid,\n \"check-circle\": heroCheckCircleSolid,\n \"alert-circle\": heroExclamationCircleSolid,\n \"alert-triangle\": heroExclamationTriangleSolid,\n \"info\": heroInformationCircleSolid,\n \"search\": heroMagnifyingGlassSolid,\n \"eye\": heroEyeSolid,\n \"eye-off\": heroEyeSlashSolid,\n \"star\": heroStarSolid,\n \"tag\": heroTagSolid,\n \"menu\": heroBars3Solid,\n \"grid\": heroSquares2x2Solid,\n \"list\": heroListBulletSolid,\n \"file\": heroDocumentSolid,\n \"folder\": heroFolderSolid,\n \"play\": heroPlaySolid,\n \"pause\": heroPauseSolid,\n \"user\": heroUserSolid,\n \"settings\": heroCog6ToothSolid,\n \"home\": heroHomeSolid,\n \"calendar\": heroCalendarSolid,\n \"pipette\": heroEyeDropperSolid,\n \"rotate-ccw\": heroArrowUturnLeftSolid,\n};\n","import {\n createIconRegistry,\n type IconNameMap as CoreIconNameMap,\n type IconSet as CoreIconSet,\n type SystemGlyphMap as CoreSystemGlyphMap,\n} from \"@ui-organized/core\";\n\nexport type { IconLibrary, RegisterIconsOptions } from \"@ui-organized/core\";\n\n/**\n * This package's icon-set registry: the shared mechanism from\n * `@ui-organized/core`, bound to **SVG markup** rather than to components.\n *\n * The registry itself — why it exists, why it is keyed on `globalThis`, and why\n * each framework gets its own — is documented in core. All that happens here is\n * fixing the stored type, and choosing a key distinct from the other three\n * packages' so none of them can read another's icons.\n *\n * ── Why an Angular icon is a string ─────────────────────────────────────────\n *\n * The other three libraries store components, and Angular could too — but\n * Angular instantiates a component onto an element of its own, so an icon\n * rendered that way comes out as\n * `<span class=\"icon\"><ng-icon><svg/></ng-icon></span>` where the others render\n * `<span class=\"icon\"><svg/></span>`. `.icon` is `display: inline-flex` with\n * centring, so the intermediate element becomes the flex item and the SVG stops\n * being what is laid out. One element deeper is a different DOM, and this whole\n * package exists to produce the same one.\n *\n * Core's registry is generic over the stored type precisely so a framework can\n * answer this differently. Storing markup lets `Icon` create the `<svg>` itself\n * and put it directly inside the span.\n *\n * It also turns out to be the *better* contract for stroke. Every\n * `@ng-icons/*` pack ships its icons with\n * `style=\"stroke-width:var(--ng-icon__stroke-width, 2)\"`, so a single custom\n * property drives the weight for lucide, tabler and heroicons alike — where the\n * React adapters need three different prop shapes because lucide takes\n * `strokeWidth`, tabler takes `stroke` and heroicons takes `width`/`height`.\n */\nexport type IconMarkup = string;\nexport type IconNameMap = CoreIconNameMap<IconMarkup>;\nexport type IconSet = CoreIconSet<IconMarkup>;\n\n/** The components' own glyphs, for one library in one style. */\nexport type SystemGlyphMap = CoreSystemGlyphMap<IconMarkup>;\n\nconst { registerIconSet, getIconSet, registeredLibraries, registerIcons, getIcon, registeredNames } = createIconRegistry<IconMarkup>(\n Symbol.for(\"@ui-organized/angular.iconRegistry\"),\n);\n\nexport {\n registerIconSet,\n getIconSet,\n registeredLibraries,\n registerIcons,\n getIcon,\n registeredNames,\n};\n\n/**\n * The prop mapping every `@ng-icons`-sourced set uses.\n *\n * The three React adapters each need their own, because lucide takes\n * `strokeWidth`, tabler takes `stroke` and heroicons takes `width`/`height`.\n * Here there is one, because every `@ng-icons` pack ships its icons carrying\n * `style=\"stroke-width:var(--ng-icon__stroke-width, 2)\"` — so the weight is set\n * by one custom property regardless of which library drew the glyph.\n *\n * The property name belongs to another project and stays as written: it is that\n * project's published contract, it never reaches a consumer's code, and\n * rewriting it per icon at registration would buy nothing.\n *\n * Exported because a consumer assembling their own set out of `@ng-icons`\n * markup needs exactly this.\n */\nexport function ngIconsSvgProps(\n size: number,\n stroke: number | undefined,\n): Record<string, unknown> {\n return {\n width: size,\n height: size,\n // Omitted rather than passed as undefined — a solid icon has no stroke, and\n // the property must not be written at all. See `applySvgProps`.\n ...(stroke !== undefined ? { \"--ng-icon__stroke-width\": stroke } : {}),\n };\n}\n","/**\n * The `@ui-organized/angular/icons/heroicons` entry point.\n *\n * Importing it registers the set; that side effect is the whole purpose, and the\n * reason the package's `sideEffects` field has to keep this file. React shipped\n * a version where it did not, and icons rendered in dev and vanished in\n * `vite build`.\n *\n * import \"@ui-organized/angular/icons/heroicons\";\n *\n * This file and everything it reaches must stay inside `src/lib/icons/`:\n * ng-packagr sets a secondary entry point's `rootDir` to the directory of its\n * entry file, and anything above that is a TS6059.\n */\nimport { heroiconsOutlineSet, heroiconsSolidSet } from \"./heroicons.js\";\nimport {\n ngIconsSvgProps,\n registerIconSet,\n type IconSet,\n registerIcons as registerNamedIcons,\n type RegisterIconsOptions,\n type IconMarkup,\n} from \"./registry.js\";\n\nexport const heroiconsIcons: IconSet = {\n library: \"heroicons\",\n outline: heroiconsOutlineSet,\n solid: heroiconsSolidSet,\n svgProps: ngIconsSvgProps,\n};\n\nregisterIconSet(heroiconsIcons);\n\n/**\n * Make Heroicons icons available to `<Icon name>` under their own names.\n *\n * Pass them as imported and the names follow from the exports\n * (`heroCamera` → `\"camera\"`), or key them by native name yourself where\n * the export can't be read back unambiguously (`{ h1: heroH1 }`).\n * Only what you register reaches your bundle.\n *\n * ```ts\n * import { heroCamera, heroRocketLaunch } from \"@ng-icons/heroicons/outline\";\n * registerIcons({ heroCamera, heroRocketLaunch });\n * ```\n */\nexport function registerIcons(\n icons: Record<string, IconMarkup>,\n options?: RegisterIconsOptions,\n): void {\n registerNamedIcons(\"heroicons\", icons, options);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './entry-heroicons';\n"],"names":["registerIcons","registerNamedIcons"],"mappings":"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"}
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { lucideRotateCcw, lucidePipette, lucideCalendar, lucideHome, lucideSettings, lucideUser, lucidePause, lucidePlay, lucideFolder, lucideFile, lucideList, lucideGrid2X2, lucideMenu, lucideTag, lucideStar, lucideEyeOff, lucideEye, lucideSearch, lucideInfo, lucideAlertTriangle, lucideAlertCircle, lucideCheckCircle, lucideListFilter, lucideFilter, lucideArrowDownAZ, lucideArrowUpAZ, lucideUndo2, lucideRefreshCw, lucideUpload, lucideDownload, lucideTrash2, lucidePencil, lucideCopy, lucideMinus, lucidePlus, lucideCheck, lucideX, lucideChevronRight, lucideChevronLeft, lucideChevronUp, lucideChevronDown } from '@ng-icons/lucide';
|
|
2
|
+
import { createIconRegistry } from '@ui-organized/core';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Lucide name maps.
|
|
6
|
+
*
|
|
7
|
+
* Each of the components' own glyphs (`SystemGlyph` in @ui-organized/core) to the SVG markup `@ng-icons/lucide`
|
|
8
|
+
* publishes for it. Written by hand, as React's are: `@ng-icons` derives its
|
|
9
|
+
* export names from the upstream file names, which is close to but not the same
|
|
10
|
+
* as the component names the React packages use — `Grid2X2`, `ArrowUpAZ` and
|
|
11
|
+
* `Trash2` are exactly where a mechanical transform goes wrong.
|
|
12
|
+
*
|
|
13
|
+
* Named imports, so only the icons listed here reach a bundle; the pack itself
|
|
14
|
+
* is a catalogue of thousands.
|
|
15
|
+
*/
|
|
16
|
+
const lucideIconSet = {
|
|
17
|
+
"chevron-down": lucideChevronDown,
|
|
18
|
+
"chevron-up": lucideChevronUp,
|
|
19
|
+
"chevron-left": lucideChevronLeft,
|
|
20
|
+
"chevron-right": lucideChevronRight,
|
|
21
|
+
"close": lucideX,
|
|
22
|
+
"check": lucideCheck,
|
|
23
|
+
"plus": lucidePlus,
|
|
24
|
+
"minus": lucideMinus,
|
|
25
|
+
"copy": lucideCopy,
|
|
26
|
+
"edit": lucidePencil,
|
|
27
|
+
"trash": lucideTrash2,
|
|
28
|
+
"download": lucideDownload,
|
|
29
|
+
"upload": lucideUpload,
|
|
30
|
+
"refresh": lucideRefreshCw,
|
|
31
|
+
"undo": lucideUndo2,
|
|
32
|
+
"sort-asc": lucideArrowUpAZ,
|
|
33
|
+
"sort-desc": lucideArrowDownAZ,
|
|
34
|
+
"filter": lucideFilter,
|
|
35
|
+
"sort": lucideListFilter,
|
|
36
|
+
"check-circle": lucideCheckCircle,
|
|
37
|
+
"alert-circle": lucideAlertCircle,
|
|
38
|
+
"alert-triangle": lucideAlertTriangle,
|
|
39
|
+
"info": lucideInfo,
|
|
40
|
+
"search": lucideSearch,
|
|
41
|
+
"eye": lucideEye,
|
|
42
|
+
"eye-off": lucideEyeOff,
|
|
43
|
+
"star": lucideStar,
|
|
44
|
+
"tag": lucideTag,
|
|
45
|
+
"menu": lucideMenu,
|
|
46
|
+
"grid": lucideGrid2X2,
|
|
47
|
+
"list": lucideList,
|
|
48
|
+
"file": lucideFile,
|
|
49
|
+
"folder": lucideFolder,
|
|
50
|
+
"play": lucidePlay,
|
|
51
|
+
"pause": lucidePause,
|
|
52
|
+
"user": lucideUser,
|
|
53
|
+
"settings": lucideSettings,
|
|
54
|
+
"home": lucideHome,
|
|
55
|
+
"calendar": lucideCalendar,
|
|
56
|
+
"pipette": lucidePipette,
|
|
57
|
+
"rotate-ccw": lucideRotateCcw,
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const { registerIconSet, getIconSet, registeredLibraries, registerIcons: registerIcons$1, getIcon, registeredNames } = createIconRegistry(Symbol.for("@ui-organized/angular.iconRegistry"));
|
|
61
|
+
/**
|
|
62
|
+
* The prop mapping every `@ng-icons`-sourced set uses.
|
|
63
|
+
*
|
|
64
|
+
* The three React adapters each need their own, because lucide takes
|
|
65
|
+
* `strokeWidth`, tabler takes `stroke` and heroicons takes `width`/`height`.
|
|
66
|
+
* Here there is one, because every `@ng-icons` pack ships its icons carrying
|
|
67
|
+
* `style="stroke-width:var(--ng-icon__stroke-width, 2)"` — so the weight is set
|
|
68
|
+
* by one custom property regardless of which library drew the glyph.
|
|
69
|
+
*
|
|
70
|
+
* The property name belongs to another project and stays as written: it is that
|
|
71
|
+
* project's published contract, it never reaches a consumer's code, and
|
|
72
|
+
* rewriting it per icon at registration would buy nothing.
|
|
73
|
+
*
|
|
74
|
+
* Exported because a consumer assembling their own set out of `@ng-icons`
|
|
75
|
+
* markup needs exactly this.
|
|
76
|
+
*/
|
|
77
|
+
function ngIconsSvgProps(size, stroke) {
|
|
78
|
+
return {
|
|
79
|
+
width: size,
|
|
80
|
+
height: size,
|
|
81
|
+
// Omitted rather than passed as undefined — a solid icon has no stroke, and
|
|
82
|
+
// the property must not be written at all. See `applySvgProps`.
|
|
83
|
+
...(stroke !== undefined ? { "--ng-icon__stroke-width": stroke } : {}),
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* The `@ui-organized/angular/icons/lucide` entry point.
|
|
89
|
+
*
|
|
90
|
+
* Importing it registers the set; that side effect is the whole purpose, and the
|
|
91
|
+
* reason the package's `sideEffects` field has to keep this file. React shipped
|
|
92
|
+
* a version where it did not, and icons rendered in dev and vanished in
|
|
93
|
+
* `vite build`.
|
|
94
|
+
*
|
|
95
|
+
* import "@ui-organized/angular/icons/lucide";
|
|
96
|
+
*
|
|
97
|
+
* This file and everything it reaches must stay inside `src/lib/icons/`:
|
|
98
|
+
* ng-packagr sets a secondary entry point's `rootDir` to the directory of its
|
|
99
|
+
* entry file, and anything above that is a TS6059.
|
|
100
|
+
*/
|
|
101
|
+
const lucideIcons = {
|
|
102
|
+
library: "lucide",
|
|
103
|
+
outline: lucideIconSet,
|
|
104
|
+
// Lucide ships an outline cut only; `style: "solid"` falls back to it.
|
|
105
|
+
svgProps: ngIconsSvgProps,
|
|
106
|
+
};
|
|
107
|
+
registerIconSet(lucideIcons);
|
|
108
|
+
/**
|
|
109
|
+
* Make Lucide icons available to `<Icon name>` under their own Lucide names.
|
|
110
|
+
*
|
|
111
|
+
* Pass them as imported and the names follow from the exports
|
|
112
|
+
* (`lucideCamera` → `"camera"`), or key them by native name yourself where
|
|
113
|
+
* the export can't be read back unambiguously (`{ "arrow-down-0-1": lucideArrowDown01 }`).
|
|
114
|
+
* Only what you register reaches your bundle.
|
|
115
|
+
*
|
|
116
|
+
* ```ts
|
|
117
|
+
* import { lucideCamera, lucideRocket } from "@ng-icons/lucide";
|
|
118
|
+
* registerIcons({ lucideCamera, lucideRocket });
|
|
119
|
+
* ```
|
|
120
|
+
*/
|
|
121
|
+
function registerIcons(icons, options) {
|
|
122
|
+
registerIcons$1("lucide", icons, options);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* Generated bundle index. Do not edit.
|
|
127
|
+
*/
|
|
128
|
+
|
|
129
|
+
export { lucideIcons, registerIcons };
|
|
130
|
+
//# sourceMappingURL=ui-organized-angular-icons-lucide.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ui-organized-angular-icons-lucide.mjs","sources":["../../src/lib/icons/lucide.ts","../../src/lib/icons/registry.ts","../../src/lib/icons/entry-lucide.ts","../../src/lib/icons/ui-organized-angular-icons-lucide.ts"],"sourcesContent":["/**\n * Lucide name maps.\n *\n * Each of the components' own glyphs (`SystemGlyph` in @ui-organized/core) to the SVG markup `@ng-icons/lucide`\n * publishes for it. Written by hand, as React's are: `@ng-icons` derives its\n * export names from the upstream file names, which is close to but not the same\n * as the component names the React packages use — `Grid2X2`, `ArrowUpAZ` and\n * `Trash2` are exactly where a mechanical transform goes wrong.\n *\n * Named imports, so only the icons listed here reach a bundle; the pack itself\n * is a catalogue of thousands.\n */\nimport {\n lucideAlertCircle,\n lucideAlertTriangle,\n lucideArrowDownAZ,\n lucideArrowUpAZ,\n lucideCalendar,\n lucideCheck,\n lucideCheckCircle,\n lucideChevronDown,\n lucideChevronLeft,\n lucideChevronRight,\n lucideChevronUp,\n lucideCopy,\n lucideDownload,\n lucideEye,\n lucideEyeOff,\n lucideFile,\n lucideFilter,\n lucideFolder,\n lucideGrid2X2,\n lucideHome,\n lucideInfo,\n lucideList,\n lucideMenu,\n lucideMinus,\n lucidePause,\n lucidePencil,\n lucidePipette,\n lucidePlay,\n lucidePlus,\n lucideRefreshCw,\n lucideSearch,\n lucideSettings,\n lucideStar,\n lucideTag,\n lucideTrash2,\n lucideUndo2,\n lucideUpload,\n lucideUser,\n lucideX,\n lucideListFilter,\n lucideRotateCcw,\n} from \"@ng-icons/lucide\";\nimport type { SystemGlyph } from \"@ui-organized/core\";\n\nexport const lucideIconSet: Record<SystemGlyph, string> = {\n \"chevron-down\": lucideChevronDown,\n \"chevron-up\": lucideChevronUp,\n \"chevron-left\": lucideChevronLeft,\n \"chevron-right\": lucideChevronRight,\n \"close\": lucideX,\n \"check\": lucideCheck,\n \"plus\": lucidePlus,\n \"minus\": lucideMinus,\n \"copy\": lucideCopy,\n \"edit\": lucidePencil,\n \"trash\": lucideTrash2,\n \"download\": lucideDownload,\n \"upload\": lucideUpload,\n \"refresh\": lucideRefreshCw,\n \"undo\": lucideUndo2,\n \"sort-asc\": lucideArrowUpAZ,\n \"sort-desc\": lucideArrowDownAZ,\n \"filter\": lucideFilter,\n \"sort\": lucideListFilter,\n \"check-circle\": lucideCheckCircle,\n \"alert-circle\": lucideAlertCircle,\n \"alert-triangle\": lucideAlertTriangle,\n \"info\": lucideInfo,\n \"search\": lucideSearch,\n \"eye\": lucideEye,\n \"eye-off\": lucideEyeOff,\n \"star\": lucideStar,\n \"tag\": lucideTag,\n \"menu\": lucideMenu,\n \"grid\": lucideGrid2X2,\n \"list\": lucideList,\n \"file\": lucideFile,\n \"folder\": lucideFolder,\n \"play\": lucidePlay,\n \"pause\": lucidePause,\n \"user\": lucideUser,\n \"settings\": lucideSettings,\n \"home\": lucideHome,\n \"calendar\": lucideCalendar,\n \"pipette\": lucidePipette,\n \"rotate-ccw\": lucideRotateCcw,\n};\n","import {\n createIconRegistry,\n type IconNameMap as CoreIconNameMap,\n type IconSet as CoreIconSet,\n type SystemGlyphMap as CoreSystemGlyphMap,\n} from \"@ui-organized/core\";\n\nexport type { IconLibrary, RegisterIconsOptions } from \"@ui-organized/core\";\n\n/**\n * This package's icon-set registry: the shared mechanism from\n * `@ui-organized/core`, bound to **SVG markup** rather than to components.\n *\n * The registry itself — why it exists, why it is keyed on `globalThis`, and why\n * each framework gets its own — is documented in core. All that happens here is\n * fixing the stored type, and choosing a key distinct from the other three\n * packages' so none of them can read another's icons.\n *\n * ── Why an Angular icon is a string ─────────────────────────────────────────\n *\n * The other three libraries store components, and Angular could too — but\n * Angular instantiates a component onto an element of its own, so an icon\n * rendered that way comes out as\n * `<span class=\"icon\"><ng-icon><svg/></ng-icon></span>` where the others render\n * `<span class=\"icon\"><svg/></span>`. `.icon` is `display: inline-flex` with\n * centring, so the intermediate element becomes the flex item and the SVG stops\n * being what is laid out. One element deeper is a different DOM, and this whole\n * package exists to produce the same one.\n *\n * Core's registry is generic over the stored type precisely so a framework can\n * answer this differently. Storing markup lets `Icon` create the `<svg>` itself\n * and put it directly inside the span.\n *\n * It also turns out to be the *better* contract for stroke. Every\n * `@ng-icons/*` pack ships its icons with\n * `style=\"stroke-width:var(--ng-icon__stroke-width, 2)\"`, so a single custom\n * property drives the weight for lucide, tabler and heroicons alike — where the\n * React adapters need three different prop shapes because lucide takes\n * `strokeWidth`, tabler takes `stroke` and heroicons takes `width`/`height`.\n */\nexport type IconMarkup = string;\nexport type IconNameMap = CoreIconNameMap<IconMarkup>;\nexport type IconSet = CoreIconSet<IconMarkup>;\n\n/** The components' own glyphs, for one library in one style. */\nexport type SystemGlyphMap = CoreSystemGlyphMap<IconMarkup>;\n\nconst { registerIconSet, getIconSet, registeredLibraries, registerIcons, getIcon, registeredNames } = createIconRegistry<IconMarkup>(\n Symbol.for(\"@ui-organized/angular.iconRegistry\"),\n);\n\nexport {\n registerIconSet,\n getIconSet,\n registeredLibraries,\n registerIcons,\n getIcon,\n registeredNames,\n};\n\n/**\n * The prop mapping every `@ng-icons`-sourced set uses.\n *\n * The three React adapters each need their own, because lucide takes\n * `strokeWidth`, tabler takes `stroke` and heroicons takes `width`/`height`.\n * Here there is one, because every `@ng-icons` pack ships its icons carrying\n * `style=\"stroke-width:var(--ng-icon__stroke-width, 2)\"` — so the weight is set\n * by one custom property regardless of which library drew the glyph.\n *\n * The property name belongs to another project and stays as written: it is that\n * project's published contract, it never reaches a consumer's code, and\n * rewriting it per icon at registration would buy nothing.\n *\n * Exported because a consumer assembling their own set out of `@ng-icons`\n * markup needs exactly this.\n */\nexport function ngIconsSvgProps(\n size: number,\n stroke: number | undefined,\n): Record<string, unknown> {\n return {\n width: size,\n height: size,\n // Omitted rather than passed as undefined — a solid icon has no stroke, and\n // the property must not be written at all. See `applySvgProps`.\n ...(stroke !== undefined ? { \"--ng-icon__stroke-width\": stroke } : {}),\n };\n}\n","/**\n * The `@ui-organized/angular/icons/lucide` entry point.\n *\n * Importing it registers the set; that side effect is the whole purpose, and the\n * reason the package's `sideEffects` field has to keep this file. React shipped\n * a version where it did not, and icons rendered in dev and vanished in\n * `vite build`.\n *\n * import \"@ui-organized/angular/icons/lucide\";\n *\n * This file and everything it reaches must stay inside `src/lib/icons/`:\n * ng-packagr sets a secondary entry point's `rootDir` to the directory of its\n * entry file, and anything above that is a TS6059.\n */\nimport { lucideIconSet } from \"./lucide.js\";\nimport {\n ngIconsSvgProps,\n registerIconSet,\n type IconSet,\n registerIcons as registerNamedIcons,\n type RegisterIconsOptions,\n type IconMarkup,\n} from \"./registry.js\";\n\nexport const lucideIcons: IconSet = {\n library: \"lucide\",\n outline: lucideIconSet,\n // Lucide ships an outline cut only; `style: \"solid\"` falls back to it.\n svgProps: ngIconsSvgProps,\n};\n\nregisterIconSet(lucideIcons);\n\n/**\n * Make Lucide icons available to `<Icon name>` under their own Lucide names.\n *\n * Pass them as imported and the names follow from the exports\n * (`lucideCamera` → `\"camera\"`), or key them by native name yourself where\n * the export can't be read back unambiguously (`{ \"arrow-down-0-1\": lucideArrowDown01 }`).\n * Only what you register reaches your bundle.\n *\n * ```ts\n * import { lucideCamera, lucideRocket } from \"@ng-icons/lucide\";\n * registerIcons({ lucideCamera, lucideRocket });\n * ```\n */\nexport function registerIcons(\n icons: Record<string, IconMarkup>,\n options?: RegisterIconsOptions,\n): void {\n registerNamedIcons(\"lucide\", icons, options);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './entry-lucide';\n"],"names":["registerIcons","registerNamedIcons"],"mappings":";;;AAAA;;;;;;;;;;;AAWG;AA8CI,MAAM,aAAa,GAAgC;AACxD,IAAA,cAAc,EAAI,iBAAiB;AACnC,IAAA,YAAY,EAAM,eAAe;AACjC,IAAA,cAAc,EAAI,iBAAiB;AACnC,IAAA,eAAe,EAAG,kBAAkB;AACpC,IAAA,OAAO,EAAW,OAAO;AACzB,IAAA,OAAO,EAAW,WAAW;AAC7B,IAAA,MAAM,EAAY,UAAU;AAC5B,IAAA,OAAO,EAAW,WAAW;AAC7B,IAAA,MAAM,EAAY,UAAU;AAC5B,IAAA,MAAM,EAAY,YAAY;AAC9B,IAAA,OAAO,EAAW,YAAY;AAC9B,IAAA,UAAU,EAAQ,cAAc;AAChC,IAAA,QAAQ,EAAU,YAAY;AAC9B,IAAA,SAAS,EAAS,eAAe;AACjC,IAAA,MAAM,EAAY,WAAW;AAC7B,IAAA,UAAU,EAAQ,eAAe;AACjC,IAAA,WAAW,EAAO,iBAAiB;AACnC,IAAA,QAAQ,EAAU,YAAY;AAC9B,IAAA,MAAM,EAAY,gBAAgB;AAClC,IAAA,cAAc,EAAI,iBAAiB;AACnC,IAAA,cAAc,EAAI,iBAAiB;AACnC,IAAA,gBAAgB,EAAE,mBAAmB;AACrC,IAAA,MAAM,EAAY,UAAU;AAC5B,IAAA,QAAQ,EAAU,YAAY;AAC9B,IAAA,KAAK,EAAa,SAAS;AAC3B,IAAA,SAAS,EAAS,YAAY;AAC9B,IAAA,MAAM,EAAY,UAAU;AAC5B,IAAA,KAAK,EAAa,SAAS;AAC3B,IAAA,MAAM,EAAY,UAAU;AAC5B,IAAA,MAAM,EAAY,aAAa;AAC/B,IAAA,MAAM,EAAY,UAAU;AAC5B,IAAA,MAAM,EAAY,UAAU;AAC5B,IAAA,QAAQ,EAAU,YAAY;AAC9B,IAAA,MAAM,EAAY,UAAU;AAC5B,IAAA,OAAO,EAAW,WAAW;AAC7B,IAAA,MAAM,EAAY,UAAU;AAC5B,IAAA,UAAU,EAAQ,cAAc;AAChC,IAAA,MAAM,EAAY,UAAU;AAC5B,IAAA,UAAU,EAAQ,cAAc;AAChC,IAAA,SAAS,EAAS,aAAa;AAC/B,IAAA,YAAY,EAAM,eAAe;CAClC;;ACpDD,MAAM,EAAE,eAAe,EAAE,UAAU,EAAE,mBAAmB,iBAAEA,eAAa,EAAE,OAAO,EAAE,eAAe,EAAE,GAAG,kBAAkB,CACtH,MAAM,CAAC,GAAG,CAAC,oCAAoC,CAAC,CACjD;AAWD;;;;;;;;;;;;;;;AAeG;AACG,SAAU,eAAe,CAC7B,IAAY,EACZ,MAA0B,EAAA;IAE1B,OAAO;AACL,QAAA,KAAK,EAAE,IAAI;AACX,QAAA,MAAM,EAAE,IAAI;;;AAGZ,QAAA,IAAI,MAAM,KAAK,SAAS,GAAG,EAAE,yBAAyB,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;KACvE;AACH;;ACvFA;;;;;;;;;;;;;AAaG;AAWI,MAAM,WAAW,GAAY;AAClC,IAAA,OAAO,EAAE,QAAQ;AACjB,IAAA,OAAO,EAAE,aAAa;;AAEtB,IAAA,QAAQ,EAAE,eAAe;;AAG3B,eAAe,CAAC,WAAW,CAAC;AAE5B;;;;;;;;;;;;AAYG;AACG,SAAU,aAAa,CAC3B,KAAiC,EACjC,OAA8B,EAAA;AAE9B,IAAAC,eAAkB,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC;AAC9C;;ACnDA;;AAEG;;;;"}
|