@dile/iconlib 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/dile-lucide-badge.js +3 -0
- package/package.json +2 -2
- package/src/DileLucideBadge.js +49 -0
- package/src/lucideBadgeStyles.js +79 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dile/iconlib",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "Icon Component Library based on popular libraries",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"UI",
|
|
@@ -25,5 +25,5 @@
|
|
|
25
25
|
"publishConfig": {
|
|
26
26
|
"access": "public"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "56f58ba38c13479d0eb4e2a4e7ae8ad01c2b308c"
|
|
29
29
|
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { badgeStyles } from "./lucideBadgeStyles.js";
|
|
2
|
+
|
|
3
|
+
export class DileLucideBadge extends HTMLElement {
|
|
4
|
+
constructor() {
|
|
5
|
+
super();
|
|
6
|
+
this.attachShadow({ mode: 'open' });
|
|
7
|
+
this.shadowRoot.adoptedStyleSheets = [badgeStyles];
|
|
8
|
+
this.icon = "dot";
|
|
9
|
+
this.iconLabel = null;
|
|
10
|
+
this.variant = null;
|
|
11
|
+
this.rounded = false;
|
|
12
|
+
this.render();
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
render() {
|
|
16
|
+
const iconAriaLabel = this.iconLabel || this.icon;
|
|
17
|
+
this.shadowRoot.innerHTML = `
|
|
18
|
+
<div class="badge-container">
|
|
19
|
+
<div class="icon-wrapper" role="img" aria-label="${iconAriaLabel}">
|
|
20
|
+
<dile-lucide-icon icon="${this.icon}"></dile-lucide-icon>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="text-wrapper">
|
|
23
|
+
<slot></slot>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
`;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
static get observedAttributes() {
|
|
30
|
+
return ['icon', 'icon-label', 'variant', 'rounded'];
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
34
|
+
if (name === 'icon' && newValue !== null) {
|
|
35
|
+
this.icon = newValue;
|
|
36
|
+
this.render();
|
|
37
|
+
}
|
|
38
|
+
if (name === 'icon-label') {
|
|
39
|
+
this.iconLabel = newValue;
|
|
40
|
+
this.render();
|
|
41
|
+
}
|
|
42
|
+
if (name === 'variant' && newValue !== null) {
|
|
43
|
+
this.variant = newValue;
|
|
44
|
+
}
|
|
45
|
+
if (name === 'rounded') {
|
|
46
|
+
this.rounded = newValue !== null;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
export const badgeStyles = new CSSStyleSheet();
|
|
2
|
+
badgeStyles.replaceSync(`
|
|
3
|
+
:host {
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
gap: var(--dile-lucide-badge-gap, 0.5rem);
|
|
7
|
+
padding: var(--dile-lucide-badge-padding, 0.375rem 0.75rem);
|
|
8
|
+
border-radius: var(--dile-lucide-badge-border-radius, 9999px);
|
|
9
|
+
background-color: var(--dile-lucide-badge-color, var(--dile-primary-color, #f3f3ae));
|
|
10
|
+
color: var(--dile-lucide-badge-on-color, var(--dile-on-primary-color, #303030));
|
|
11
|
+
--dile-icon-color: var(--dile-lucide-badge-on-color, var(--dile-on-primary-color, #303030));
|
|
12
|
+
--dile-icon-size: var(--dile-lucide-badge-icon-size, 18px);
|
|
13
|
+
font-size: var(--dile-lucide-badge-font-size, 0.8rem);
|
|
14
|
+
font-weight: var(--dile-lucide-badge-font-weight, 500);
|
|
15
|
+
border: var(--dile-lucide-badge-border-width, 0px) solid var(--dile-lucide-badge-border-color, transparent);
|
|
16
|
+
transition-duration: var(--dile-lucide-badge-transition-duration, 0.3s);
|
|
17
|
+
transition-timing-function: ease-in-out;
|
|
18
|
+
transition-property: background-color, color;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
:host([variant="primary"]) {
|
|
22
|
+
background-color: var(--dile-lucide-badge-primary, var(--dile-primary-color, #f3f3ae));
|
|
23
|
+
color: var(--dile-lucide-badge-on-primary, var(--dile-on-primary-color, #303030));
|
|
24
|
+
--dile-icon-color: var(--dile-lucide-badge-on-primary, var(--dile-on-primary-color, #303030));
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:host([variant="secondary"]) {
|
|
28
|
+
background-color: var(--dile-lucide-badge-secondary, var(--dile-secondary-color, #27a744));
|
|
29
|
+
color: var(--dile-lucide-badge-on-secondary, var(--dile-on-secondary-color, #ffffff));
|
|
30
|
+
--dile-icon-color: var(--dile-lucide-badge-on-secondary, var(--dile-on-secondary-color, #ffffff));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:host([variant="danger"]) {
|
|
34
|
+
background-color: var(--dile-lucide-badge-danger, var(--dile-danger-color, #e34a1b));
|
|
35
|
+
color: var(--dile-lucide-badge-on-danger, var(--dile-on-danger-color, #ffffff));
|
|
36
|
+
--dile-icon-color: var(--dile-lucide-badge-on-danger, var(--dile-on-danger-color, #ffffff));
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:host([variant="error"]) {
|
|
40
|
+
background-color: var(--dile-lucide-badge-error, var(--dile-alert-error-color, #cf3535));
|
|
41
|
+
color: var(--dile-lucide-badge-on-error, var(--dile-on-alert-color, #ffffff));
|
|
42
|
+
--dile-icon-color: var(--dile-lucide-badge-on-error, var(--dile-on-alert-color, #ffffff));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
:host([variant="success"]) {
|
|
46
|
+
background-color: var(--dile-lucide-badge-success, var(--dile-alert-success-color, #00900f));
|
|
47
|
+
color: var(--dile-lucide-badge-on-success, var(--dile-on-alert-color, #ffffff));
|
|
48
|
+
--dile-icon-color: var(--dile-lucide-badge-on-success, var(--dile-on-alert-color, #ffffff));
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
:host([variant="warning"]) {
|
|
52
|
+
background-color: var(--dile-lucide-badge-warning, var(--dile-alert-warning-color, #d7b740));
|
|
53
|
+
color: var(--dile-lucide-badge-on-warning, var(--dile-on-alert-color, #ffffff));
|
|
54
|
+
--dile-icon-color: var(--dile-lucide-badge-on-warning, var(--dile-on-alert-color, #ffffff));
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
:host([variant="soft"]) {
|
|
58
|
+
background-color: var(--dile-lucide-badge-soft, #2a7a9f);
|
|
59
|
+
color: var(--dile-lucide-badge-on-soft, #ffffff);
|
|
60
|
+
--dile-icon-color: var(--dile-lucide-badge-on-soft, #ffffff);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.badge-container {
|
|
64
|
+
display: inherit;
|
|
65
|
+
align-items: inherit;
|
|
66
|
+
gap: inherit;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.icon-wrapper {
|
|
70
|
+
display: flex;
|
|
71
|
+
align-items: center;
|
|
72
|
+
line-height: 1;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.text-wrapper {
|
|
76
|
+
display: flex;
|
|
77
|
+
align-items: center;
|
|
78
|
+
}
|
|
79
|
+
`);
|