@nuralyui/badge 0.0.4 → 0.0.6
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/badge.component.d.ts +1 -1
- package/badge.component.js.map +1 -1
- package/badge.style.js +4 -3
- package/badge.style.js.map +1 -1
- package/badge.types.js.map +1 -1
- package/bundle.js +268 -2
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
package/badge.component.d.ts
CHANGED
|
@@ -137,7 +137,7 @@ export declare class NrBadgeElement extends NrBadgeElement_base {
|
|
|
137
137
|
* Render count/dot badge
|
|
138
138
|
*/
|
|
139
139
|
private renderCountBadge;
|
|
140
|
-
render(): TemplateResult<1 | 2>;
|
|
140
|
+
render(): TemplateResult<1 | 2 | 3>;
|
|
141
141
|
}
|
|
142
142
|
declare global {
|
|
143
143
|
interface HTMLElementTagNameMap {
|
package/badge.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.component.js","sourceRoot":"","sources":["../../../src/components/badge/badge.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { styles } from './badge.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport {\n BadgeStatus,\n BadgeSize,\n BadgeColor,\n RibbonPlacement\n} from './badge.types.js';\n\n/**\n * # Badge Component\n * \n * Small numerical value or status descriptor for UI elements.\n * Badge normally appears in proximity to notifications or user avatars with\n * eye-catching appeal, typically displaying unread messages count.\n * \n * ## Features\n * - Count badge with overflow support\n * - Dot badge for simple indicators\n * - Status badge with predefined states\n * - Ribbon badge for decorative labels\n * - Customizable colors (preset and custom)\n * - Offset positioning\n * - Show zero option\n * - Theme-aware styling\n * \n * ## Usage\n * ```html\n * <!-- Basic count badge -->\n * <nr-badge count=\"5\">\n * <button>Notifications</button>\n * </nr-badge>\n * \n * <!-- Dot badge -->\n * <nr-badge dot>\n * <nr-icon name=\"notification\"></nr-icon>\n * </nr-badge>\n * \n * <!-- Status badge -->\n * <nr-badge status=\"success\" text=\"Success\"></nr-badge>\n * \n * <!-- Ribbon badge -->\n * <nr-badge ribbon=\"Recommended\">\n * <div class=\"card\">Card content</div>\n * </nr-badge>\n * \n * <!-- Standalone badge -->\n * <nr-badge count=\"25\"></nr-badge>\n * ```\n * \n * @element nr-badge\n * \n * @slot - Content to wrap with badge (avatar, icon, etc.)\n * \n * @cssproperty --nuraly-badge-text-font-size - Font size of badge text\n * @cssproperty --nuraly-badge-text-font-weight - Font weight of badge text\n * @cssproperty --nuraly-badge-indicator-height - Height of badge indicator\n * @cssproperty --nuraly-badge-indicator-height-sm - Height of small badge\n * @cssproperty --nuraly-badge-indicator-z-index - Z-index of badge\n * @cssproperty --nuraly-badge-dot-size - Size of dot badge\n * @cssproperty --nuraly-badge-status-size - Size of status indicator\n */\n@customElement('nr-badge')\nexport class NrBadgeElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /**\n * Number to show in badge\n */\n @property({ type: Number })\n count?: number;\n\n /**\n * Whether to display a dot instead of count\n */\n @property({ type: Boolean })\n dot = false;\n\n /**\n * Max count to show (shows count+ when exceeded)\n */\n @property({ type: Number, attribute: 'overflow-count' })\n overflowCount = 99;\n\n /**\n * Whether to show badge when count is zero\n */\n @property({ type: Boolean, attribute: 'show-zero' })\n showZero = false;\n\n /**\n * Set offset of the badge dot [x, y]\n */\n @property({ type: Array })\n offset?: [number, number];\n\n /**\n * Badge color (preset or custom hex/rgb)\n */\n @property({ type: String })\n color?: BadgeColor | string;\n\n /**\n * Badge size\n */\n @property({ type: String })\n size: BadgeSize = BadgeSize.Default;\n\n /**\n * Set Badge as a status dot\n */\n @property({ type: String })\n status?: BadgeStatus;\n\n /**\n * Status text to display\n */\n @property({ type: String })\n text?: string;\n\n /**\n * Title to show on hover\n */\n @property({ type: String })\n badgeTitle?: string;\n\n /**\n * Ribbon text (enables ribbon mode)\n */\n @property({ type: String })\n ribbon?: string;\n\n /**\n * Ribbon placement\n */\n @property({ type: String, attribute: 'ribbon-placement' })\n ribbonPlacement: RibbonPlacement = RibbonPlacement.End;\n\n /**\n * Get the display count text\n */\n private getDisplayCount(): string {\n if (this.count === undefined) return '';\n \n const count = Number(this.count);\n if (count > this.overflowCount) {\n return `${this.overflowCount}+`;\n }\n return String(count);\n }\n\n /**\n * Check if badge should be hidden\n */\n private shouldHideBadge(): boolean {\n if (this.dot) return false;\n if (this.count === undefined) return true;\n if (this.count === 0 && !this.showZero) return true;\n return false;\n }\n\n /**\n * Get custom color style\n */\n private getCustomColorStyle(): Record<string, string> {\n if (!this.color) return {};\n \n // Preset colors are handled via CSS classes\n const presetColors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', \n 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];\n const isCustomColor = !presetColors.includes(this.color);\n \n if (isCustomColor) {\n return {\n backgroundColor: this.color,\n color: '#fff'\n };\n }\n \n return {};\n }\n\n /**\n * Get offset style\n */\n private getOffsetStyle(): Record<string, string> {\n if (!this.offset) return {};\n \n const [x, y] = this.offset;\n return {\n right: `calc(0px - ${x}px)`,\n top: `${y}px`,\n };\n }\n\n /**\n * Render status badge\n */\n private renderStatusBadge(): TemplateResult {\n return html`\n <span class=\"badge-status\">\n <span class=\"badge-status-dot ${this.status}\"></span>\n ${this.text ? html`<span class=\"badge-status-text\">${this.text}</span>` : nothing}\n </span>\n `;\n }\n\n /**\n * Render ribbon badge\n */\n private renderRibbonBadge(): TemplateResult {\n const ribbonClasses = {\n 'badge-ribbon': true,\n [this.ribbonPlacement]: true,\n [this.color || '']: !!this.color,\n };\n\n const ribbonStyle = this.getCustomColorStyle();\n\n return html`\n <div class=\"badge-ribbon-wrapper\">\n <slot></slot>\n <div class=${classMap(ribbonClasses)} style=${styleMap(ribbonStyle)}>\n ${this.ribbon}\n </div>\n </div>\n `;\n }\n\n /**\n * Render count/dot badge\n */\n private renderCountBadge(): TemplateResult {\n const hasChildren = this.querySelector(':not([slot])') !== null;\n const isStandalone = !hasChildren;\n const isHidden = this.shouldHideBadge();\n\n const presetColors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', \n 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];\n const isPresetColor = this.color && presetColors.includes(this.color);\n\n const indicatorClasses = {\n 'badge-indicator': true,\n 'badge-standalone': isStandalone,\n 'badge-hidden': isHidden,\n 'dot': this.dot,\n 'small': this.size === BadgeSize.Small,\n ...(this.color && isPresetColor ? { [this.color]: true } : {}),\n };\n\n const indicatorStyle = {\n ...this.getCustomColorStyle(),\n ...this.getOffsetStyle(),\n };\n\n const badgeContent = this.dot ? nothing : this.getDisplayCount();\n\n if (isStandalone) {\n return html`\n <span\n class=${classMap(indicatorClasses)}\n style=${styleMap(indicatorStyle)}\n title=${this.badgeTitle || ''}\n >\n ${badgeContent}\n </span>\n `;\n }\n\n return html`\n <span class=\"badge-wrapper\">\n <slot></slot>\n <span\n class=${classMap(indicatorClasses)}\n style=${styleMap(indicatorStyle)}\n title=${this.badgeTitle || ''}\n >\n ${badgeContent}\n </span>\n </span>\n `;\n }\n\n override render() {\n // Ribbon mode\n if (this.ribbon) {\n return this.renderRibbonBadge();\n }\n\n // Status mode\n if (this.status) {\n return this.renderStatusBadge();\n }\n\n // Count/Dot mode\n return this.renderCountBadge();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-badge': NrBadgeElement;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"badge.component.js","sourceRoot":"","sources":["../../../../src/components/badge/badge.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { styles } from './badge.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport {\n BadgeStatus,\n BadgeSize,\n BadgeColor,\n RibbonPlacement\n} from './badge.types.js';\n\n/**\n * # Badge Component\n * \n * Small numerical value or status descriptor for UI elements.\n * Badge normally appears in proximity to notifications or user avatars with\n * eye-catching appeal, typically displaying unread messages count.\n * \n * ## Features\n * - Count badge with overflow support\n * - Dot badge for simple indicators\n * - Status badge with predefined states\n * - Ribbon badge for decorative labels\n * - Customizable colors (preset and custom)\n * - Offset positioning\n * - Show zero option\n * - Theme-aware styling\n * \n * ## Usage\n * ```html\n * <!-- Basic count badge -->\n * <nr-badge count=\"5\">\n * <button>Notifications</button>\n * </nr-badge>\n * \n * <!-- Dot badge -->\n * <nr-badge dot>\n * <nr-icon name=\"notification\"></nr-icon>\n * </nr-badge>\n * \n * <!-- Status badge -->\n * <nr-badge status=\"success\" text=\"Success\"></nr-badge>\n * \n * <!-- Ribbon badge -->\n * <nr-badge ribbon=\"Recommended\">\n * <div class=\"card\">Card content</div>\n * </nr-badge>\n * \n * <!-- Standalone badge -->\n * <nr-badge count=\"25\"></nr-badge>\n * ```\n * \n * @element nr-badge\n * \n * @slot - Content to wrap with badge (avatar, icon, etc.)\n * \n * @cssproperty --nuraly-badge-text-font-size - Font size of badge text\n * @cssproperty --nuraly-badge-text-font-weight - Font weight of badge text\n * @cssproperty --nuraly-badge-indicator-height - Height of badge indicator\n * @cssproperty --nuraly-badge-indicator-height-sm - Height of small badge\n * @cssproperty --nuraly-badge-indicator-z-index - Z-index of badge\n * @cssproperty --nuraly-badge-dot-size - Size of dot badge\n * @cssproperty --nuraly-badge-status-size - Size of status indicator\n */\n@customElement('nr-badge')\nexport class NrBadgeElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /**\n * Number to show in badge\n */\n @property({ type: Number })\n count?: number;\n\n /**\n * Whether to display a dot instead of count\n */\n @property({ type: Boolean })\n dot = false;\n\n /**\n * Max count to show (shows count+ when exceeded)\n */\n @property({ type: Number, attribute: 'overflow-count' })\n overflowCount = 99;\n\n /**\n * Whether to show badge when count is zero\n */\n @property({ type: Boolean, attribute: 'show-zero' })\n showZero = false;\n\n /**\n * Set offset of the badge dot [x, y]\n */\n @property({ type: Array })\n offset?: [number, number];\n\n /**\n * Badge color (preset or custom hex/rgb)\n */\n @property({ type: String })\n color?: BadgeColor | string;\n\n /**\n * Badge size\n */\n @property({ type: String })\n size: BadgeSize = BadgeSize.Default;\n\n /**\n * Set Badge as a status dot\n */\n @property({ type: String })\n status?: BadgeStatus;\n\n /**\n * Status text to display\n */\n @property({ type: String })\n text?: string;\n\n /**\n * Title to show on hover\n */\n @property({ type: String })\n badgeTitle?: string;\n\n /**\n * Ribbon text (enables ribbon mode)\n */\n @property({ type: String })\n ribbon?: string;\n\n /**\n * Ribbon placement\n */\n @property({ type: String, attribute: 'ribbon-placement' })\n ribbonPlacement: RibbonPlacement = RibbonPlacement.End;\n\n /**\n * Get the display count text\n */\n private getDisplayCount(): string {\n if (this.count === undefined) return '';\n \n const count = Number(this.count);\n if (count > this.overflowCount) {\n return `${this.overflowCount}+`;\n }\n return String(count);\n }\n\n /**\n * Check if badge should be hidden\n */\n private shouldHideBadge(): boolean {\n if (this.dot) return false;\n if (this.count === undefined) return true;\n if (this.count === 0 && !this.showZero) return true;\n return false;\n }\n\n /**\n * Get custom color style\n */\n private getCustomColorStyle(): Record<string, string> {\n if (!this.color) return {};\n \n // Preset colors are handled via CSS classes\n const presetColors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', \n 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];\n const isCustomColor = !presetColors.includes(this.color);\n \n if (isCustomColor) {\n return {\n backgroundColor: this.color,\n color: '#fff'\n };\n }\n \n return {};\n }\n\n /**\n * Get offset style\n */\n private getOffsetStyle(): Record<string, string> {\n if (!this.offset) return {};\n \n const [x, y] = this.offset;\n return {\n right: `calc(0px - ${x}px)`,\n top: `${y}px`,\n };\n }\n\n /**\n * Render status badge\n */\n private renderStatusBadge(): TemplateResult {\n return html`\n <span class=\"badge-status\">\n <span class=\"badge-status-dot ${this.status}\"></span>\n ${this.text ? html`<span class=\"badge-status-text\">${this.text}</span>` : nothing}\n </span>\n `;\n }\n\n /**\n * Render ribbon badge\n */\n private renderRibbonBadge(): TemplateResult {\n const ribbonClasses = {\n 'badge-ribbon': true,\n [this.ribbonPlacement]: true,\n [this.color || '']: !!this.color,\n };\n\n const ribbonStyle = this.getCustomColorStyle();\n\n return html`\n <div class=\"badge-ribbon-wrapper\">\n <slot></slot>\n <div class=${classMap(ribbonClasses)} style=${styleMap(ribbonStyle)}>\n ${this.ribbon}\n </div>\n </div>\n `;\n }\n\n /**\n * Render count/dot badge\n */\n private renderCountBadge(): TemplateResult {\n const hasChildren = this.querySelector(':not([slot])') !== null;\n const isStandalone = !hasChildren;\n const isHidden = this.shouldHideBadge();\n\n const presetColors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', \n 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];\n const isPresetColor = this.color && presetColors.includes(this.color);\n\n const indicatorClasses = {\n 'badge-indicator': true,\n 'badge-standalone': isStandalone,\n 'badge-hidden': isHidden,\n 'dot': this.dot,\n 'small': this.size === BadgeSize.Small,\n ...(this.color && isPresetColor ? { [this.color]: true } : {}),\n };\n\n const indicatorStyle = {\n ...this.getCustomColorStyle(),\n ...this.getOffsetStyle(),\n };\n\n const badgeContent = this.dot ? nothing : this.getDisplayCount();\n\n if (isStandalone) {\n return html`\n <span\n class=${classMap(indicatorClasses)}\n style=${styleMap(indicatorStyle)}\n title=${this.badgeTitle || ''}\n >\n ${badgeContent}\n </span>\n `;\n }\n\n return html`\n <span class=\"badge-wrapper\">\n <slot></slot>\n <span\n class=${classMap(indicatorClasses)}\n style=${styleMap(indicatorStyle)}\n title=${this.badgeTitle || ''}\n >\n ${badgeContent}\n </span>\n </span>\n `;\n }\n\n override render() {\n // Ribbon mode\n if (this.ribbon) {\n return this.renderRibbonBadge();\n }\n\n // Status mode\n if (this.status) {\n return this.renderStatusBadge();\n }\n\n // Count/Dot mode\n return this.renderCountBadge();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-badge': NrBadgeElement;\n }\n}\n"]}
|
package/badge.style.js
CHANGED
|
@@ -29,11 +29,12 @@ export const styles = css `
|
|
|
29
29
|
|
|
30
30
|
/* Main badge indicator (count or dot) */
|
|
31
31
|
.badge-indicator {
|
|
32
|
-
position: absolute;
|
|
32
|
+
/* position: absolute; */
|
|
33
33
|
top: 0;
|
|
34
34
|
right: 0;
|
|
35
|
-
|
|
36
|
-
transform
|
|
35
|
+
/* Temporarily disabled for demo - positions badge at exact corner */
|
|
36
|
+
/* transform: translate(50%, -50%); */
|
|
37
|
+
/* transform-origin: 100% 0%; */
|
|
37
38
|
z-index: var(--nuraly-badge-indicator-z-index, auto);
|
|
38
39
|
display: inline-flex;
|
|
39
40
|
align-items: center;
|
package/badge.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"badge.style.js","sourceRoot":"","sources":["../../../../src/components/badge/badge.style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2OxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { css } from 'lit';\n\n/**\n * Badge component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-badge component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport const styles = css`\n :host {\n display: inline-block;\n position: relative;\n font-family: var(--nuraly-font-family);\n font-size: var(--nuraly-badge-text-font-size, 12px);\n line-height: 1;\n vertical-align: middle;\n }\n\n /* Badge wrapper for positioning */\n .badge-wrapper {\n position: relative;\n display: inline-block;\n }\n\n /* Main badge indicator (count or dot) */\n .badge-indicator {\n /* position: absolute; */\n top: 0;\n right: 0;\n /* Temporarily disabled for demo - positions badge at exact corner */\n /* transform: translate(50%, -50%); */\n /* transform-origin: 100% 0%; */\n z-index: var(--nuraly-badge-indicator-z-index, auto);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--nuraly-badge-indicator-height, 20px);\n height: var(--nuraly-badge-indicator-height, 20px);\n padding: 0 6px;\n font-size: var(--nuraly-badge-text-font-size, 12px);\n font-weight: var(--nuraly-badge-text-font-weight, normal);\n line-height: var(--nuraly-badge-indicator-height, 20px);\n white-space: nowrap;\n text-align: center;\n background-color: var(--nuraly-color-error, #ff4d4f);\n color: #fff;\n border-radius: 10px;\n box-shadow: 0 0 0 1px var(--nuraly-color-background, #fff);\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n }\n\n /* Small size badge */\n .badge-indicator.small {\n min-width: var(--nuraly-badge-indicator-height-sm, 14px);\n height: var(--nuraly-badge-indicator-height-sm, 14px);\n padding: 0 4px;\n font-size: var(--nuraly-badge-text-font-size-sm, 12px);\n line-height: var(--nuraly-badge-indicator-height-sm, 14px);\n border-radius: 7px;\n }\n\n /* Dot badge (small indicator without count) */\n .badge-indicator.dot {\n min-width: var(--nuraly-badge-dot-size, 6px);\n width: var(--nuraly-badge-dot-size, 6px);\n height: var(--nuraly-badge-dot-size, 6px);\n padding: 0;\n border-radius: 50%;\n }\n\n /* Standalone badge (no children) */\n .badge-standalone {\n position: relative;\n display: inline-block;\n transform: none;\n }\n\n /* Status badge styles */\n .badge-status {\n display: inline-flex;\n align-items: center;\n gap: var(--nuraly-spacing-2, 0.5rem);\n }\n\n .badge-status-dot {\n width: var(--nuraly-badge-status-size, 6px);\n height: var(--nuraly-badge-status-size, 6px);\n border-radius: 50%;\n display: inline-block;\n }\n\n .badge-status-text {\n color: var(--nuraly-color-text);\n font-size: var(--nuraly-font-size-base, 14px);\n }\n\n /* Status colors */\n .badge-status-dot.success {\n background-color: var(--nuraly-color-success, #52c41a);\n }\n\n .badge-status-dot.processing {\n background-color: var(--nuraly-color-primary, #1890ff);\n position: relative;\n }\n\n .badge-status-dot.processing::after {\n content: '';\n position: absolute;\n top: -1px;\n left: -1px;\n width: 100%;\n height: 100%;\n border: 1px solid var(--nuraly-color-primary, #1890ff);\n border-radius: 50%;\n animation: badge-processing 1.2s infinite ease-in-out;\n }\n\n @keyframes badge-processing {\n 0% {\n transform: scale(0.8);\n opacity: 0.5;\n }\n 100% {\n transform: scale(2.4);\n opacity: 0;\n }\n }\n\n .badge-status-dot.default {\n background-color: var(--nuraly-color-text-secondary, #8c8c8c);\n }\n\n .badge-status-dot.error {\n background-color: var(--nuraly-color-error, #ff4d4f);\n }\n\n .badge-status-dot.warning {\n background-color: var(--nuraly-color-warning, #faad14);\n }\n\n /* Color variants for badge indicator */\n .badge-indicator.pink { background-color: #eb2f96; }\n .badge-indicator.red { background-color: #f5222d; }\n .badge-indicator.yellow { background-color: #fadb14; color: rgba(0, 0, 0, 0.85); }\n .badge-indicator.orange { background-color: #fa8c16; }\n .badge-indicator.cyan { background-color: #13c2c2; }\n .badge-indicator.green { background-color: #52c41a; }\n .badge-indicator.blue { background-color: #1890ff; }\n .badge-indicator.purple { background-color: #722ed1; }\n .badge-indicator.geekblue { background-color: #2f54eb; }\n .badge-indicator.magenta { background-color: #eb2f96; }\n .badge-indicator.volcano { background-color: #fa541c; }\n .badge-indicator.gold { background-color: #faad14; color: rgba(0, 0, 0, 0.85); }\n .badge-indicator.lime { background-color: #a0d911; color: rgba(0, 0, 0, 0.85); }\n\n /* Ribbon badge styles */\n .badge-ribbon-wrapper {\n position: relative;\n }\n\n .badge-ribbon {\n position: absolute;\n top: var(--nuraly-spacing-2, 0.5rem);\n height: 22px;\n padding: 0 var(--nuraly-spacing-2, 0.5rem);\n color: #fff;\n line-height: 22px;\n white-space: nowrap;\n background-color: var(--nuraly-color-primary, #1890ff);\n border-radius: 2px;\n }\n\n .badge-ribbon.start {\n left: calc(-1 * var(--nuraly-spacing-1, 0.25rem));\n padding-left: var(--nuraly-spacing-2, 0.5rem);\n }\n\n .badge-ribbon.end {\n right: calc(-1 * var(--nuraly-spacing-1, 0.25rem));\n padding-right: var(--nuraly-spacing-2, 0.5rem);\n }\n\n .badge-ribbon::after {\n content: '';\n position: absolute;\n top: 100%;\n width: 0;\n height: 0;\n border: 4px solid transparent;\n }\n\n .badge-ribbon.start::after {\n left: 0;\n border-top-color: currentColor;\n border-left-color: currentColor;\n filter: brightness(0.7);\n }\n\n .badge-ribbon.end::after {\n right: 0;\n border-top-color: currentColor;\n border-right-color: currentColor;\n filter: brightness(0.7);\n }\n\n /* Ribbon color variants */\n .badge-ribbon.pink { background-color: #eb2f96; color: #fff; }\n .badge-ribbon.red { background-color: #f5222d; color: #fff; }\n .badge-ribbon.yellow { background-color: #fadb14; color: rgba(0, 0, 0, 0.85); }\n .badge-ribbon.orange { background-color: #fa8c16; color: #fff; }\n .badge-ribbon.cyan { background-color: #13c2c2; color: #fff; }\n .badge-ribbon.green { background-color: #52c41a; color: #fff; }\n .badge-ribbon.blue { background-color: #1890ff; color: #fff; }\n .badge-ribbon.purple { background-color: #722ed1; color: #fff; }\n .badge-ribbon.geekblue { background-color: #2f54eb; color: #fff; }\n .badge-ribbon.magenta { background-color: #eb2f96; color: #fff; }\n .badge-ribbon.volcano { background-color: #fa541c; color: #fff; }\n .badge-ribbon.gold { background-color: #faad14; color: rgba(0, 0, 0, 0.85); }\n .badge-ribbon.lime { background-color: #a0d911; color: rgba(0, 0, 0, 0.85); }\n\n /* Hidden state */\n .badge-hidden {\n display: none;\n }\n\n /* RTL Support */\n :host([dir=\"rtl\"]) .badge-indicator {\n right: auto;\n left: 0;\n transform: translate(-50%, -50%);\n transform-origin: 0% 0%;\n }\n\n :host([dir=\"rtl\"]) .badge-ribbon.start {\n left: auto;\n right: calc(-1 * var(--nuraly-spacing-1, 0.25rem));\n }\n\n :host([dir=\"rtl\"]) .badge-ribbon.end {\n right: auto;\n left: calc(-1 * var(--nuraly-spacing-1, 0.25rem));\n }\n`;\n"]}
|
package/badge.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"badge.types.js","sourceRoot":"","sources":["../../../../src/components/badge/badge.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Badge status types for status indicators\n */\nexport const enum BadgeStatus {\n Success = 'success',\n Processing = 'processing',\n Default = 'default',\n Error = 'error',\n Warning = 'warning',\n}\n\n/**\n * Badge size variants\n */\nexport const enum BadgeSize {\n Default = 'default',\n Small = 'small',\n}\n\n/**\n * Badge color presets\n */\nexport const enum BadgeColor {\n Pink = 'pink',\n Red = 'red',\n Yellow = 'yellow',\n Orange = 'orange',\n Cyan = 'cyan',\n Green = 'green',\n Blue = 'blue',\n Purple = 'purple',\n Geekblue = 'geekblue',\n Magenta = 'magenta',\n Volcano = 'volcano',\n Gold = 'gold',\n Lime = 'lime',\n}\n\n/**\n * Ribbon placement options\n */\nexport const enum RibbonPlacement {\n Start = 'start',\n End = 'end',\n}\n\n/**\n * Badge configuration interface\n */\nexport interface BadgeConfig {\n /** Number to show in badge */\n count?: number | string;\n \n /** Whether to display a dot instead of count */\n dot?: boolean;\n \n /** Max count to show (shows count+ when exceeded) */\n overflowCount?: number;\n \n /** Whether to show badge when count is zero */\n showZero?: boolean;\n \n /** Set offset of the badge dot [x, y] */\n offset?: [number, number];\n \n /** Badge color (preset or custom hex/rgb) */\n color?: BadgeColor | string;\n \n /** Badge size */\n size?: BadgeSize;\n \n /** Set Badge as a status dot */\n status?: BadgeStatus;\n \n /** Status text to display */\n text?: string;\n \n /** Title to show on hover */\n title?: string;\n}\n\n/**\n * Ribbon badge configuration\n */\nexport interface RibbonConfig {\n /** Content inside the ribbon */\n text: string;\n \n /** Ribbon color (preset or custom) */\n color?: BadgeColor | string;\n \n /** Placement of the ribbon */\n placement?: RibbonPlacement;\n}\n"]}
|
package/bundle.js
CHANGED
|
@@ -3,9 +3,275 @@ import{css as r,LitElement as o,html as a,nothing as t}from"lit";import{property
|
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
5
5
|
* SPDX-License-Identifier: MIT
|
|
6
|
-
*/const s=r
|
|
6
|
+
*/const s=r`
|
|
7
|
+
:host {
|
|
8
|
+
display: inline-block;
|
|
9
|
+
position: relative;
|
|
10
|
+
font-family: var(--nuraly-font-family);
|
|
11
|
+
font-size: var(--nuraly-badge-text-font-size, 12px);
|
|
12
|
+
line-height: 1;
|
|
13
|
+
vertical-align: middle;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* Badge wrapper for positioning */
|
|
17
|
+
.badge-wrapper {
|
|
18
|
+
position: relative;
|
|
19
|
+
display: inline-block;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* Main badge indicator (count or dot) */
|
|
23
|
+
.badge-indicator {
|
|
24
|
+
/* position: absolute; */
|
|
25
|
+
top: 0;
|
|
26
|
+
right: 0;
|
|
27
|
+
/* Temporarily disabled for demo - positions badge at exact corner */
|
|
28
|
+
/* transform: translate(50%, -50%); */
|
|
29
|
+
/* transform-origin: 100% 0%; */
|
|
30
|
+
z-index: var(--nuraly-badge-indicator-z-index, auto);
|
|
31
|
+
display: inline-flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
min-width: var(--nuraly-badge-indicator-height, 20px);
|
|
35
|
+
height: var(--nuraly-badge-indicator-height, 20px);
|
|
36
|
+
padding: 0 6px;
|
|
37
|
+
font-size: var(--nuraly-badge-text-font-size, 12px);
|
|
38
|
+
font-weight: var(--nuraly-badge-text-font-weight, normal);
|
|
39
|
+
line-height: var(--nuraly-badge-indicator-height, 20px);
|
|
40
|
+
white-space: nowrap;
|
|
41
|
+
text-align: center;
|
|
42
|
+
background-color: var(--nuraly-color-error, #ff4d4f);
|
|
43
|
+
color: #fff;
|
|
44
|
+
border-radius: 10px;
|
|
45
|
+
box-shadow: 0 0 0 1px var(--nuraly-color-background, #fff);
|
|
46
|
+
transition: all var(--nuraly-transition-fast, 0.15s) ease;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Small size badge */
|
|
50
|
+
.badge-indicator.small {
|
|
51
|
+
min-width: var(--nuraly-badge-indicator-height-sm, 14px);
|
|
52
|
+
height: var(--nuraly-badge-indicator-height-sm, 14px);
|
|
53
|
+
padding: 0 4px;
|
|
54
|
+
font-size: var(--nuraly-badge-text-font-size-sm, 12px);
|
|
55
|
+
line-height: var(--nuraly-badge-indicator-height-sm, 14px);
|
|
56
|
+
border-radius: 7px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Dot badge (small indicator without count) */
|
|
60
|
+
.badge-indicator.dot {
|
|
61
|
+
min-width: var(--nuraly-badge-dot-size, 6px);
|
|
62
|
+
width: var(--nuraly-badge-dot-size, 6px);
|
|
63
|
+
height: var(--nuraly-badge-dot-size, 6px);
|
|
64
|
+
padding: 0;
|
|
65
|
+
border-radius: 50%;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Standalone badge (no children) */
|
|
69
|
+
.badge-standalone {
|
|
70
|
+
position: relative;
|
|
71
|
+
display: inline-block;
|
|
72
|
+
transform: none;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Status badge styles */
|
|
76
|
+
.badge-status {
|
|
77
|
+
display: inline-flex;
|
|
78
|
+
align-items: center;
|
|
79
|
+
gap: var(--nuraly-spacing-2, 0.5rem);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.badge-status-dot {
|
|
83
|
+
width: var(--nuraly-badge-status-size, 6px);
|
|
84
|
+
height: var(--nuraly-badge-status-size, 6px);
|
|
85
|
+
border-radius: 50%;
|
|
86
|
+
display: inline-block;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.badge-status-text {
|
|
90
|
+
color: var(--nuraly-color-text);
|
|
91
|
+
font-size: var(--nuraly-font-size-base, 14px);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Status colors */
|
|
95
|
+
.badge-status-dot.success {
|
|
96
|
+
background-color: var(--nuraly-color-success, #52c41a);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.badge-status-dot.processing {
|
|
100
|
+
background-color: var(--nuraly-color-primary, #1890ff);
|
|
101
|
+
position: relative;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.badge-status-dot.processing::after {
|
|
105
|
+
content: '';
|
|
106
|
+
position: absolute;
|
|
107
|
+
top: -1px;
|
|
108
|
+
left: -1px;
|
|
109
|
+
width: 100%;
|
|
110
|
+
height: 100%;
|
|
111
|
+
border: 1px solid var(--nuraly-color-primary, #1890ff);
|
|
112
|
+
border-radius: 50%;
|
|
113
|
+
animation: badge-processing 1.2s infinite ease-in-out;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@keyframes badge-processing {
|
|
117
|
+
0% {
|
|
118
|
+
transform: scale(0.8);
|
|
119
|
+
opacity: 0.5;
|
|
120
|
+
}
|
|
121
|
+
100% {
|
|
122
|
+
transform: scale(2.4);
|
|
123
|
+
opacity: 0;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.badge-status-dot.default {
|
|
128
|
+
background-color: var(--nuraly-color-text-secondary, #8c8c8c);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.badge-status-dot.error {
|
|
132
|
+
background-color: var(--nuraly-color-error, #ff4d4f);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.badge-status-dot.warning {
|
|
136
|
+
background-color: var(--nuraly-color-warning, #faad14);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* Color variants for badge indicator */
|
|
140
|
+
.badge-indicator.pink { background-color: #eb2f96; }
|
|
141
|
+
.badge-indicator.red { background-color: #f5222d; }
|
|
142
|
+
.badge-indicator.yellow { background-color: #fadb14; color: rgba(0, 0, 0, 0.85); }
|
|
143
|
+
.badge-indicator.orange { background-color: #fa8c16; }
|
|
144
|
+
.badge-indicator.cyan { background-color: #13c2c2; }
|
|
145
|
+
.badge-indicator.green { background-color: #52c41a; }
|
|
146
|
+
.badge-indicator.blue { background-color: #1890ff; }
|
|
147
|
+
.badge-indicator.purple { background-color: #722ed1; }
|
|
148
|
+
.badge-indicator.geekblue { background-color: #2f54eb; }
|
|
149
|
+
.badge-indicator.magenta { background-color: #eb2f96; }
|
|
150
|
+
.badge-indicator.volcano { background-color: #fa541c; }
|
|
151
|
+
.badge-indicator.gold { background-color: #faad14; color: rgba(0, 0, 0, 0.85); }
|
|
152
|
+
.badge-indicator.lime { background-color: #a0d911; color: rgba(0, 0, 0, 0.85); }
|
|
153
|
+
|
|
154
|
+
/* Ribbon badge styles */
|
|
155
|
+
.badge-ribbon-wrapper {
|
|
156
|
+
position: relative;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.badge-ribbon {
|
|
160
|
+
position: absolute;
|
|
161
|
+
top: var(--nuraly-spacing-2, 0.5rem);
|
|
162
|
+
height: 22px;
|
|
163
|
+
padding: 0 var(--nuraly-spacing-2, 0.5rem);
|
|
164
|
+
color: #fff;
|
|
165
|
+
line-height: 22px;
|
|
166
|
+
white-space: nowrap;
|
|
167
|
+
background-color: var(--nuraly-color-primary, #1890ff);
|
|
168
|
+
border-radius: 2px;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.badge-ribbon.start {
|
|
172
|
+
left: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
|
|
173
|
+
padding-left: var(--nuraly-spacing-2, 0.5rem);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.badge-ribbon.end {
|
|
177
|
+
right: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
|
|
178
|
+
padding-right: var(--nuraly-spacing-2, 0.5rem);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.badge-ribbon::after {
|
|
182
|
+
content: '';
|
|
183
|
+
position: absolute;
|
|
184
|
+
top: 100%;
|
|
185
|
+
width: 0;
|
|
186
|
+
height: 0;
|
|
187
|
+
border: 4px solid transparent;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.badge-ribbon.start::after {
|
|
191
|
+
left: 0;
|
|
192
|
+
border-top-color: currentColor;
|
|
193
|
+
border-left-color: currentColor;
|
|
194
|
+
filter: brightness(0.7);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.badge-ribbon.end::after {
|
|
198
|
+
right: 0;
|
|
199
|
+
border-top-color: currentColor;
|
|
200
|
+
border-right-color: currentColor;
|
|
201
|
+
filter: brightness(0.7);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
/* Ribbon color variants */
|
|
205
|
+
.badge-ribbon.pink { background-color: #eb2f96; color: #fff; }
|
|
206
|
+
.badge-ribbon.red { background-color: #f5222d; color: #fff; }
|
|
207
|
+
.badge-ribbon.yellow { background-color: #fadb14; color: rgba(0, 0, 0, 0.85); }
|
|
208
|
+
.badge-ribbon.orange { background-color: #fa8c16; color: #fff; }
|
|
209
|
+
.badge-ribbon.cyan { background-color: #13c2c2; color: #fff; }
|
|
210
|
+
.badge-ribbon.green { background-color: #52c41a; color: #fff; }
|
|
211
|
+
.badge-ribbon.blue { background-color: #1890ff; color: #fff; }
|
|
212
|
+
.badge-ribbon.purple { background-color: #722ed1; color: #fff; }
|
|
213
|
+
.badge-ribbon.geekblue { background-color: #2f54eb; color: #fff; }
|
|
214
|
+
.badge-ribbon.magenta { background-color: #eb2f96; color: #fff; }
|
|
215
|
+
.badge-ribbon.volcano { background-color: #fa541c; color: #fff; }
|
|
216
|
+
.badge-ribbon.gold { background-color: #faad14; color: rgba(0, 0, 0, 0.85); }
|
|
217
|
+
.badge-ribbon.lime { background-color: #a0d911; color: rgba(0, 0, 0, 0.85); }
|
|
218
|
+
|
|
219
|
+
/* Hidden state */
|
|
220
|
+
.badge-hidden {
|
|
221
|
+
display: none;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
/* RTL Support */
|
|
225
|
+
:host([dir="rtl"]) .badge-indicator {
|
|
226
|
+
right: auto;
|
|
227
|
+
left: 0;
|
|
228
|
+
transform: translate(-50%, -50%);
|
|
229
|
+
transform-origin: 0% 0%;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
:host([dir="rtl"]) .badge-ribbon.start {
|
|
233
|
+
left: auto;
|
|
234
|
+
right: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
:host([dir="rtl"]) .badge-ribbon.end {
|
|
238
|
+
right: auto;
|
|
239
|
+
left: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
|
|
240
|
+
}
|
|
241
|
+
`
|
|
7
242
|
/**
|
|
8
243
|
* @license
|
|
9
244
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
10
245
|
* SPDX-License-Identifier: MIT
|
|
11
|
-
*/;var
|
|
246
|
+
*/;var b=function(r,o,a,t){for(var e,i=arguments.length,n=i<3?o:null===t?t=Object.getOwnPropertyDescriptor(o,a):t,d=r.length-1;d>=0;d--)(e=r[d])&&(n=(i<3?e(n):i>3?e(o,a,n):e(o,a))||n);return i>3&&n&&Object.defineProperty(o,a,n),n};let c=class extends(l(o)){constructor(){super(...arguments),this.dot=!1,this.overflowCount=99,this.showZero=!1,this.size="default",this.ribbonPlacement="end"}getDisplayCount(){if(void 0===this.count)return"";const r=Number(this.count);return r>this.overflowCount?`${this.overflowCount}+`:String(r)}shouldHideBadge(){return!this.dot&&(void 0===this.count||0===this.count&&!this.showZero)}getCustomColorStyle(){if(!this.color)return{};return!["pink","red","yellow","orange","cyan","green","blue","purple","geekblue","magenta","volcano","gold","lime"].includes(this.color)?{backgroundColor:this.color,color:"#fff"}:{}}getOffsetStyle(){if(!this.offset)return{};const[r,o]=this.offset;return{right:`calc(0px - ${r}px)`,top:`${o}px`}}renderStatusBadge(){return a`
|
|
247
|
+
<span class="badge-status">
|
|
248
|
+
<span class="badge-status-dot ${this.status}"></span>
|
|
249
|
+
${this.text?a`<span class="badge-status-text">${this.text}</span>`:t}
|
|
250
|
+
</span>
|
|
251
|
+
`}renderRibbonBadge(){const r={"badge-ribbon":!0,[this.ribbonPlacement]:!0,[this.color||""]:!!this.color},o=this.getCustomColorStyle();return a`
|
|
252
|
+
<div class="badge-ribbon-wrapper">
|
|
253
|
+
<slot></slot>
|
|
254
|
+
<div class=${n(r)} style=${d(o)}>
|
|
255
|
+
${this.ribbon}
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
`}renderCountBadge(){const r=!(null!==this.querySelector(":not([slot])")),o=this.shouldHideBadge(),e=this.color&&["pink","red","yellow","orange","cyan","green","blue","purple","geekblue","magenta","volcano","gold","lime"].includes(this.color),i=Object.assign({"badge-indicator":!0,"badge-standalone":r,"badge-hidden":o,dot:this.dot,small:"small"===this.size},this.color&&e?{[this.color]:!0}:{}),l=Object.assign(Object.assign({},this.getCustomColorStyle()),this.getOffsetStyle()),s=this.dot?t:this.getDisplayCount();return r?a`
|
|
259
|
+
<span
|
|
260
|
+
class=${n(i)}
|
|
261
|
+
style=${d(l)}
|
|
262
|
+
title=${this.badgeTitle||""}
|
|
263
|
+
>
|
|
264
|
+
${s}
|
|
265
|
+
</span>
|
|
266
|
+
`:a`
|
|
267
|
+
<span class="badge-wrapper">
|
|
268
|
+
<slot></slot>
|
|
269
|
+
<span
|
|
270
|
+
class=${n(i)}
|
|
271
|
+
style=${d(l)}
|
|
272
|
+
title=${this.badgeTitle||""}
|
|
273
|
+
>
|
|
274
|
+
${s}
|
|
275
|
+
</span>
|
|
276
|
+
</span>
|
|
277
|
+
`}render(){return this.ribbon?this.renderRibbonBadge():this.status?this.renderStatusBadge():this.renderCountBadge()}};c.styles=s,b([e({type:Number})],c.prototype,"count",void 0),b([e({type:Boolean})],c.prototype,"dot",void 0),b([e({type:Number,attribute:"overflow-count"})],c.prototype,"overflowCount",void 0),b([e({type:Boolean,attribute:"show-zero"})],c.prototype,"showZero",void 0),b([e({type:Array})],c.prototype,"offset",void 0),b([e({type:String})],c.prototype,"color",void 0),b([e({type:String})],c.prototype,"size",void 0),b([e({type:String})],c.prototype,"status",void 0),b([e({type:String})],c.prototype,"text",void 0),b([e({type:String})],c.prototype,"badgeTitle",void 0),b([e({type:String})],c.prototype,"ribbon",void 0),b([e({type:String,attribute:"ribbon-placement"})],c.prototype,"ribbonPlacement",void 0),c=b([i("nr-badge")],c);export{c as NrBadgeElement};
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './badge.component.js';\n"]}
|
package/package.json
CHANGED
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/badge/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrBadgeElement } from './badge.component.js';\nexport const NrBadge = createComponent({\n tagName: 'nr-badge',\n elementClass: NrBadgeElement,\n react: React,\n events: {},\n});\n"]}
|