@outbook/webcomponents-notification-alert 1.1.1 → 1.1.2
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
CHANGED
|
@@ -13,28 +13,28 @@ npm install @outbook/webcomponents-notification-alert
|
|
|
13
13
|
### As a Lit Element (using the wrapper function)
|
|
14
14
|
|
|
15
15
|
```javascript
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
16
|
+
import {html} from 'lit';
|
|
17
|
+
import {NotificationAlert} from '@outbook/webcomponents-notification-alert';
|
|
18
18
|
|
|
19
19
|
function render() {
|
|
20
20
|
return html`
|
|
21
21
|
${NotificationAlert({
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
type: 'info',
|
|
23
|
+
text: 'This is an informational message.',
|
|
24
|
+
})}
|
|
25
25
|
${NotificationAlert({
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
type: 'success',
|
|
27
|
+
text: 'Operation completed successfully!',
|
|
28
|
+
})}
|
|
29
29
|
${NotificationAlert({
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
type: 'error',
|
|
31
|
+
text: 'An error occurred.',
|
|
32
|
+
})}
|
|
33
33
|
${NotificationAlert({
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
34
|
+
type: 'warning',
|
|
35
|
+
text: 'Proceed with caution.',
|
|
36
|
+
size: 'small',
|
|
37
|
+
})}
|
|
38
38
|
`;
|
|
39
39
|
}
|
|
40
40
|
```
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import { css } from 'lit';
|
|
3
|
+
|
|
4
|
+
export default css`:host{display:block;--_font-size: 1.25rem;--_line-height: 2rem;--_icon-size: 2rem;--_color: light-dark( oklch(20.5% 0 0deg), oklch(92.2% 0 0deg) )}:host([type=info]){--_color: light-dark( oklch(39.1% 0.09 240.876deg), oklch(90.1% 0.058 230.902deg) )}:host([type=success]){--_color: light-dark( oklch(39.3% 0.095 152.535deg), oklch(92.5% 0.084 155.995deg) )}:host([type=error]){--_color: light-dark( oklch(39.6% 0.141 25.723deg), oklch(88.5% 0.062 18.334deg) )}:host([type=warning]){--_color: light-dark( oklch(41.4% 0.112 45.904deg), oklch(92.4% 0.12 95.746deg) )}:host([size=small]){--_font-size: 1rem;--_line-height: 1.5rem;--_icon-size: 1.5rem}.notification-alert{display:flex;box-sizing:border-box}.notification-alert__icon{width:var(--_icon-size);height:var(--_icon-size);margin-right:0.5rem}.notification-alert__text{font-size:var(--_font-size);line-height:var(--_line-height);margin:0}.notification-alert__icon,.notification-alert__text{color:var(--_color)}`;
|
package/notification-alert.js
CHANGED
|
@@ -4,7 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
4
4
|
import { TypeIcon } from '@outbook/webcomponents-type-icon/shadow';
|
|
5
5
|
import { ICON_LIST } from './_lib/icon-list.js';
|
|
6
6
|
import { SIZE_LIST } from './_lib/constants.js';
|
|
7
|
-
import styleComponent from './
|
|
7
|
+
import styleComponent from './_style/notification-alert.style.js';
|
|
8
8
|
|
|
9
9
|
class ComponentNotificationAlert extends LitElement {
|
|
10
10
|
static properties = {
|
package/package.json
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@outbook/webcomponents-notification-alert",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"main": "notification-alert.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
7
7
|
"scripts": {},
|
|
8
8
|
"bugs": {
|
|
9
|
-
"url": "https://gitlab.com/arr2019/
|
|
9
|
+
"url": "https://gitlab.com/arr2019/outbook-toolkit/issues"
|
|
10
10
|
},
|
|
11
|
-
"homepage": "https://gitlab.com/arr2019/web-components/
|
|
11
|
+
"homepage": "https://gitlab.com/arr2019/outbook-toolkit/pkg/web-components/notification-alert#readme",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
14
|
-
"url": "git+https://gitlab.com/arr2019/
|
|
15
|
-
"folder": "pkg/notification-alert"
|
|
14
|
+
"url": "git+https://gitlab.com/arr2019/outbook-toolkit.git",
|
|
15
|
+
"folder": "pkg/web-components/notification-alert"
|
|
16
16
|
},
|
|
17
17
|
"publishConfig": {
|
|
18
|
-
"registry": "https://registry.npmjs.
|
|
18
|
+
"registry": "https://registry.npmjs.com/"
|
|
19
19
|
},
|
|
20
20
|
"author": "Antonio Rodríguez",
|
|
21
21
|
"license": "Apache-2.0",
|
|
22
22
|
"description": "Web components notification-alert",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@outbook/webcomponents-type-icon": ">=1.1.
|
|
24
|
+
"@outbook/webcomponents-type-icon": ">=1.1.3"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@outbook/colorful": ">=1.1.
|
|
28
|
-
"@outbook/design-decisions": ">=1.1.
|
|
27
|
+
"@outbook/colorful": ">=1.1.4",
|
|
28
|
+
"@outbook/design-decisions": ">=1.1.7"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
31
31
|
"sass": "^1.97.2",
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/* eslint-disable */
|
|
2
|
-
import { css } from 'lit';
|
|
3
|
-
|
|
4
|
-
export default css`:host{display:block;--alert--font-size: 1.25rem;--alert--line-height: 2rem;--alert--icon-size: 2rem;--alert--color: light-dark( oklch(20.5% 0 0deg), oklch(92.2% 0 0deg) )}:host([type=info]){--alert--color: light-dark( oklch(39.1% 0.09 240.876deg), oklch(90.1% 0.058 230.902deg) )}:host([type=success]){--alert--color: light-dark( oklch(39.3% 0.095 152.535deg), oklch(92.5% 0.084 155.995deg) )}:host([type=error]){--alert--color: light-dark( oklch(39.6% 0.141 25.723deg), oklch(88.5% 0.062 18.334deg) )}:host([type=warning]){--alert--color: light-dark( oklch(41.4% 0.112 45.904deg), oklch(92.4% 0.12 95.746deg) )}:host([size=small]){--alert--font-size: 1rem;--alert--line-height: 1.5rem;--alert--icon-size: 1.5rem}.notification-alert{display:flex;box-sizing:border-box}.notification-alert__icon{width:var(--alert--icon-size);height:var(--alert--icon-size);margin-right:0.5rem}.notification-alert__text{font-size:var(--alert--font-size);line-height:var(--alert--line-height);margin:0}.notification-alert__icon,.notification-alert__text{color:var(--alert--color)}`;
|