@brightspot/ui 1.1.0 → 1.2.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 +3 -90
- package/dist/LucideDynamicLoader.d.ts +1 -0
- package/dist/LucideDynamicLoader.d.ts.map +1 -1
- package/dist/LucideDynamicLoader.js +2 -0
- package/dist/LucideDynamicLoader.js.map +1 -1
- package/dist/LucideDynamicLoader.ts +3 -0
- package/dist/components/avatar/Avatar.d.ts +1 -1
- package/dist/components/avatar/Avatar.js +2 -2
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/avatar/AvatarGroup.d.ts +1 -1
- package/dist/components/avatar/AvatarGroup.js +2 -2
- package/dist/components/avatar/AvatarGroup.js.map +1 -1
- package/dist/components/badge/Badge.d.ts +1 -1
- package/dist/components/badge/Badge.js +2 -2
- package/dist/components/badge/Badge.js.map +1 -1
- package/dist/components/circular-progress/CircularProgress.d.ts +57 -0
- package/dist/components/circular-progress/CircularProgress.d.ts.map +1 -0
- package/dist/components/circular-progress/CircularProgress.js +173 -0
- package/dist/components/circular-progress/CircularProgress.js.map +1 -0
- package/dist/components/icon/Icon.d.ts +90 -0
- package/dist/components/icon/Icon.d.ts.map +1 -0
- package/dist/components/icon/Icon.js +172 -0
- package/dist/components/icon/Icon.js.map +1 -0
- package/dist/components/linear-progress/LinearProgress.d.ts +40 -0
- package/dist/components/linear-progress/LinearProgress.d.ts.map +1 -0
- package/dist/components/linear-progress/LinearProgress.js +95 -0
- package/dist/components/linear-progress/LinearProgress.js.map +1 -0
- package/dist/custom-elements.json +341 -6
- package/dist/global.d.ts +4 -0
- package/dist/storybook/assets/{Avatar.stories-BONZm4v8.js → Avatar.stories-BlxrclP0.js} +1 -1
- package/dist/storybook/assets/{AvatarGroup.stories-DDKujPh2.js → AvatarGroup.stories-E3VUvBae.js} +1 -1
- package/dist/storybook/assets/{Badge.stories-C8Ahfpp6.js → Badge.stories-f4YvPz0W.js} +5 -18
- package/dist/storybook/assets/Button.stories-N66xrq4q.js +63 -0
- package/dist/storybook/assets/CircularProgress.stories-zWyELtfc.js +451 -0
- package/dist/storybook/assets/{Color-64QXVMR3-CqLd5_0n.js → Color-64QXVMR3-B3Y5c9dl.js} +1 -1
- package/dist/storybook/assets/{Colors.stories-BajWDIwn.js → Colors.stories-nEoNeHhf.js} +1 -1
- package/dist/storybook/assets/{Events.stories-B32yjxgf.js → Events.stories-BP3ensxX.js} +1 -1
- package/dist/storybook/assets/Heading.stories-DGqWaBpi.js +3 -0
- package/dist/storybook/assets/Icon.stories-BWWjh4NZ.js +245 -0
- package/dist/storybook/assets/LinearProgress.stories-DMVolkoE.js +397 -0
- package/dist/storybook/assets/ScrollShadow.stories-BmwSRNje.js +17 -0
- package/dist/storybook/assets/Throttle.stories-DBj-9rhV.js +303 -0
- package/dist/storybook/assets/{WithTooltip-SK46ZJ2J-BO-IGPcG.js → WithTooltip-SK46ZJ2J-DW4NXFWt.js} +5 -5
- package/dist/storybook/assets/formatter-OMEEQ6HG-BBn014aZ.js +1 -0
- package/dist/storybook/assets/iframe-CxsKJSj-.css +1 -0
- package/dist/storybook/assets/{iframe-BIFmrRK7.js → iframe-Z4F0Cgki.js} +95 -135
- package/dist/storybook/assets/{index-B4dkQq9N.js → index-BUj5S-B7.js} +1 -1
- package/dist/storybook/assets/{syntaxhighlighter-CAVLW7PM-kyZrfiLk.js → syntaxhighlighter-CAVLW7PM-CsQveU1N.js} +1 -1
- package/dist/storybook/iframe.html +2 -2
- package/dist/storybook/index.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/dist/tailwind-plugin-button.js +11 -9
- package/dist/tailwind-plugin-button.js.map +1 -1
- package/dist/tailwind-plugin-button.ts +11 -10
- package/dist/tailwind-plugin-contrast.d.ts +2 -0
- package/dist/tailwind-plugin-contrast.d.ts.map +1 -0
- package/dist/tailwind-plugin-contrast.js +17 -0
- package/dist/tailwind-plugin-contrast.js.map +1 -0
- package/dist/tailwind-plugin-contrast.ts +18 -0
- package/dist/tailwind-plugin-icon.js +17 -10
- package/dist/tailwind-plugin-icon.js.map +1 -1
- package/dist/tailwind-plugin-icon.ts +17 -10
- package/dist/tailwind-plugin-ring-contrast.d.ts +2 -0
- package/dist/tailwind-plugin-ring-contrast.d.ts.map +1 -0
- package/dist/tailwind-plugin-ring-contrast.js +76 -0
- package/dist/tailwind-plugin-ring-contrast.js.map +1 -0
- package/dist/tailwind-plugin-ring-contrast.ts +90 -0
- package/dist/tailwind.config.d.ts +21 -0
- package/dist/tailwind.config.d.ts.map +1 -1
- package/dist/tailwind.config.js +25 -0
- package/dist/tailwind.config.js.map +1 -1
- package/dist/tailwind.config.ts +25 -0
- package/dist/{utils → util}/EventEmitterMixin.d.ts +4 -1
- package/dist/util/EventEmitterMixin.d.ts.map +1 -0
- package/dist/util/EventEmitterMixin.js.map +1 -0
- package/dist/util/ProgressMixin.d.ts +52 -0
- package/dist/util/ProgressMixin.d.ts.map +1 -0
- package/dist/util/ProgressMixin.js +190 -0
- package/dist/util/ProgressMixin.js.map +1 -0
- package/dist/util/ReadyMixin.d.ts.map +1 -0
- package/dist/util/ReadyMixin.js.map +1 -0
- package/dist/util/aria.d.ts +3 -0
- package/dist/util/aria.d.ts.map +1 -0
- package/dist/util/aria.js +44 -0
- package/dist/util/aria.js.map +1 -0
- package/dist/util/svg.d.ts +9 -0
- package/dist/util/svg.d.ts.map +1 -1
- package/dist/util/svg.js +22 -0
- package/dist/util/svg.js.map +1 -1
- package/dist/util/throttle.d.ts +4 -0
- package/dist/util/throttle.d.ts.map +1 -0
- package/dist/util/throttle.js +30 -0
- package/dist/util/throttle.js.map +1 -0
- package/package.json +2 -2
- package/dist/storybook/assets/Button.stories-Cwdvbnu1.js +0 -63
- package/dist/storybook/assets/Heading.stories-C0ji1wRG.js +0 -3
- package/dist/storybook/assets/Icon.stories-DeEHMd7f.js +0 -28543
- package/dist/storybook/assets/Loader.stories-NxZ0SGA0.js +0 -3
- package/dist/storybook/assets/ScrollShadow.stories-1W8nsrPe.js +0 -17
- package/dist/storybook/assets/formatter-OMEEQ6HG-wqmAyL2n.js +0 -1
- package/dist/storybook/assets/iframe-BEH5EoNR.css +0 -1
- package/dist/utils/EventEmitterMixin.d.ts.map +0 -1
- package/dist/utils/EventEmitterMixin.js.map +0 -1
- package/dist/utils/ReadyMixin.d.ts.map +0 -1
- package/dist/utils/ReadyMixin.js.map +0 -1
- /package/dist/{utils → util}/EventEmitterMixin.js +0 -0
- /package/dist/{utils → util}/ReadyMixin.d.ts +0 -0
- /package/dist/{utils → util}/ReadyMixin.js +0 -0
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<div>
|
|
6
6
|
<h2 align="center">brightspot-ui</h2>
|
|
7
7
|
<p align="center">
|
|
8
|
-
A UI library for
|
|
8
|
+
A UI library optimized for rapid, standards-based Brightspot CMS component creation.
|
|
9
9
|
<br/>
|
|
10
10
|
</p>
|
|
11
11
|
</div>
|
|
@@ -85,58 +85,20 @@ Your codebase needs to be compatible with
|
|
|
85
85
|
|
|
86
86
|
## Using Plugins
|
|
87
87
|
|
|
88
|
-
Brightspot UI comes with a variety of TailwindCSS plugins to make styling simpler and declarative.
|
|
88
|
+
Brightspot UI comes with a variety of TailwindCSS plugins to make styling simpler and declarative. Visit the Storybook to see the available plugins.
|
|
89
89
|
|
|
90
90
|
To use our plugins, include them in your TailwindCSS config as usual. Plugin files are provided in both Typescript and Javascript variants and are available under the `dist` path in the brightspot-ui module.
|
|
91
91
|
|
|
92
|
-
An example of including
|
|
92
|
+
An example of including a plugin:
|
|
93
93
|
|
|
94
94
|
```ts
|
|
95
95
|
// your tailwind.config.ts
|
|
96
96
|
...
|
|
97
97
|
plugins: [
|
|
98
98
|
require('@brightspot/ui/dist/tailwind-plugin-theme.ts'),
|
|
99
|
-
require('@brightspot/ui/dist/tailwind-plugin-badge.ts'),
|
|
100
|
-
require('@brightspot/ui/dist/tailwind-plugin-button.ts'),
|
|
101
|
-
require('@brightspot/ui/dist/tailwind-plugin-heading.ts'),
|
|
102
|
-
require('@brightspot/ui/dist/tailwind-plugin-icon.ts'),
|
|
103
|
-
require('@brightspot/ui/dist/tailwind-plugin-loader.ts'),
|
|
104
|
-
require('@brightspot/ui/dist/tailwind-plugin-scroll-shadow.ts')
|
|
105
99
|
...
|
|
106
100
|
```
|
|
107
101
|
|
|
108
|
-
### Available plugins:
|
|
109
|
-
|
|
110
|
-
1. Badge
|
|
111
|
-
```ts
|
|
112
|
-
require('@brightspot/ui/dist/tailwind-plugin-badge.ts')
|
|
113
|
-
```
|
|
114
|
-
2. Button
|
|
115
|
-
```ts
|
|
116
|
-
require('@brightspot/ui/dist/tailwind-plugin-button.ts')
|
|
117
|
-
```
|
|
118
|
-
3. Heading
|
|
119
|
-
```ts
|
|
120
|
-
require('@brightspot/ui/dist/tailwind-plugin-heading.ts')
|
|
121
|
-
```
|
|
122
|
-
4. Icon
|
|
123
|
-
```ts
|
|
124
|
-
require('@brightspot/ui/dist/tailwind-plugin-icon.ts')
|
|
125
|
-
```
|
|
126
|
-
5. Loader
|
|
127
|
-
```ts
|
|
128
|
-
require('@brightspot/ui/dist/tailwind-plugin-loader.ts')
|
|
129
|
-
```
|
|
130
|
-
6. ScrollShadow
|
|
131
|
-
```ts
|
|
132
|
-
require('@brightspot/ui/dist/tailwind-plugin-scroll-shadow.ts')
|
|
133
|
-
```
|
|
134
|
-
7. Theme
|
|
135
|
-
`ts
|
|
136
|
-
require('@brightspot/ui/dist/tailwind-plugin-theme.ts')
|
|
137
|
-
`
|
|
138
|
-
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
|
139
|
-
|
|
140
102
|
## Examples
|
|
141
103
|
|
|
142
104
|
We use [Storybook](https://storybook.js.org/) for interactive previewing of our ui components. Launch that in the browser by running:
|
|
@@ -204,55 +166,6 @@ When you're done with local development:
|
|
|
204
166
|
|
|
205
167
|
This restores your project to use the published version from npm.
|
|
206
168
|
|
|
207
|
-
### Commit Guidelines
|
|
208
|
-
|
|
209
|
-
This project uses [Conventional Commits](https://www.conventionalcommits.org/) to ensure consistent commit messages. All commits are automatically validated using [commitlint](https://commitlint.js.org/) via [husky](https://typicode.github.io/husky/) git hooks. When you attempt to commit, the commit message will be checked against conventional commit standards, and the commit will be rejected if it doesn't conform.
|
|
210
|
-
|
|
211
|
-
#### Using the `/git:commit` Command
|
|
212
|
-
|
|
213
|
-
For contributors using Claude Code, use the custom `/git:commit` slash command to create properly formatted commits:
|
|
214
|
-
|
|
215
|
-
```sh
|
|
216
|
-
/git:commit
|
|
217
|
-
```
|
|
218
|
-
|
|
219
|
-
This command automatically:
|
|
220
|
-
|
|
221
|
-
- Analyzes your staged changes
|
|
222
|
-
- Generates a conventional commit message
|
|
223
|
-
- Creates the commit with proper formatting
|
|
224
|
-
|
|
225
|
-
#### Manual Commits
|
|
226
|
-
|
|
227
|
-
If committing manually, follow this format:
|
|
228
|
-
|
|
229
|
-
```
|
|
230
|
-
type(scope): subject
|
|
231
|
-
|
|
232
|
-
body (optional)
|
|
233
|
-
|
|
234
|
-
footer (optional)
|
|
235
|
-
```
|
|
236
|
-
|
|
237
|
-
**Common types:**
|
|
238
|
-
|
|
239
|
-
- `feat`: New feature
|
|
240
|
-
- `fix`: Bug fix
|
|
241
|
-
- `docs`: Documentation changes
|
|
242
|
-
- `style`: Code style (formatting, whitespace)
|
|
243
|
-
- `refactor`: Code restructuring
|
|
244
|
-
- `test`: Adding or updating tests
|
|
245
|
-
- `chore`: Maintenance tasks (deps, build tools)
|
|
246
|
-
|
|
247
|
-
**Examples:**
|
|
248
|
-
|
|
249
|
-
```
|
|
250
|
-
feat(button): add icon support to primary button
|
|
251
|
-
fix(theme): resolve color contrast in dark mode
|
|
252
|
-
docs: update installation instructions
|
|
253
|
-
chore(deps): upgrade tailwindcss to 3.4.0
|
|
254
|
-
```
|
|
255
|
-
|
|
256
169
|
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
|
257
170
|
|
|
258
171
|
## Frequently Asked Questions
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LucideDynamicLoader.d.ts","sourceRoot":"","sources":["../src/LucideDynamicLoader.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"LucideDynamicLoader.d.ts","sourceRoot":"","sources":["../src/LucideDynamicLoader.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,QAAwB,CAAA;AAEnD,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM;;;cAiBvC"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import * as LucideIcons from 'lucide-static';
|
|
2
2
|
import icons from 'lucide-static/font/info.json' with { type: 'json' };
|
|
3
|
+
import lucidePackage from 'lucide-static/package.json' with { type: 'json' };
|
|
3
4
|
import { kebabToPascal } from './util/string.js';
|
|
4
5
|
import { addNameSpaceXML, encodeSVG } from './util/svg.js';
|
|
6
|
+
export const LUCIDE_VERSION = lucidePackage.version;
|
|
5
7
|
export function getIcon(iconName) {
|
|
6
8
|
try {
|
|
7
9
|
const kebabName = iconName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LucideDynamicLoader.js","sourceRoot":"","sources":["../src/LucideDynamicLoader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,MAAM,8BAA8B,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAE1D,MAAM,UAAU,OAAO,CAAC,QAAgB;IACtC,IAAI,CAAC;QACH,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAA;QAC5E,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;QAE3C,IAAI,WAAW,CAAC,UAAsC,CAAC,EAAE,CAAC;YACxD,MAAM,GAAG,GAAG,WAAW,CAAC,UAAsC,CAAW,CAAA;YACzE,MAAM,UAAU,GAAG,SAAS,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;YAElD,OAAO;gBACL,MAAM,EAAE,KAAK,CAAC,SAA+B,CAAC,EAAE,WAAW,IAAI,EAAE;gBACjE,OAAO,EAAE,UAAU;aACpB,CAAA;QACH,CAAC;IACH,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,OAAO,CAAC,KAAK,CAAC,wCAAwC,EAAE,CAAC,CAAC,CAAA;IAC5D,CAAC;AACH,CAAC"}
|
|
1
|
+
{"version":3,"file":"LucideDynamicLoader.js","sourceRoot":"","sources":["../src/LucideDynamicLoader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,MAAM,8BAA8B,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AACtE,OAAO,aAAa,MAAM,4BAA4B,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAE1D,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,OAAO,CAAA;AAEnD,MAAM,UAAU,OAAO,CAAC,QAAgB;IACtC,IAAI,CAAC;QACH,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAA;QAC5E,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;QAE3C,IAAI,WAAW,CAAC,UAAsC,CAAC,EAAE,CAAC;YACxD,MAAM,GAAG,GAAG,WAAW,CAAC,UAAsC,CAAW,CAAA;YACzE,MAAM,UAAU,GAAG,SAAS,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;YAElD,OAAO;gBACL,MAAM,EAAE,KAAK,CAAC,SAA+B,CAAC,EAAE,WAAW,IAAI,EAAE;gBACjE,OAAO,EAAE,UAAU;aACpB,CAAA;QACH,CAAC;IACH,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,OAAO,CAAC,KAAK,CAAC,wCAAwC,EAAE,CAAC,CAAC,CAAA;IAC5D,CAAC;AACH,CAAC"}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import * as LucideIcons from 'lucide-static'
|
|
2
2
|
import icons from 'lucide-static/font/info.json' with { type: 'json' }
|
|
3
|
+
import lucidePackage from 'lucide-static/package.json' with { type: 'json' }
|
|
3
4
|
import { kebabToPascal } from './util/string.js'
|
|
4
5
|
import { addNameSpaceXML, encodeSVG } from './util/svg.js'
|
|
5
6
|
|
|
7
|
+
export const LUCIDE_VERSION = lucidePackage.version
|
|
8
|
+
|
|
6
9
|
export function getIcon(iconName: string) {
|
|
7
10
|
try {
|
|
8
11
|
const kebabName = iconName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
|
|
@@ -5,7 +5,7 @@ export interface AvatarProps {
|
|
|
5
5
|
fallback?: string;
|
|
6
6
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
|
7
7
|
}
|
|
8
|
-
declare const Avatar_base: (new (...args: any[]) => import("../../
|
|
8
|
+
declare const Avatar_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
|
|
9
9
|
/**
|
|
10
10
|
* An avatar component for displaying user profile images with fallback support.
|
|
11
11
|
*
|
|
@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { LitElement, html } from 'lit';
|
|
8
8
|
import { property, state } from 'lit/decorators.js';
|
|
9
|
-
import { EventEmitterMixin } from '../../
|
|
10
|
-
import { ReadyMixin } from '../../
|
|
9
|
+
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
|
|
10
|
+
import { ReadyMixin } from '../../util/ReadyMixin.js';
|
|
11
11
|
/**
|
|
12
12
|
* An avatar component for displaying user profile images with fallback support.
|
|
13
13
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ export interface AvatarGroupProps {
|
|
|
3
3
|
max?: number;
|
|
4
4
|
size?: 'xs' | 'sm' | 'md';
|
|
5
5
|
}
|
|
6
|
-
declare const AvatarGroup_base: (new (...args: any[]) => import("../../
|
|
6
|
+
declare const AvatarGroup_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
|
|
7
7
|
/**
|
|
8
8
|
* A container component for grouping multiple avatars with consistent styling.
|
|
9
9
|
*
|
|
@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { LitElement, html } from 'lit';
|
|
8
8
|
import { property } from 'lit/decorators.js';
|
|
9
|
-
import { EventEmitterMixin } from '../../
|
|
10
|
-
import { ReadyMixin } from '../../
|
|
9
|
+
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
|
|
10
|
+
import { ReadyMixin } from '../../util/ReadyMixin.js';
|
|
11
11
|
/**
|
|
12
12
|
* A container component for grouping multiple avatars with consistent styling.
|
|
13
13
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../src/components/avatar/AvatarGroup.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../src/components/avatar/AvatarGroup.ts"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ export interface BadgeProps {
|
|
|
4
4
|
dot?: boolean;
|
|
5
5
|
size?: 'sm' | 'md' | 'lg';
|
|
6
6
|
}
|
|
7
|
-
declare const Badge_base: (new (...args: any[]) => import("../../
|
|
7
|
+
declare const Badge_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
|
|
8
8
|
/**
|
|
9
9
|
* A badge component for highlighting important information.
|
|
10
10
|
*
|
|
@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { LitElement, html } from 'lit';
|
|
8
8
|
import { property } from 'lit/decorators.js';
|
|
9
|
-
import { EventEmitterMixin } from '../../
|
|
10
|
-
import { ReadyMixin } from '../../
|
|
9
|
+
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
|
|
10
|
+
import { ReadyMixin } from '../../util/ReadyMixin.js';
|
|
11
11
|
/**
|
|
12
12
|
* A badge component for highlighting important information.
|
|
13
13
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/badge/Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/badge/Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAQrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,iBAAiB,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IAA5E;;QACE;;;;;;;;WAQG;QAEH,YAAO,GAAyD,MAAM,CAAA;QAEtE;;;WAGG;QAEH,QAAG,GAAG,KAAK,CAAA;QAEX;;;;;;WAMG;QAEH,SAAI,GAAG,IAAI,CAAA;QAEX,gBAAgB;QACR,mBAAc,GAAa,EAAE,CAAA;IA0CvC,CAAC;IAxCC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,4CAA4C;QAC5C,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAA;QACvE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IAED,UAAU;QACR,2CAA2C;QAC3C,MAAM,QAAQ,GAAmD;YAC/D,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,SAAS;SACnB,CAAA;QAED,MAAM,OAAO,GAAG;YACd,GAAG,IAAI,CAAC,cAAc;YACtB,WAAW;YACX,aAAa,IAAI,CAAC,IAAI,EAAE;YACxB,aAAa,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACrC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;SAChC,CAAA;QAED,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACpD,CAAC;IAED,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,EAAE,CAAA;IACf,CAAC;CACF;AA9DC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAC2C;AAOtE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kCACjB;AAUX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAChB;AA+Cb,oEAAoE;AACpE,8DAA8D;AAC9D,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;IACrC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;AAC3C,CAAC"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
declare const CircularProgress_base: (new (...args: any[]) => import("../../util/ProgressMixin.js").ProgressMixinInterface) & (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
|
|
3
|
+
/**
|
|
4
|
+
* A circular progress indicator for showing loading states or progress.
|
|
5
|
+
*
|
|
6
|
+
* @element btu-circular-progress
|
|
7
|
+
*
|
|
8
|
+
* @fires {CustomEvent} btu-progress-ready - Fired after first render and initialization
|
|
9
|
+
* @fires {CustomEvent} btu-progress-complete - Fired when determinate progress reaches 100
|
|
10
|
+
*
|
|
11
|
+
* @cssprop --progress-color - Custom progress indicator color (overrides theme color)
|
|
12
|
+
* @cssprop --track-color - Track/background color (overrides default gray-100)
|
|
13
|
+
* @cssprop --progress-size - Custom size in pixels (overrides size preset)
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```html
|
|
17
|
+
* <!-- Indeterminate spinner (default) -->
|
|
18
|
+
* <btu-circular-progress color="primary" size="md"></btu-circular-progress>
|
|
19
|
+
*
|
|
20
|
+
* <!-- Determinate progress -->
|
|
21
|
+
* <btu-circular-progress indeterminate="false" progress="75" color="success"></btu-circular-progress>
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
export default class CircularProgress extends CircularProgress_base {
|
|
25
|
+
/**
|
|
26
|
+
* Whether the progress indicator is indeterminate (animated spinner).
|
|
27
|
+
* When false, shows determinate progress based on the progress value.
|
|
28
|
+
* @attr
|
|
29
|
+
*/
|
|
30
|
+
indeterminate: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Size variant.
|
|
33
|
+
* - 'sm': Small (16px) - default
|
|
34
|
+
* - 'md': Medium (32px)
|
|
35
|
+
* - 'lg': Large (48px)
|
|
36
|
+
* @attr
|
|
37
|
+
*/
|
|
38
|
+
size: 'sm' | 'md' | 'lg';
|
|
39
|
+
/** @internal */
|
|
40
|
+
private _initialClasses;
|
|
41
|
+
/** @internal */
|
|
42
|
+
private _styleObserver?;
|
|
43
|
+
connectedCallback(): void;
|
|
44
|
+
createRenderRoot(): this;
|
|
45
|
+
willUpdate(): void;
|
|
46
|
+
firstUpdated(changedProperties: Map<PropertyKey, unknown>): void;
|
|
47
|
+
disconnectedCallback(): void;
|
|
48
|
+
updated(changedProperties: Map<PropertyKey, unknown>): void;
|
|
49
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
50
|
+
}
|
|
51
|
+
declare global {
|
|
52
|
+
interface HTMLElementTagNameMap {
|
|
53
|
+
'btu-circular-progress': CircularProgress;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
export {};
|
|
57
|
+
//# sourceMappingURL=CircularProgress.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../../src/components/circular-progress/CircularProgress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAA;;AAMpD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,qBAAwD;IACpG;;;;OAIG;IAEH,aAAa,UAAO;IAEpB;;;;;;OAMG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAO;IAE/B,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAAe;IAEtC,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAC,CAAkB;IAEzC,iBAAiB,IAAI,IAAI;IAsBzB,gBAAgB;IAIhB,UAAU,IAAI,IAAI;IAMlB,YAAY,CAAC,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAShE,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAc3D,MAAM;CA+DP;AAOD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,gBAAgB,CAAA;KAC1C;CACF"}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, css, html, nothing } from 'lit';
|
|
8
|
+
import { property } from 'lit/decorators.js';
|
|
9
|
+
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
|
|
10
|
+
import { ProgressMixin } from '../../util/ProgressMixin.js';
|
|
11
|
+
import { ReadyMixin } from '../../util/ReadyMixin.js';
|
|
12
|
+
/**
|
|
13
|
+
* A circular progress indicator for showing loading states or progress.
|
|
14
|
+
*
|
|
15
|
+
* @element btu-circular-progress
|
|
16
|
+
*
|
|
17
|
+
* @fires {CustomEvent} btu-progress-ready - Fired after first render and initialization
|
|
18
|
+
* @fires {CustomEvent} btu-progress-complete - Fired when determinate progress reaches 100
|
|
19
|
+
*
|
|
20
|
+
* @cssprop --progress-color - Custom progress indicator color (overrides theme color)
|
|
21
|
+
* @cssprop --track-color - Track/background color (overrides default gray-100)
|
|
22
|
+
* @cssprop --progress-size - Custom size in pixels (overrides size preset)
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```html
|
|
26
|
+
* <!-- Indeterminate spinner (default) -->
|
|
27
|
+
* <btu-circular-progress color="primary" size="md"></btu-circular-progress>
|
|
28
|
+
*
|
|
29
|
+
* <!-- Determinate progress -->
|
|
30
|
+
* <btu-circular-progress indeterminate="false" progress="75" color="success"></btu-circular-progress>
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
export default class CircularProgress extends ProgressMixin(EventEmitterMixin(ReadyMixin(LitElement))) {
|
|
34
|
+
constructor() {
|
|
35
|
+
super(...arguments);
|
|
36
|
+
/**
|
|
37
|
+
* Whether the progress indicator is indeterminate (animated spinner).
|
|
38
|
+
* When false, shows determinate progress based on the progress value.
|
|
39
|
+
* @attr
|
|
40
|
+
*/
|
|
41
|
+
this.indeterminate = true;
|
|
42
|
+
/**
|
|
43
|
+
* Size variant.
|
|
44
|
+
* - 'sm': Small (16px) - default
|
|
45
|
+
* - 'md': Medium (32px)
|
|
46
|
+
* - 'lg': Large (48px)
|
|
47
|
+
* @attr
|
|
48
|
+
*/
|
|
49
|
+
this.size = 'sm';
|
|
50
|
+
/** @internal */
|
|
51
|
+
this._initialClasses = [];
|
|
52
|
+
}
|
|
53
|
+
connectedCallback() {
|
|
54
|
+
super.connectedCallback();
|
|
55
|
+
// Capture initial classes from backend HTML
|
|
56
|
+
if (this.className) {
|
|
57
|
+
this._initialClasses = this.className.split(' ').filter(c => c.trim());
|
|
58
|
+
}
|
|
59
|
+
// Observe style attribute changes to detect --progress-size updates
|
|
60
|
+
this._styleObserver = new MutationObserver(mutations => {
|
|
61
|
+
mutations.forEach(mutation => {
|
|
62
|
+
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
|
|
63
|
+
this.requestUpdate();
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
this._styleObserver.observe(this, {
|
|
68
|
+
attributes: true,
|
|
69
|
+
attributeFilter: ['style'],
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
createRenderRoot() {
|
|
73
|
+
return this;
|
|
74
|
+
}
|
|
75
|
+
willUpdate() {
|
|
76
|
+
const classes = [...this._initialClasses, 'inline-flex', 'flex-col', 'items-center'];
|
|
77
|
+
this.className = classes.join(' ');
|
|
78
|
+
}
|
|
79
|
+
firstUpdated(changedProperties) {
|
|
80
|
+
super.firstUpdated(changedProperties);
|
|
81
|
+
// Only setup initial animation for determinate mode
|
|
82
|
+
if (!this.indeterminate) {
|
|
83
|
+
this._setupInitialAnimation();
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
disconnectedCallback() {
|
|
87
|
+
super.disconnectedCallback();
|
|
88
|
+
this._styleObserver?.disconnect();
|
|
89
|
+
this._cleanupInitialAnimation();
|
|
90
|
+
}
|
|
91
|
+
updated(changedProperties) {
|
|
92
|
+
super.updated(changedProperties);
|
|
93
|
+
// Setup animation if switching to determinate mode
|
|
94
|
+
if (changedProperties.has('indeterminate') && !this.indeterminate) {
|
|
95
|
+
this._setupInitialAnimation();
|
|
96
|
+
}
|
|
97
|
+
// Only track completion in determinate mode
|
|
98
|
+
if (!this.indeterminate) {
|
|
99
|
+
this._trackCompletion();
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
render() {
|
|
103
|
+
// Determine size: check --progress-size CSS property, fallback to size preset
|
|
104
|
+
const sizeMap = { sm: 16, md: 32, lg: 48 };
|
|
105
|
+
const customSize = getComputedStyle(this).getPropertyValue('--progress-size').trim();
|
|
106
|
+
const parsed = parseFloat(customSize);
|
|
107
|
+
const size = customSize && !isNaN(parsed) && parsed > 0 ? parsed : (sizeMap[this.size] ?? sizeMap.sm);
|
|
108
|
+
const thickness = this.thickness ?? 2; // default thickness is 2
|
|
109
|
+
const color = this._getProgressColorValue();
|
|
110
|
+
const radius = (size - thickness) / 2;
|
|
111
|
+
const circumference = 2 * Math.PI * radius;
|
|
112
|
+
const center = size / 2;
|
|
113
|
+
const progressValue = this._getAnimatedProgress();
|
|
114
|
+
const strokeDashoffset = this.indeterminate ? 0 : circumference - (progressValue / 100) * circumference;
|
|
115
|
+
return html `
|
|
116
|
+
<span
|
|
117
|
+
class="block"
|
|
118
|
+
role="progressbar"
|
|
119
|
+
aria-label="${this.ariaLabel || nothing}"
|
|
120
|
+
aria-labelledby="${this.ariaLabelledBy || nothing}"
|
|
121
|
+
aria-valuenow="${this.indeterminate ? nothing : progressValue}"
|
|
122
|
+
aria-valuemin="${this.indeterminate ? nothing : '0'}"
|
|
123
|
+
aria-valuemax="${this.indeterminate ? nothing : '100'}"
|
|
124
|
+
aria-valuetext="${this.indeterminate
|
|
125
|
+
? nothing
|
|
126
|
+
: this.ariaValueText || this.label || `${progressValue} percent`}"
|
|
127
|
+
>
|
|
128
|
+
<svg
|
|
129
|
+
class="${this.indeterminate ? 'animate-circular-progress-rotate' : ''} block"
|
|
130
|
+
width="${size}"
|
|
131
|
+
height="${size}"
|
|
132
|
+
viewBox="0 0 ${size} ${size}"
|
|
133
|
+
aria-hidden="true"
|
|
134
|
+
>
|
|
135
|
+
<circle
|
|
136
|
+
cx="${center}"
|
|
137
|
+
cy="${center}"
|
|
138
|
+
r="${radius}"
|
|
139
|
+
fill="none"
|
|
140
|
+
stroke="var(--track-color, oklch(var(--btu-theme-gray-100)))"
|
|
141
|
+
stroke-width="${thickness}"
|
|
142
|
+
/>
|
|
143
|
+
<circle
|
|
144
|
+
class="${this.indeterminate
|
|
145
|
+
? 'animate-circular-progress-dash'
|
|
146
|
+
: '-rotate-90'} origin-center transition-all duration-300 ease-in-out"
|
|
147
|
+
cx="${center}"
|
|
148
|
+
cy="${center}"
|
|
149
|
+
r="${radius}"
|
|
150
|
+
fill="none"
|
|
151
|
+
stroke="${color}"
|
|
152
|
+
stroke-width="${thickness}"
|
|
153
|
+
stroke-dasharray="${this.indeterminate ? '1, 200' : circumference}"
|
|
154
|
+
stroke-dashoffset="${this.indeterminate ? '0' : strokeDashoffset}"
|
|
155
|
+
stroke-linecap="round"
|
|
156
|
+
/>
|
|
157
|
+
</svg>
|
|
158
|
+
</span>
|
|
159
|
+
${this.label ? html `<span class="mt-2 text-center text-xs font-medium text-gray-700">${this.label}</span>` : ''}
|
|
160
|
+
`;
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
__decorate([
|
|
164
|
+
property({ type: Boolean })
|
|
165
|
+
], CircularProgress.prototype, "indeterminate", void 0);
|
|
166
|
+
__decorate([
|
|
167
|
+
property({ type: String })
|
|
168
|
+
], CircularProgress.prototype, "size", void 0);
|
|
169
|
+
// Register custom element with guard to prevent double registration
|
|
170
|
+
if (!customElements.get('btu-circular-progress')) {
|
|
171
|
+
customElements.define('btu-circular-progress', CircularProgress);
|
|
172
|
+
}
|
|
173
|
+
//# sourceMappingURL=CircularProgress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CircularProgress.js","sourceRoot":"","sources":["../../../src/components/circular-progress/CircularProgress.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export interface IconProps {
|
|
3
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
4
|
+
symbol?: string;
|
|
5
|
+
gradient?: 'ai' | 'error' | 'gray' | 'primary' | 'purple' | 'rose' | 'success' | 'teal' | 'warning';
|
|
6
|
+
}
|
|
7
|
+
declare const Icon_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
|
|
8
|
+
/**
|
|
9
|
+
* An icon component for displaying Lucide icons.
|
|
10
|
+
*
|
|
11
|
+
* Icons inherit parent text color by default or can use gradient fills.
|
|
12
|
+
* All icons are from the Lucide icon library (https://lucide.dev/icons/).
|
|
13
|
+
* Supports both direct SVG rendering and mask-based gradient fills.
|
|
14
|
+
*
|
|
15
|
+
* @element btu-icon
|
|
16
|
+
*
|
|
17
|
+
* @fires {CustomEvent} btu-icon-ready - Fired after first render and initialization
|
|
18
|
+
*
|
|
19
|
+
* @cssprop --Icon-size - Icon size (overrides size default)
|
|
20
|
+
* @cssprop --Icon-fill - Icon fill color for filled icons (e.g., "currentColor")
|
|
21
|
+
* @cssprop --Icon-svg - SVG data URI for mask-based rendering
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```html
|
|
25
|
+
* <!-- Icon inheriting parent text color -->
|
|
26
|
+
* <btu-icon symbol="heart" size="md"></btu-icon>
|
|
27
|
+
*
|
|
28
|
+
* <!-- Gradient icon -->
|
|
29
|
+
* <btu-icon symbol="star" size="lg" gradient="primary"></btu-icon>
|
|
30
|
+
*
|
|
31
|
+
* <!-- Custom size via CSS -->
|
|
32
|
+
* <btu-icon symbol="check" style="--Icon-size: 3rem"></btu-icon>
|
|
33
|
+
*
|
|
34
|
+
* <!-- Filled icon via CSS (advanced usage) -->
|
|
35
|
+
* <btu-icon symbol="heart" style="--Icon-fill: currentColor"></btu-icon>
|
|
36
|
+
* ```
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* ```typescript
|
|
40
|
+
* // Programmatic usage
|
|
41
|
+
* const icon = document.createElement('btu-icon')
|
|
42
|
+
* icon.symbol = 'smile'
|
|
43
|
+
* icon.size = 'lg'
|
|
44
|
+
* icon.addEventListener('btu-icon-ready', () => console.log('Icon loaded'))
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
export default class Icon extends Icon_base {
|
|
48
|
+
static get tagName(): string;
|
|
49
|
+
/**
|
|
50
|
+
* Size of the icon.
|
|
51
|
+
* - 'xs': Extra small (0.75rem)
|
|
52
|
+
* - 'sm': Small (1rem)
|
|
53
|
+
* - 'md': Medium (1.25rem, default)
|
|
54
|
+
* - 'lg': Large (1.5rem)
|
|
55
|
+
* - 'xl': Extra large (1.75rem)
|
|
56
|
+
* @attr
|
|
57
|
+
*/
|
|
58
|
+
size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
59
|
+
/**
|
|
60
|
+
* Lucide icon name to display.
|
|
61
|
+
* See https://lucide.dev/icons/ for available icons.
|
|
62
|
+
* @attr
|
|
63
|
+
*/
|
|
64
|
+
symbol: string;
|
|
65
|
+
/**
|
|
66
|
+
* Theme color to use for gradient fill.
|
|
67
|
+
* When set, icon displays with gradient. When undefined, icon inherits parent text color.
|
|
68
|
+
* @attr
|
|
69
|
+
*/
|
|
70
|
+
gradient?: 'ai' | 'error' | 'gray' | 'primary' | 'purple' | 'rose' | 'success' | 'teal' | 'warning';
|
|
71
|
+
/** @internal */
|
|
72
|
+
private initialClasses;
|
|
73
|
+
connectedCallback(): void;
|
|
74
|
+
createRenderRoot(): this;
|
|
75
|
+
willUpdate(): void;
|
|
76
|
+
firstUpdated(): void;
|
|
77
|
+
/**
|
|
78
|
+
* Escape HTML special characters to prevent XSS attacks in comments.
|
|
79
|
+
* @internal
|
|
80
|
+
*/
|
|
81
|
+
private escapeHtml;
|
|
82
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
83
|
+
}
|
|
84
|
+
declare global {
|
|
85
|
+
interface HTMLElementTagNameMap {
|
|
86
|
+
'btu-icon': Icon;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
export {};
|
|
90
|
+
//# sourceMappingURL=Icon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/Icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAWtC,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;CACpG;;AASD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,SAAyC;IACzE,MAAM,KAAK,OAAO,WAEjB;IAED;;;;;;;;OAQG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAO;IAE7C;;;;OAIG;IAEH,MAAM,EAAE,MAAM,CAAkB;IAEhC;;;;OAIG;IAEH,QAAQ,CAAC,EAAE,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;IAEnG,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAe;IAErC,iBAAiB,IAAI,IAAI;IAQzB,gBAAgB;IAIhB,UAAU,IAAI,IAAI;IAclB,YAAY,IAAI,IAAI;IAIpB;;;OAGG;IACH,OAAO,CAAC,UAAU;IASlB,MAAM;CA+CP;AAQD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAA;KACjB;CACF"}
|