@nuralyui/alert 0.0.3 → 0.0.5
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/alert.component.d.ts +1 -2
- package/alert.component.js +0 -2
- package/alert.component.js.map +1 -1
- package/bundle.js +4 -580
- package/package.json +1 -1
package/alert.component.d.ts
CHANGED
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { LitElement, nothing } from 'lit';
|
|
7
7
|
import { AlertType } from './alert.types.js';
|
|
8
|
-
import '../icon/icon.component.js';
|
|
9
8
|
declare const NrAlertElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
10
9
|
/**
|
|
11
10
|
* Alert component for displaying important messages.
|
|
@@ -93,7 +92,7 @@ export declare class NrAlertElement extends NrAlertElement_base {
|
|
|
93
92
|
* Check if alert has description
|
|
94
93
|
*/
|
|
95
94
|
private hasDescription;
|
|
96
|
-
render(): import("lit").TemplateResult<1
|
|
95
|
+
render(): typeof nothing | import("lit").TemplateResult<1>;
|
|
97
96
|
}
|
|
98
97
|
declare global {
|
|
99
98
|
interface HTMLElementTagNameMap {
|
package/alert.component.js
CHANGED
|
@@ -15,8 +15,6 @@ import { classMap } from 'lit/directives/class-map.js';
|
|
|
15
15
|
import { styles } from './alert.style.js';
|
|
16
16
|
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
17
17
|
import { EMPTY_STRING } from './alert.types.js';
|
|
18
|
-
// Import required components
|
|
19
|
-
import '../icon/icon.component.js';
|
|
20
18
|
/**
|
|
21
19
|
* Alert component for displaying important messages.
|
|
22
20
|
*
|
package/alert.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.component.js","sourceRoot":"","sources":["../../../src/components/alert/alert.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAGL,YAAY,EACb,MAAM,kBAAkB,CAAC;AAE1B
|
|
1
|
+
{"version":3,"file":"alert.component.js","sourceRoot":"","sources":["../../../src/components/alert/alert.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 { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './alert.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport {\n AlertType,\n AlertEventDetail,\n EMPTY_STRING\n} from './alert.types.js';\n\n/**\n * Alert component for displaying important messages.\n * \n /**\n * Provides a flexible alert/banner system with multiple types.\n * The alert component is used to display important messages, warnings, and notifications\n * Supports different severity levels, optional icons, descriptions, and closable functionality.\n * \n * @example\n * ```html\n * <!-- Basic alert -->\n * <nr-alert message=\"Success message\" type=\"success\"></nr-alert>\n * \n * <!-- Alert with description -->\n * <nr-alert \n * message=\"Warning title\" \n * description=\"This is a detailed warning description\"\n * type=\"warning\"\n * show-icon\n * ></nr-alert>\n * \n * <!-- Closable alert -->\n * <nr-alert \n * message=\"Dismissible message\" \n * type=\"info\"\n * closable\n * show-icon\n * ></nr-alert>\n * \n * <!-- Banner mode -->\n * <nr-alert \n * message=\"Banner alert\" \n * type=\"error\"\n * banner\n * show-icon\n * ></nr-alert>\n * ```\n * \n * @fires nr-alert-close - Fired when alert is closed\n * \n * @slot - Default slot for custom content (overrides message/description)\n * @slot icon - Custom icon slot\n * @slot action - Custom action buttons or links\n * \n * @cssproperty --nuraly-color-success - Success color\n * @cssproperty --nuraly-color-info - Info color\n * @cssproperty --nuraly-color-warning - Warning color\n * @cssproperty --nuraly-color-error - Error color\n */\n@customElement('nr-alert')\nexport class NrAlertElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n override requiredComponents = ['nr-icon'];\n\n /** Alert message text */\n @property({ type: String })\n message = EMPTY_STRING;\n\n /** Alert type/variant */\n @property({ type: String, reflect: true })\n type: AlertType = AlertType.Info;\n\n /** Optional description text */\n @property({ type: String })\n description = EMPTY_STRING;\n\n /** Whether the alert can be closed */\n @property({ type: Boolean })\n closable = false;\n\n /** Whether to show icon */\n @property({ type: Boolean, attribute: 'show-icon' })\n showIcon = false;\n\n /** Custom icon name */\n @property({ type: String })\n icon = EMPTY_STRING;\n\n /** Banner mode - full width with no border radius */\n @property({ type: Boolean })\n banner = false;\n\n /** Internal state: whether alert is visible */\n @state()\n private visible = true;\n\n /** Internal state: whether alert is closing */\n @state()\n private closing = false;\n\n /**\n * Close the alert\n */\n close(): void {\n if (!this.visible || this.closing) return;\n\n this.closing = true;\n \n // Wait for animation to complete before hiding\n setTimeout(() => {\n this.visible = false;\n this.closing = false;\n \n // Emit close event\n this.dispatchEvent(new CustomEvent<AlertEventDetail>('nr-alert-close', {\n detail: { message: this.message, type: this.type },\n bubbles: true,\n composed: true\n }));\n }, 300); // Match animation duration\n }\n\n /**\n * Handle close button click\n */\n private handleCloseClick(event: Event): void {\n event.stopPropagation();\n this.close();\n }\n\n /**\n * Get default icon for alert type\n */\n private getDefaultIcon(): string {\n if (this.icon) return this.icon;\n \n switch (this.type) {\n case AlertType.Success:\n return 'check-circle';\n case AlertType.Info:\n return 'info';\n case AlertType.Warning:\n return 'alert-triangle';\n case AlertType.Error:\n return 'x-circle';\n default:\n return EMPTY_STRING;\n }\n }\n\n /**\n * Check if alert has description\n */\n private hasDescription(): boolean {\n return !!this.description;\n }\n\n override render() {\n if (!this.visible) {\n return nothing;\n }\n\n const classes = {\n 'alert': true,\n [`alert--${this.type}`]: true,\n 'alert--with-description': this.hasDescription(),\n 'alert--banner': this.banner,\n 'alert--closing': this.closing,\n };\n\n return html`\n <div class=${classMap(classes)} role=\"alert\">\n ${this.showIcon ? html`\n <div class=\"alert__icon\">\n <slot name=\"icon\">\n <nr-icon \n name=${this.getDefaultIcon()} \n size=${this.hasDescription() ? 'large' : 'small'}\n ></nr-icon>\n </slot>\n </div>\n ` : nothing}\n \n <div class=\"alert__content\">\n ${this.message ? html`\n <div class=\"alert__message\">${this.message}</div>\n ` : nothing}\n \n ${this.description ? html`\n <div class=\"alert__description\">${this.description}</div>\n ` : nothing}\n \n <slot></slot>\n \n <slot name=\"action\"></slot>\n </div>\n \n ${this.closable ? html`\n <button\n class=\"alert__close\"\n @click=${this.handleCloseClick}\n aria-label=\"Close alert\"\n type=\"button\"\n >\n <nr-icon name=\"x\" size=\"small\"></nr-icon>\n </button>\n ` : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-alert': NrAlertElement;\n }\n}\n"]}
|