@aquera/nile-elements 0.0.74 → 0.0.75
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 +6 -0
- package/dist/index.iife.js +157 -206
- package/dist/nile-calendar/nile-calendar.css.cjs.js +1 -1
- package/dist/nile-calendar/nile-calendar.css.cjs.js.map +1 -1
- package/dist/nile-calendar/nile-calendar.css.esm.js +8 -0
- package/dist/nile-card/nile-card.css.cjs.js +1 -1
- package/dist/nile-card/nile-card.css.cjs.js.map +1 -1
- package/dist/nile-card/nile-card.css.esm.js +4 -4
- package/dist/nile-checkbox/nile-checkbox.cjs.js +1 -1
- package/dist/nile-checkbox/nile-checkbox.cjs.js.map +1 -1
- package/dist/nile-checkbox/nile-checkbox.css.cjs.js +1 -1
- package/dist/nile-checkbox/nile-checkbox.css.cjs.js.map +1 -1
- package/dist/nile-checkbox/nile-checkbox.css.esm.js +30 -47
- package/dist/nile-checkbox/nile-checkbox.esm.js +56 -54
- package/dist/nile-tag/nile-tag.cjs.js +1 -1
- package/dist/nile-tag/nile-tag.cjs.js.map +1 -1
- package/dist/nile-tag/nile-tag.css.cjs.js +1 -1
- package/dist/nile-tag/nile-tag.css.cjs.js.map +1 -1
- package/dist/nile-tag/nile-tag.css.esm.js +50 -91
- package/dist/nile-tag/nile-tag.esm.js +13 -14
- package/dist/src/nile-calendar/nile-calendar.css.js +8 -0
- package/dist/src/nile-calendar/nile-calendar.css.js.map +1 -1
- package/dist/src/nile-card/nile-card.css.js +2 -2
- package/dist/src/nile-card/nile-card.css.js.map +1 -1
- package/dist/src/nile-checkbox/nile-checkbox.css.js +30 -47
- package/dist/src/nile-checkbox/nile-checkbox.css.js.map +1 -1
- package/dist/src/nile-checkbox/nile-checkbox.d.ts +2 -4
- package/dist/src/nile-checkbox/nile-checkbox.js +63 -67
- package/dist/src/nile-checkbox/nile-checkbox.js.map +1 -1
- package/dist/src/nile-tag/nile-tag.css.js +48 -89
- package/dist/src/nile-tag/nile-tag.css.js.map +1 -1
- package/dist/src/nile-tag/nile-tag.d.ts +2 -1
- package/dist/src/nile-tag/nile-tag.js +30 -13
- package/dist/src/nile-tag/nile-tag.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-calendar/nile-calendar.css.ts +8 -0
- package/src/nile-card/nile-card.css.ts +2 -2
- package/src/nile-checkbox/nile-checkbox.css.ts +34 -51
- package/src/nile-checkbox/nile-checkbox.ts +111 -108
- package/src/nile-tag/nile-tag.css.ts +48 -89
- package/src/nile-tag/nile-tag.ts +34 -15
|
@@ -11,21 +11,22 @@ import { css } from 'lit-element';
|
|
|
11
11
|
export const styles = css `
|
|
12
12
|
:host {
|
|
13
13
|
display: inline-block;
|
|
14
|
-
--nile-remove-icon-color: var(--nile-colors-blue-500);
|
|
15
14
|
}
|
|
16
15
|
|
|
17
16
|
.tag {
|
|
18
17
|
display: flex;
|
|
19
18
|
align-items: center;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
gap: 3px;
|
|
19
|
+
border: solid 2px;
|
|
20
|
+
line-height: 1;
|
|
23
21
|
white-space: nowrap;
|
|
24
22
|
user-select: none;
|
|
25
23
|
border-radius: 4px;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
24
|
+
gap: 6px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.tag__remove::part(base) {
|
|
28
|
+
color: inherit;
|
|
29
|
+
padding: 0;
|
|
29
30
|
}
|
|
30
31
|
|
|
31
32
|
/*
|
|
@@ -33,120 +34,101 @@ export const styles = css `
|
|
|
33
34
|
*/
|
|
34
35
|
|
|
35
36
|
.tag--primary {
|
|
36
|
-
background: #
|
|
37
|
-
color: #
|
|
38
|
-
|
|
37
|
+
background: #005EA6;
|
|
38
|
+
border-color: #005EA6;
|
|
39
|
+
border: 2px solid #005EA6;
|
|
40
|
+
color: #FFF;
|
|
39
41
|
}
|
|
40
42
|
|
|
41
43
|
.tag--primary:hover {
|
|
42
|
-
|
|
44
|
+
border: 2px solid rgba(0, 94, 166, 0.50);
|
|
43
45
|
}
|
|
44
46
|
|
|
45
|
-
.tag--primary:active > nile-icon {
|
|
47
|
+
.tag--primary:active > nile-icon-button {
|
|
46
48
|
color: hsl(200.4 98% 39.4%);
|
|
47
49
|
}
|
|
48
50
|
|
|
49
51
|
.tag--success {
|
|
50
|
-
background: #
|
|
52
|
+
background: #A5F3E1;
|
|
53
|
+
border: 2px solid #A5F3E1;
|
|
51
54
|
color: #000;
|
|
52
|
-
--nile-remove-icon-color: var(--nile-colors-green-500);
|
|
53
55
|
}
|
|
54
56
|
|
|
55
57
|
.tag--success:hover {
|
|
56
|
-
|
|
58
|
+
border: 2px solid #43E5C0;
|
|
57
59
|
}
|
|
58
60
|
|
|
59
|
-
.tag--success:active > nile-icon {
|
|
61
|
+
.tag--success:active > nile-icon-button {
|
|
60
62
|
color: hsl(142.1 76.2% 36.3%);
|
|
61
63
|
}
|
|
62
64
|
|
|
63
65
|
.tag--normal {
|
|
64
|
-
background: #
|
|
66
|
+
background: #E5E9EB;
|
|
67
|
+
border: 2px solid #E5E9EB;
|
|
65
68
|
color: #000;
|
|
66
|
-
--nile-remove-icon-color: var(--nile-colors-dark-500);
|
|
67
69
|
}
|
|
68
70
|
|
|
69
71
|
.tag--normal:hover {
|
|
70
|
-
|
|
72
|
+
border: 2px solid #C7CED4;
|
|
71
73
|
}
|
|
72
74
|
|
|
73
|
-
|
|
75
|
+
|
|
76
|
+
.tag--normal:active > nile-icon-button {
|
|
74
77
|
color: hsl(240 5.2% 33.9%);
|
|
75
78
|
}
|
|
76
79
|
|
|
77
80
|
.tag--warning {
|
|
78
|
-
background: #
|
|
81
|
+
background: #F3E0A5;
|
|
82
|
+
border: 2px solid #F3E0A5;
|
|
79
83
|
color: #000;
|
|
80
|
-
--nile-remove-icon-color: var(--nile-colors-yellow-500);
|
|
81
84
|
}
|
|
82
85
|
|
|
83
86
|
.tag--warning:hover {
|
|
84
|
-
|
|
87
|
+
border: 2px solid #E5BF43;
|
|
85
88
|
}
|
|
86
89
|
|
|
87
|
-
.tag--warning:active > nile-icon {
|
|
90
|
+
.tag--warning:active > nile-icon-button {
|
|
88
91
|
color: hsl(32.1 94.6% 43.7%);
|
|
89
92
|
}
|
|
90
93
|
|
|
94
|
+
|
|
91
95
|
.tag--error {
|
|
92
|
-
background: #
|
|
96
|
+
background: #F3A5AA;
|
|
97
|
+
border: 2px solid #F3A5AA;
|
|
93
98
|
color: #000;
|
|
94
|
-
--nile-remove-icon-color: var(--nile-colors-red-500);
|
|
95
99
|
}
|
|
96
100
|
|
|
97
101
|
.tag--error:hover {
|
|
98
|
-
|
|
102
|
+
border: 2px solid #E5434D;
|
|
99
103
|
}
|
|
100
104
|
|
|
101
|
-
.tag--error:active > nile-icon {
|
|
105
|
+
.tag--error:active > nile-icon-button {
|
|
102
106
|
color: hsl(0 72.2% 50.6%);
|
|
103
107
|
}
|
|
104
108
|
|
|
105
109
|
.tag--info {
|
|
106
|
-
background: #
|
|
110
|
+
background: #A5D3F3;
|
|
111
|
+
border: 2px solid #A5D3F3;
|
|
107
112
|
color: #000000;
|
|
108
|
-
--nile-remove-icon-color: var(--nile-colors-blue-500);
|
|
109
113
|
}
|
|
110
114
|
|
|
111
115
|
.tag--info:hover {
|
|
112
|
-
|
|
116
|
+
border: 2px solid #42A3E5;
|
|
113
117
|
}
|
|
114
118
|
|
|
115
|
-
.tag--info:active > nile-icon {
|
|
119
|
+
.tag--info:active > nile-icon-button {
|
|
116
120
|
color: hsl(0 72.2% 50.6%);
|
|
117
121
|
}
|
|
118
122
|
|
|
119
|
-
.tag--gray {
|
|
120
|
-
background: var(--nile-tag-gray-background-color);
|
|
121
|
-
border: 1px solid var(--nile-colors-gray-light-mode-300);
|
|
122
|
-
color: var(--nile-tag-gray-color);
|
|
123
|
-
--nile-remove-icon-color: var(--nile-tag-gray-x-color);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.tag--gray:hover {
|
|
127
|
-
background-color: var(--nile-tag-gray-hover-background-color);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
/* .tag--gray:active > nile-icon {
|
|
131
|
-
color: #101828;
|
|
132
|
-
} */
|
|
133
|
-
|
|
134
|
-
.tag--small {
|
|
135
|
-
height: 24px;
|
|
136
|
-
padding: 3px 8px;
|
|
137
|
-
font-size: 12px;
|
|
138
|
-
font-style: normal;
|
|
139
|
-
font-weight: 500;
|
|
140
|
-
line-height: 18px;
|
|
141
|
-
}
|
|
142
123
|
|
|
143
124
|
.tag--medium {
|
|
144
|
-
height: 24px;
|
|
145
|
-
padding: 2px 9px;
|
|
146
125
|
font-size: 14px;
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
126
|
+
height: 26px;
|
|
127
|
+
padding: 0 0.75rem;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.tag__remove {
|
|
131
|
+
margin-inline-start: 0.5rem;
|
|
150
132
|
}
|
|
151
133
|
|
|
152
134
|
/*
|
|
@@ -157,37 +139,14 @@ export const styles = css `
|
|
|
157
139
|
border-radius: 9999px;
|
|
158
140
|
}
|
|
159
141
|
|
|
160
|
-
.
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
.tag--medium .tag__remove-wrapper {
|
|
165
|
-
display: inline-flex;
|
|
166
|
-
justify-content: centre;
|
|
167
|
-
box-sizing: border-box;
|
|
168
|
-
height: 16px;
|
|
169
|
-
width: 16px;
|
|
170
|
-
padding: 2px;
|
|
171
|
-
}
|
|
142
|
+
.tag__prefix {
|
|
143
|
+
padding: 3px 6px;
|
|
144
|
+
}
|
|
172
145
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
box-sizing: border-box;
|
|
177
|
-
height: 14px;
|
|
178
|
-
width: 14px;
|
|
179
|
-
padding: 2px;
|
|
180
|
-
}
|
|
146
|
+
.tag__content {
|
|
147
|
+
font-size: 14px;
|
|
148
|
+
}
|
|
181
149
|
|
|
182
|
-
.tag--removable {
|
|
183
|
-
padding: 2px 2px 2px 9px;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
.tag__remove:hover {
|
|
187
|
-
cursor: pointer;
|
|
188
|
-
--nile-remove-icon-color: #101828;
|
|
189
|
-
color: red;
|
|
190
|
-
}
|
|
191
150
|
`;
|
|
192
151
|
export default [styles];
|
|
193
152
|
//# sourceMappingURL=nile-tag.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-tag.css.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-tag.css.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2IxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Tag CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n }\n\n .tag {\n display: flex;\n align-items: center;\n border: solid 2px;\n line-height: 1;\n white-space: nowrap;\n user-select: none;\n border-radius: 4px;\n gap: 6px;\n }\n\n .tag__remove::part(base) {\n color: inherit;\n padding: 0;\n }\n\n /*\n * Variant modifiers\n */\n\n .tag--primary {\n background: #005EA6;\n border-color: #005EA6;\n border: 2px solid #005EA6;\n color: #FFF;\n }\n\n .tag--primary:hover {\n border: 2px solid rgba(0, 94, 166, 0.50);\n }\n\n .tag--primary:active > nile-icon-button {\n color: hsl(200.4 98% 39.4%);\n }\n\n .tag--success {\n background: #A5F3E1;\n border: 2px solid #A5F3E1;\n color: #000;\n }\n\n .tag--success:hover {\n border: 2px solid #43E5C0;\n }\n\n .tag--success:active > nile-icon-button {\n color: hsl(142.1 76.2% 36.3%);\n }\n\n .tag--normal {\n background: #E5E9EB;\n border: 2px solid #E5E9EB;\n color: #000;\n }\n\n .tag--normal:hover {\n border: 2px solid #C7CED4;\n }\n\n\n .tag--normal:active > nile-icon-button {\n color: hsl(240 5.2% 33.9%);\n }\n\n .tag--warning {\n background: #F3E0A5;\n border: 2px solid #F3E0A5;\n color: #000;\n }\n\n .tag--warning:hover {\n border: 2px solid #E5BF43;\n }\n\n .tag--warning:active > nile-icon-button {\n color: hsl(32.1 94.6% 43.7%);\n }\n\n\n .tag--error {\n background: #F3A5AA;\n border: 2px solid #F3A5AA;\n color: #000;\n }\n\n .tag--error:hover {\n border: 2px solid #E5434D;\n }\n\n .tag--error:active > nile-icon-button {\n color: hsl(0 72.2% 50.6%);\n }\n\n .tag--info {\n background: #A5D3F3;\n border: 2px solid #A5D3F3;\n color: #000000;\n }\n\n .tag--info:hover {\n border: 2px solid #42A3E5;\n }\n\n .tag--info:active > nile-icon-button {\n color: hsl(0 72.2% 50.6%);\n }\n\n\n .tag--medium {\n font-size: 14px;\n height: 26px;\n padding: 0 0.75rem;\n }\n\n .tag__remove {\n margin-inline-start: 0.5rem;\n }\n\n /*\n * Pill modifier\n */\n\n .tag--pill {\n border-radius: 9999px;\n }\n\n .tag__prefix {\n padding: 3px 6px;\n}\n\n .tag__content {\n font-size: 14px;\n}\n\n`;\n\nexport default [styles];\n"]}
|
|
@@ -32,7 +32,7 @@ import type { CSSResultGroup } from 'lit';
|
|
|
32
32
|
export declare class NileTag extends NileElement {
|
|
33
33
|
static styles: CSSResultGroup;
|
|
34
34
|
/** The tag's theme variant. */
|
|
35
|
-
variant: 'primary' | 'success' | 'normal' | 'warning' | 'error' | 'info'
|
|
35
|
+
variant: 'primary' | 'success' | 'normal' | 'warning' | 'error' | 'info';
|
|
36
36
|
/** The tag's size. */
|
|
37
37
|
size: 'small' | 'medium' | 'large';
|
|
38
38
|
/** Draws a pill-style tag with rounded edges. */
|
|
@@ -40,6 +40,7 @@ export declare class NileTag extends NileElement {
|
|
|
40
40
|
/** Makes the tag removable and shows a remove button. */
|
|
41
41
|
removable: boolean;
|
|
42
42
|
private handleRemoveClick;
|
|
43
|
+
getCloseButtonColor(): "--nile-colors-blue-500" | "--nile-colors-green-500" | "--nile-colors-dark-500" | "--nile-colors-yellow-500" | "--nile-colors-red-500";
|
|
43
44
|
render(): TemplateResult<1>;
|
|
44
45
|
}
|
|
45
46
|
export default NileTag;
|
|
@@ -47,7 +47,26 @@ let NileTag = class NileTag extends NileElement {
|
|
|
47
47
|
handleRemoveClick() {
|
|
48
48
|
this.emit('nile-remove');
|
|
49
49
|
}
|
|
50
|
+
getCloseButtonColor() {
|
|
51
|
+
switch (this.variant) {
|
|
52
|
+
case 'primary':
|
|
53
|
+
return '--nile-colors-blue-500';
|
|
54
|
+
case 'success':
|
|
55
|
+
return '--nile-colors-green-500';
|
|
56
|
+
case 'normal':
|
|
57
|
+
return '--nile-colors-dark-500';
|
|
58
|
+
case 'warning':
|
|
59
|
+
return '--nile-colors-yellow-500';
|
|
60
|
+
case 'error':
|
|
61
|
+
return '--nile-colors-red-500';
|
|
62
|
+
case 'info':
|
|
63
|
+
return '--nile-colors-blue-500';
|
|
64
|
+
default:
|
|
65
|
+
return '--nile-colors-dark-500';
|
|
66
|
+
}
|
|
67
|
+
}
|
|
50
68
|
render() {
|
|
69
|
+
const colorVariable = this.getCloseButtonColor();
|
|
51
70
|
return html `
|
|
52
71
|
<span
|
|
53
72
|
part="base"
|
|
@@ -60,7 +79,6 @@ let NileTag = class NileTag extends NileElement {
|
|
|
60
79
|
'tag--warning': this.variant === 'warning',
|
|
61
80
|
'tag--error': this.variant === 'error',
|
|
62
81
|
'tag--info': this.variant === 'info',
|
|
63
|
-
'tag--gray': this.variant === 'gray',
|
|
64
82
|
// Sizes
|
|
65
83
|
'tag--small': this.size === 'small',
|
|
66
84
|
'tag--medium': this.size === 'medium',
|
|
@@ -76,18 +94,17 @@ let NileTag = class NileTag extends NileElement {
|
|
|
76
94
|
|
|
77
95
|
${this.removable
|
|
78
96
|
? html `
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
</span>
|
|
97
|
+
<nile-icon-button
|
|
98
|
+
part="remove-button"
|
|
99
|
+
exportparts="base:remove-button__base"
|
|
100
|
+
name="close"
|
|
101
|
+
library="system"
|
|
102
|
+
label="remove"
|
|
103
|
+
class="tag__remove"
|
|
104
|
+
@click=${this.handleRemoveClick}
|
|
105
|
+
tabindex="-1"
|
|
106
|
+
color="var(${colorVariable})"
|
|
107
|
+
></nile-icon-button>
|
|
91
108
|
`
|
|
92
109
|
: ''}
|
|
93
110
|
</span>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-tag.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AAGI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,WAAW;IAAjC;;QAGL,+BAA+B;QACF,YAAO,
|
|
1
|
+
{"version":3,"file":"nile-tag.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AAGI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,WAAW;IAAjC;;QAGL,+BAA+B;QACF,YAAO,GAMvB,QAAQ,CAAC;QAEtB,sBAAsB;QACO,SAAI,GAAiC,QAAQ,CAAC;QAE3E,iDAAiD;QACL,SAAI,GAAG,KAAK,CAAC;QAEzD,yDAAyD;QAC5B,cAAS,GAAG,KAAK,CAAC;IA2EjD,CAAC;IAzES,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3B,CAAC;IAED,mBAAmB;QACjB,QAAQ,IAAI,CAAC,OAAO,EAAE;YACpB,KAAK,SAAS;gBACZ,OAAQ,wBAAwB,CAAC;YACnC,KAAK,SAAS;gBACZ,OAAO,yBAAyB,CAAC;YACnC,KAAK,QAAQ;gBACX,OAAO,wBAAwB,CAAC;YAClC,KAAK,SAAS;gBACZ,OAAO,0BAA0B,CAAC;YACpC,KAAK,OAAO;gBACV,OAAO,uBAAuB,CAAC;YACjC,KAAK,MAAM;gBACT,OAAO,wBAAwB,CAAC;YAClC;gBACE,OAAO,wBAAwB,CAAC;SACnC;IACH,CAAC;IAGD,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACjD,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,GAAG,EAAE,IAAI;YAET,QAAQ;YACR,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACxC,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACtC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAEpC,QAAQ;YACR,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YACrC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YAEnC,YAAY;YACZ,WAAW,EAAE,IAAI,CAAC,IAAI;YACtB,gBAAgB,EAAE,IAAI,CAAC,SAAS;SAEjC,CAAC;;;;;;UAMA,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;;;;;yBAQS,IAAI,CAAC,iBAAiB;;6BAElB,aAAa;;aAE7B;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AA5FM,cAAM,GAAmB,MAAM,CAAC;AAGV;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAMN;AAGO;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA+C;AAG/B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAc;AAG5B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAnBpC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA8FnB;SA9FY,OAAO;AAgGpB,eAAe,OAAO,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { styles } from './nile-tag.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/**\n * Nile icon component.\n *\n * @tag nile-tag\n *\n */\n\n/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @status stable\n *\n * @dependency nile-icon-button\n *\n * @slot - The tag's content.\n *\n * @event nile-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<nile-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\n\n@customElement('nile-tag')\nexport class NileTag extends NileElement {\n static styles: CSSResultGroup = styles;\n\n /** The tag's theme variant. */\n @property({ reflect: true }) variant:\n | 'primary'\n | 'success'\n | 'normal'\n | 'warning'\n | 'error'\n | 'info' = 'normal';\n\n /** The tag's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Draws a pill-style tag with rounded edges. */\n @property({ type: Boolean, reflect: true }) pill = false;\n\n /** Makes the tag removable and shows a remove button. */\n @property({ type: Boolean }) removable = false;\n\n private handleRemoveClick() {\n this.emit('nile-remove');\n }\n\n getCloseButtonColor() {\n switch (this.variant) {\n case 'primary':\n return '--nile-colors-blue-500'; \n case 'success':\n return '--nile-colors-green-500'; \n case 'normal':\n return '--nile-colors-dark-500'; \n case 'warning':\n return '--nile-colors-yellow-500';\n case 'error':\n return '--nile-colors-red-500';\n case 'info':\n return '--nile-colors-blue-500';\n default:\n return '--nile-colors-dark-500'; \n }\n }\n \n\n render() {\n const colorVariable = this.getCloseButtonColor();\n return html`\n <span\n part=\"base\"\n class=${classMap({\n tag: true,\n\n // Types\n 'tag--primary': this.variant === 'primary',\n 'tag--success': this.variant === 'success',\n 'tag--normal': this.variant === 'normal',\n 'tag--warning': this.variant === 'warning',\n 'tag--error': this.variant === 'error',\n 'tag--info': this.variant === 'info',\n\n // Sizes\n 'tag--small': this.size === 'small',\n 'tag--medium': this.size === 'medium',\n 'tag--large': this.size === 'large',\n\n // Modifiers\n 'tag--pill': this.pill,\n 'tag--removable': this.removable,\n\n })}\n >\n <slot name=\"prefix\" part=\"prefix\" class=\"tag__prefix\"></slot>\n\n <slot part=\"content\" class=\"tag__content\"></slot>\n\n ${this.removable\n ? html`\n <nile-icon-button\n part=\"remove-button\"\n exportparts=\"base:remove-button__base\"\n name=\"close\"\n library=\"system\"\n label=\"remove\"\n class=\"tag__remove\"\n @click=${this.handleRemoveClick}\n tabindex=\"-1\"\n color=\"var(${colorVariable})\"\n ></nile-icon-button>\n `\n : ''}\n </span>\n `;\n }\n}\n\nexport default NileTag;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-tag': NileTag;\n }\n}\n"]}
|