@nuralyui/alert 0.0.5 → 0.0.7
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 -1
- package/alert.component.js.map +1 -1
- package/alert.style.js.map +1 -1
- package/alert.types.js.map +1 -1
- package/bundle.js +216 -2
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
package/alert.component.d.ts
CHANGED
|
@@ -92,7 +92,7 @@ export declare class NrAlertElement extends NrAlertElement_base {
|
|
|
92
92
|
* Check if alert has description
|
|
93
93
|
*/
|
|
94
94
|
private hasDescription;
|
|
95
|
-
render(): typeof nothing | import("lit").TemplateResult<1>;
|
|
95
|
+
render(): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
96
96
|
}
|
|
97
97
|
declare global {
|
|
98
98
|
interface HTMLElementTagNameMap {
|
package/alert.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.component.js","sourceRoot":"","sources":["
|
|
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"]}
|
package/alert.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"alert.style.js","sourceRoot":"","sources":["../../../../src/components/alert/alert.style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { css } from 'lit';\n\n/**\n * Alert 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-alert component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport const styles = css`\n :host {\n display: block;\n font-family: var(--nuraly-font-family);\n font-size: var(--nuraly-font-size-base);\n line-height: var(--nuraly-line-height-base);\n }\n\n :host([hidden]) {\n display: none;\n }\n\n .alert {\n position: relative;\n display: flex;\n align-items: flex-start;\n gap: var(--nuraly-alert-gap);\n padding: var(--nuraly-alert-padding);\n border: 1px solid transparent;\n border-radius: var(--nuraly-alert-border-radius);\n transition: var(--nuraly-alert-transition);\n }\n\n .alert--banner {\n border-radius: 0;\n border-left: none;\n border-right: none;\n }\n\n /* Alert type variants - Success */\n .alert--success {\n background-color: var(--nuraly-color-success-light, #f6ffed);\n border-color: var(--nuraly-color-success, #52c41a);\n color: var(--nuraly-color-success-dark, #389e0d);\n }\n\n .alert--success .alert__icon {\n color: var(--nuraly-color-success, #52c41a);\n }\n\n /* Alert type variants - Info */\n .alert--info {\n background-color: var(--nuraly-color-info-light, #e6f7ff);\n border-color: var(--nuraly-color-info, #1890ff);\n color: var(--nuraly-color-info-dark, #096dd9);\n }\n\n .alert--info .alert__icon {\n color: var(--nuraly-color-info, #1890ff);\n }\n\n /* Alert type variants - Warning */\n .alert--warning {\n background-color: var(--nuraly-color-warning-light, #fffbe6);\n border-color: var(--nuraly-color-warning, #faad14);\n color: var(--nuraly-color-warning-dark, #d48806);\n }\n\n .alert--warning .alert__icon {\n color: var(--nuraly-color-warning, #faad14);\n }\n\n /* Alert type variants - Error */\n .alert--error {\n background-color: var(--nuraly-color-error-light, #fff2f0);\n border-color: var(--nuraly-color-error, #ff4d4f);\n color: var(--nuraly-color-error-dark, #cf1322);\n }\n\n .alert--error .alert__icon {\n color: var(--nuraly-color-error, #ff4d4f);\n }\n\n /* Alert with description */\n .alert--with-description {\n padding: var(--nuraly-alert-padding-with-description);\n }\n\n .alert--with-description .alert__icon {\n font-size: 1.5rem;\n }\n\n .alert__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1rem;\n line-height: 1;\n }\n\n .alert__content {\n flex: 1;\n min-width: 0;\n }\n\n .alert__message {\n font-weight: var(--nuraly-font-weight-medium, 500);\n margin: 0;\n line-height: var(--nuraly-line-height-base);\n }\n\n .alert--with-description .alert__message {\n font-size: var(--nuraly-font-size-lg, 1.125rem);\n margin-bottom: var(--nuraly-spacing-1);\n }\n\n .alert__description {\n margin: var(--nuraly-spacing-1) 0 0;\n font-size: var(--nuraly-font-size-sm, 0.875rem);\n line-height: var(--nuraly-line-height-relaxed, 1.6);\n opacity: 0.85;\n }\n\n .alert__close {\n flex-shrink: 0;\n background: none;\n border: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: currentColor;\n opacity: 0.6;\n transition: opacity var(--nuraly-transition-fast) ease;\n line-height: 1;\n }\n\n .alert__close:hover {\n opacity: 1;\n }\n\n .alert__close:focus {\n outline: none;\n opacity: 1;\n }\n\n .alert__close:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n border-radius: var(--nuraly-border-radius-sm, 2px);\n }\n\n /* Animation for closing */\n @keyframes alertFadeOut {\n from {\n opacity: 1;\n max-height: 200px;\n }\n to {\n opacity: 0;\n max-height: 0;\n padding-top: 0;\n padding-bottom: 0;\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n\n .alert--closing {\n animation: alertFadeOut 0.3s ease forwards;\n overflow: hidden;\n }\n\n /* Responsive adjustments */\n @media (max-width: 768px) {\n .alert {\n padding: var(--nuraly-spacing-2) var(--nuraly-spacing-3);\n }\n\n .alert--with-description {\n padding: var(--nuraly-spacing-3) var(--nuraly-spacing-4);\n }\n }\n`;\n"]}
|
package/alert.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"alert.types.js","sourceRoot":"","sources":["../../../../src/components/alert/alert.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAoDH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Alert type variants\n */\nexport const enum AlertType {\n Success = 'success',\n Info = 'info',\n Warning = 'warning',\n Error = 'error',\n}\n\n/**\n * Alert configuration interface\n */\nexport interface AlertConfig {\n /** Alert message text */\n message: string;\n \n /** Alert type/variant */\n type?: AlertType;\n \n /** Optional description text */\n description?: string;\n \n /** Whether the alert can be closed */\n closable?: boolean;\n \n /** Custom icon name */\n icon?: string;\n \n /** Whether to show icon */\n showIcon?: boolean;\n \n /** Custom CSS class */\n customClass?: string;\n \n /** Callback when alert is closed */\n onClose?: () => void;\n \n /** Banner mode - full width with no border radius */\n banner?: boolean;\n}\n\n/**\n * Alert event detail\n */\nexport interface AlertEventDetail {\n message: string;\n type: AlertType;\n}\n\nexport const EMPTY_STRING = '';\n"]}
|
package/bundle.js
CHANGED
|
@@ -3,7 +3,183 @@ import{css as r,LitElement as e,nothing as t,html as a}from"lit";import{property
|
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
5
5
|
* SPDX-License-Identifier: MIT
|
|
6
|
-
*/const c=r
|
|
6
|
+
*/const c=r`
|
|
7
|
+
:host {
|
|
8
|
+
display: block;
|
|
9
|
+
font-family: var(--nuraly-font-family);
|
|
10
|
+
font-size: var(--nuraly-font-size-base);
|
|
11
|
+
line-height: var(--nuraly-line-height-base);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
:host([hidden]) {
|
|
15
|
+
display: none;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.alert {
|
|
19
|
+
position: relative;
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: flex-start;
|
|
22
|
+
gap: var(--nuraly-alert-gap);
|
|
23
|
+
padding: var(--nuraly-alert-padding);
|
|
24
|
+
border: 1px solid transparent;
|
|
25
|
+
border-radius: var(--nuraly-alert-border-radius);
|
|
26
|
+
transition: var(--nuraly-alert-transition);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.alert--banner {
|
|
30
|
+
border-radius: 0;
|
|
31
|
+
border-left: none;
|
|
32
|
+
border-right: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Alert type variants - Success */
|
|
36
|
+
.alert--success {
|
|
37
|
+
background-color: var(--nuraly-color-success-light, #f6ffed);
|
|
38
|
+
border-color: var(--nuraly-color-success, #52c41a);
|
|
39
|
+
color: var(--nuraly-color-success-dark, #389e0d);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.alert--success .alert__icon {
|
|
43
|
+
color: var(--nuraly-color-success, #52c41a);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Alert type variants - Info */
|
|
47
|
+
.alert--info {
|
|
48
|
+
background-color: var(--nuraly-color-info-light, #e6f7ff);
|
|
49
|
+
border-color: var(--nuraly-color-info, #1890ff);
|
|
50
|
+
color: var(--nuraly-color-info-dark, #096dd9);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.alert--info .alert__icon {
|
|
54
|
+
color: var(--nuraly-color-info, #1890ff);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Alert type variants - Warning */
|
|
58
|
+
.alert--warning {
|
|
59
|
+
background-color: var(--nuraly-color-warning-light, #fffbe6);
|
|
60
|
+
border-color: var(--nuraly-color-warning, #faad14);
|
|
61
|
+
color: var(--nuraly-color-warning-dark, #d48806);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.alert--warning .alert__icon {
|
|
65
|
+
color: var(--nuraly-color-warning, #faad14);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Alert type variants - Error */
|
|
69
|
+
.alert--error {
|
|
70
|
+
background-color: var(--nuraly-color-error-light, #fff2f0);
|
|
71
|
+
border-color: var(--nuraly-color-error, #ff4d4f);
|
|
72
|
+
color: var(--nuraly-color-error-dark, #cf1322);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.alert--error .alert__icon {
|
|
76
|
+
color: var(--nuraly-color-error, #ff4d4f);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Alert with description */
|
|
80
|
+
.alert--with-description {
|
|
81
|
+
padding: var(--nuraly-alert-padding-with-description);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.alert--with-description .alert__icon {
|
|
85
|
+
font-size: 1.5rem;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.alert__icon {
|
|
89
|
+
flex-shrink: 0;
|
|
90
|
+
display: flex;
|
|
91
|
+
align-items: center;
|
|
92
|
+
justify-content: center;
|
|
93
|
+
font-size: 1rem;
|
|
94
|
+
line-height: 1;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.alert__content {
|
|
98
|
+
flex: 1;
|
|
99
|
+
min-width: 0;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.alert__message {
|
|
103
|
+
font-weight: var(--nuraly-font-weight-medium, 500);
|
|
104
|
+
margin: 0;
|
|
105
|
+
line-height: var(--nuraly-line-height-base);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.alert--with-description .alert__message {
|
|
109
|
+
font-size: var(--nuraly-font-size-lg, 1.125rem);
|
|
110
|
+
margin-bottom: var(--nuraly-spacing-1);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.alert__description {
|
|
114
|
+
margin: var(--nuraly-spacing-1) 0 0;
|
|
115
|
+
font-size: var(--nuraly-font-size-sm, 0.875rem);
|
|
116
|
+
line-height: var(--nuraly-line-height-relaxed, 1.6);
|
|
117
|
+
opacity: 0.85;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.alert__close {
|
|
121
|
+
flex-shrink: 0;
|
|
122
|
+
background: none;
|
|
123
|
+
border: none;
|
|
124
|
+
padding: 0;
|
|
125
|
+
margin: 0;
|
|
126
|
+
cursor: pointer;
|
|
127
|
+
display: flex;
|
|
128
|
+
align-items: center;
|
|
129
|
+
justify-content: center;
|
|
130
|
+
color: currentColor;
|
|
131
|
+
opacity: 0.6;
|
|
132
|
+
transition: opacity var(--nuraly-transition-fast) ease;
|
|
133
|
+
line-height: 1;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.alert__close:hover {
|
|
137
|
+
opacity: 1;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.alert__close:focus {
|
|
141
|
+
outline: none;
|
|
142
|
+
opacity: 1;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.alert__close:focus-visible {
|
|
146
|
+
outline: 2px solid currentColor;
|
|
147
|
+
outline-offset: 2px;
|
|
148
|
+
border-radius: var(--nuraly-border-radius-sm, 2px);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* Animation for closing */
|
|
152
|
+
@keyframes alertFadeOut {
|
|
153
|
+
from {
|
|
154
|
+
opacity: 1;
|
|
155
|
+
max-height: 200px;
|
|
156
|
+
}
|
|
157
|
+
to {
|
|
158
|
+
opacity: 0;
|
|
159
|
+
max-height: 0;
|
|
160
|
+
padding-top: 0;
|
|
161
|
+
padding-bottom: 0;
|
|
162
|
+
margin-top: 0;
|
|
163
|
+
margin-bottom: 0;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.alert--closing {
|
|
168
|
+
animation: alertFadeOut 0.3s ease forwards;
|
|
169
|
+
overflow: hidden;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* Responsive adjustments */
|
|
173
|
+
@media (max-width: 768px) {
|
|
174
|
+
.alert {
|
|
175
|
+
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-3);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.alert--with-description {
|
|
179
|
+
padding: var(--nuraly-spacing-3) var(--nuraly-spacing-4);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
`
|
|
7
183
|
/**
|
|
8
184
|
* @license
|
|
9
185
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
@@ -14,4 +190,42 @@ import{css as r,LitElement as e,nothing as t,html as a}from"lit";import{property
|
|
|
14
190
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
15
191
|
* SPDX-License-Identifier: MIT
|
|
16
192
|
*/
|
|
17
|
-
var u=function(r,e,t,a){for(var i,o=arguments.length,n=o<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,t):a,l=r.length-1;l>=0;l--)(i=r[l])&&(n=(o<3?i(n):o>3?i(e,t,n):i(e,t))||n);return o>3&&n&&Object.defineProperty(e,t,n),n};let h=class extends(s(e)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.message="",this.type="info",this.description="",this.closable=!1,this.showIcon=!1,this.icon="",this.banner=!1,this.visible=!0,this.closing=!1}close(){this.visible&&!this.closing&&(this.closing=!0,setTimeout((
|
|
193
|
+
var u=function(r,e,t,a){for(var i,o=arguments.length,n=o<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,t):a,l=r.length-1;l>=0;l--)(i=r[l])&&(n=(o<3?i(n):o>3?i(e,t,n):i(e,t))||n);return o>3&&n&&Object.defineProperty(e,t,n),n};let h=class extends(s(e)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.message="",this.type="info",this.description="",this.closable=!1,this.showIcon=!1,this.icon="",this.banner=!1,this.visible=!0,this.closing=!1}close(){this.visible&&!this.closing&&(this.closing=!0,setTimeout(()=>{this.visible=!1,this.closing=!1,this.dispatchEvent(new CustomEvent("nr-alert-close",{detail:{message:this.message,type:this.type},bubbles:!0,composed:!0}))},300))}handleCloseClick(r){r.stopPropagation(),this.close()}getDefaultIcon(){if(this.icon)return this.icon;switch(this.type){case"success":return"check-circle";case"info":return"info";case"warning":return"alert-triangle";case"error":return"x-circle";default:return""}}hasDescription(){return!!this.description}render(){if(!this.visible)return t;const r={alert:!0,[`alert--${this.type}`]:!0,"alert--with-description":this.hasDescription(),"alert--banner":this.banner,"alert--closing":this.closing};return a`
|
|
194
|
+
<div class=${l(r)} role="alert">
|
|
195
|
+
${this.showIcon?a`
|
|
196
|
+
<div class="alert__icon">
|
|
197
|
+
<slot name="icon">
|
|
198
|
+
<nr-icon
|
|
199
|
+
name=${this.getDefaultIcon()}
|
|
200
|
+
size=${this.hasDescription()?"large":"small"}
|
|
201
|
+
></nr-icon>
|
|
202
|
+
</slot>
|
|
203
|
+
</div>
|
|
204
|
+
`:t}
|
|
205
|
+
|
|
206
|
+
<div class="alert__content">
|
|
207
|
+
${this.message?a`
|
|
208
|
+
<div class="alert__message">${this.message}</div>
|
|
209
|
+
`:t}
|
|
210
|
+
|
|
211
|
+
${this.description?a`
|
|
212
|
+
<div class="alert__description">${this.description}</div>
|
|
213
|
+
`:t}
|
|
214
|
+
|
|
215
|
+
<slot></slot>
|
|
216
|
+
|
|
217
|
+
<slot name="action"></slot>
|
|
218
|
+
</div>
|
|
219
|
+
|
|
220
|
+
${this.closable?a`
|
|
221
|
+
<button
|
|
222
|
+
class="alert__close"
|
|
223
|
+
@click=${this.handleCloseClick}
|
|
224
|
+
aria-label="Close alert"
|
|
225
|
+
type="button"
|
|
226
|
+
>
|
|
227
|
+
<nr-icon name="x" size="small"></nr-icon>
|
|
228
|
+
</button>
|
|
229
|
+
`:t}
|
|
230
|
+
</div>
|
|
231
|
+
`}};h.styles=c,u([i({type:String})],h.prototype,"message",void 0),u([i({type:String,reflect:!0})],h.prototype,"type",void 0),u([i({type:String})],h.prototype,"description",void 0),u([i({type:Boolean})],h.prototype,"closable",void 0),u([i({type:Boolean,attribute:"show-icon"})],h.prototype,"showIcon",void 0),u([i({type:String})],h.prototype,"icon",void 0),u([i({type:Boolean})],h.prototype,"banner",void 0),u([o()],h.prototype,"visible",void 0),u([o()],h.prototype,"closing",void 0),h=u([n("nr-alert")],h);export{d as EMPTY_STRING,h as NrAlertElement};
|
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/alert/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport * from './alert.component.js';\nexport * from './alert.types.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/alert/react.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,gBAAgB,EAAE,gBAAgB;KACnC;CACF,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\nimport { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrAlertElement } from './alert.component.js';\n\nexport const NrAlert = createComponent({\n tagName: 'nr-alert',\n elementClass: NrAlertElement,\n react: React,\n events: {\n 'nr-alert-close': 'nr-alert-close',\n },\n});\n"]}
|