@govbr-ds/webcomponents 2.0.0-next.14 → 2.0.0-next.16
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/dist/cjs/br-avatar.cjs.entry.js +2 -2
- package/dist/cjs/br-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/br-button_2.cjs.entry.js +3 -3
- package/dist/cjs/br-button_2.cjs.entry.js.map +1 -1
- package/dist/cjs/br-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/br-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/br-dropdown.cjs.entry.js +2 -2
- package/dist/cjs/br-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/br-input.cjs.entry.js +2 -2
- package/dist/cjs/br-input.cjs.entry.js.map +1 -1
- package/dist/cjs/br-item.cjs.entry.js +3 -3
- package/dist/cjs/br-item.cjs.entry.js.map +1 -1
- package/dist/cjs/br-list.cjs.entry.js +2 -2
- package/dist/cjs/br-list.cjs.entry.js.map +1 -1
- package/dist/cjs/br-loading.cjs.entry.js +3 -3
- package/dist/cjs/br-loading.cjs.entry.js.map +1 -1
- package/dist/cjs/br-message.cjs.entry.js +3 -3
- package/dist/cjs/br-message.cjs.entry.js.map +1 -1
- package/dist/cjs/br-radio.cjs.entry.js +41 -37
- package/dist/cjs/br-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/br-switch.cjs.entry.js +3 -3
- package/dist/cjs/br-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/br-textarea.cjs.entry.js +158 -0
- package/dist/cjs/br-textarea.cjs.entry.js.map +1 -0
- package/dist/cjs/{index-fb4e9eaf.js → index-a1cc4aa4.js} +7 -2
- package/dist/cjs/index-a1cc4aa4.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/webcomponents.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/avatar/avatar.css +54 -19
- package/dist/collection/components/button/button.css +68 -19
- package/dist/collection/components/checkbox/checkbox.css +54 -19
- package/dist/collection/components/dropdown/dropdown.css +54 -19
- package/dist/collection/components/icon/icon.css +54 -19
- package/dist/collection/components/input/input.css +54 -19
- package/dist/collection/components/item/item.css +54 -19
- package/dist/collection/components/item/item.js +1 -1
- package/dist/collection/components/item/item.js.map +1 -1
- package/dist/collection/components/list/list.css +54 -19
- package/dist/collection/components/loading/loading.css +68 -19
- package/dist/collection/components/loading/loading.js +1 -1
- package/dist/collection/components/loading/loading.js.map +1 -1
- package/dist/collection/components/message/message.css +54 -19
- package/dist/collection/components/message/message.js +1 -1
- package/dist/collection/components/message/message.js.map +1 -1
- package/dist/collection/components/radio/radio.css +54 -19
- package/dist/collection/components/radio/radio.js +43 -62
- package/dist/collection/components/radio/radio.js.map +1 -1
- package/dist/collection/components/switch/switch.css +54 -19
- package/dist/collection/components/switch/switch.js +1 -1
- package/dist/collection/components/switch/switch.js.map +1 -1
- package/dist/collection/components/textarea/textarea.css +504 -0
- package/dist/collection/components/textarea/textarea.js +566 -0
- package/dist/collection/components/textarea/textarea.js.map +1 -0
- package/dist/collection/pages/radio/radio.js +1 -1
- package/dist/collection/pages/textarea/textarea.js +19 -0
- package/dist/collection/scripts/menu.js +22 -18
- package/dist/collection/utils/unique-id-generator.js +9 -0
- package/dist/collection/utils/unique-id-generator.js.map +1 -0
- package/dist/components/br-avatar.js +3 -3
- package/dist/components/br-avatar.js.map +1 -1
- package/dist/components/br-button.js +1 -1
- package/dist/components/br-checkbox.js +2 -2
- package/dist/components/br-checkbox.js.map +1 -1
- package/dist/components/br-dropdown.js +2 -2
- package/dist/components/br-dropdown.js.map +1 -1
- package/dist/components/br-icon.js +1 -1
- package/dist/components/br-input.js +4 -4
- package/dist/components/br-input.js.map +1 -1
- package/dist/components/br-item.js +3 -3
- package/dist/components/br-item.js.map +1 -1
- package/dist/components/br-list.js +2 -2
- package/dist/components/br-list.js.map +1 -1
- package/dist/components/br-loading.js +3 -3
- package/dist/components/br-loading.js.map +1 -1
- package/dist/components/br-message.js +5 -5
- package/dist/components/br-message.js.map +1 -1
- package/dist/components/br-radio.js +45 -40
- package/dist/components/br-radio.js.map +1 -1
- package/dist/components/br-switch.js +3 -3
- package/dist/components/br-switch.js.map +1 -1
- package/dist/components/br-textarea.d.ts +11 -0
- package/dist/components/br-textarea.js +181 -0
- package/dist/components/br-textarea.js.map +1 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +2 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/{p-87afe26f.js → p-215ac56c.js} +3 -3
- package/dist/components/{p-87afe26f.js.map → p-215ac56c.js.map} +1 -1
- package/dist/components/{p-698e7a18.js → p-62a01df5.js} +3 -2
- package/dist/{esm/index-c7037515.js.map → components/p-62a01df5.js.map} +1 -1
- package/dist/components/p-6eb1a607.js +138 -0
- package/dist/components/{p-5769e796.js.map → p-6eb1a607.js.map} +1 -1
- package/dist/esm/br-avatar.entry.js +2 -2
- package/dist/esm/br-avatar.entry.js.map +1 -1
- package/dist/esm/br-button_2.entry.js +3 -3
- package/dist/esm/br-button_2.entry.js.map +1 -1
- package/dist/esm/br-checkbox.entry.js +2 -2
- package/dist/esm/br-checkbox.entry.js.map +1 -1
- package/dist/esm/br-dropdown.entry.js +2 -2
- package/dist/esm/br-dropdown.entry.js.map +1 -1
- package/dist/esm/br-input.entry.js +2 -2
- package/dist/esm/br-input.entry.js.map +1 -1
- package/dist/esm/br-item.entry.js +3 -3
- package/dist/esm/br-item.entry.js.map +1 -1
- package/dist/esm/br-list.entry.js +2 -2
- package/dist/esm/br-list.entry.js.map +1 -1
- package/dist/esm/br-loading.entry.js +3 -3
- package/dist/esm/br-loading.entry.js.map +1 -1
- package/dist/esm/br-message.entry.js +3 -3
- package/dist/esm/br-message.entry.js.map +1 -1
- package/dist/esm/br-radio.entry.js +41 -37
- package/dist/esm/br-radio.entry.js.map +1 -1
- package/dist/esm/br-switch.entry.js +3 -3
- package/dist/esm/br-switch.entry.js.map +1 -1
- package/dist/esm/br-textarea.entry.js +154 -0
- package/dist/esm/br-textarea.entry.js.map +1 -0
- package/dist/esm/{index-c7037515.js → index-cad6e6c3.js} +7 -2
- package/dist/esm/index-cad6e6c3.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/webcomponents.js +3 -3
- package/dist/types/components/radio/radio.d.ts +18 -23
- package/dist/types/components/textarea/textarea.d.ts +157 -0
- package/dist/types/components.d.ts +193 -12
- package/dist/types/utils/unique-id-generator.d.ts +1 -0
- package/dist/webcomponents/p-35f43cf0.entry.js +2 -0
- package/dist/webcomponents/p-35f43cf0.entry.js.map +1 -0
- package/dist/webcomponents/p-3bbf9a07.entry.js +2 -0
- package/dist/webcomponents/p-3bbf9a07.entry.js.map +1 -0
- package/dist/webcomponents/p-70216f4a.entry.js +13 -0
- package/dist/webcomponents/{p-dde91d20.entry.js.map → p-70216f4a.entry.js.map} +1 -1
- package/dist/webcomponents/p-7ef2814e.entry.js +2 -0
- package/dist/webcomponents/p-7ef2814e.entry.js.map +1 -0
- package/dist/webcomponents/p-8030cff4.entry.js +2 -0
- package/dist/webcomponents/p-8030cff4.entry.js.map +1 -0
- package/dist/webcomponents/p-80726c0b.entry.js +2 -0
- package/dist/webcomponents/p-80726c0b.entry.js.map +1 -0
- package/dist/webcomponents/{p-6849daee.js → p-8dfeb926.js} +3 -3
- package/dist/webcomponents/p-8dfeb926.js.map +1 -0
- package/dist/webcomponents/p-a80407ae.entry.js +2 -0
- package/dist/webcomponents/{p-8efc22a3.entry.js.map → p-a80407ae.entry.js.map} +1 -1
- package/dist/webcomponents/p-a9efcaff.entry.js +2 -0
- package/dist/webcomponents/p-a9efcaff.entry.js.map +1 -0
- package/dist/webcomponents/p-c8bf074f.entry.js +2 -0
- package/dist/webcomponents/p-c8bf074f.entry.js.map +1 -0
- package/dist/webcomponents/p-d3bb77aa.entry.js +2 -0
- package/dist/webcomponents/{p-9dbe247e.entry.js.map → p-d3bb77aa.entry.js.map} +1 -1
- package/dist/webcomponents/p-e24e46e9.entry.js +2 -0
- package/dist/webcomponents/{p-c36696c6.entry.js.map → p-e24e46e9.entry.js.map} +1 -1
- package/dist/webcomponents/p-ee647c4a.entry.js +2 -0
- package/dist/webcomponents/{p-ac16ee58.entry.js.map → p-ee647c4a.entry.js.map} +1 -1
- package/dist/webcomponents/webcomponents.esm.js +1 -1
- package/dist/webcomponents/webcomponents.esm.js.map +1 -1
- package/hydrate/index.js +240 -62
- package/hydrate/index.mjs +240 -62
- package/package.json +1 -1
- package/vscode-data.json +50 -5
- package/dist/cjs/index-fb4e9eaf.js.map +0 -1
- package/dist/components/p-5769e796.js +0 -138
- package/dist/components/p-698e7a18.js.map +0 -1
- package/dist/webcomponents/p-0f6e2ddc.entry.js +0 -2
- package/dist/webcomponents/p-0f6e2ddc.entry.js.map +0 -1
- package/dist/webcomponents/p-14f1c8e6.entry.js +0 -2
- package/dist/webcomponents/p-14f1c8e6.entry.js.map +0 -1
- package/dist/webcomponents/p-198082b6.entry.js +0 -2
- package/dist/webcomponents/p-198082b6.entry.js.map +0 -1
- package/dist/webcomponents/p-6849daee.js.map +0 -1
- package/dist/webcomponents/p-867bba23.entry.js +0 -2
- package/dist/webcomponents/p-867bba23.entry.js.map +0 -1
- package/dist/webcomponents/p-8efc22a3.entry.js +0 -2
- package/dist/webcomponents/p-9dbe247e.entry.js +0 -2
- package/dist/webcomponents/p-a5a079d8.entry.js +0 -2
- package/dist/webcomponents/p-a5a079d8.entry.js.map +0 -1
- package/dist/webcomponents/p-ac16ee58.entry.js +0 -2
- package/dist/webcomponents/p-c36696c6.entry.js +0 -2
- package/dist/webcomponents/p-dde91d20.entry.js +0 -13
- package/dist/webcomponents/p-f01f1e6b.entry.js +0 -2
- package/dist/webcomponents/p-f01f1e6b.entry.js.map +0 -1
|
@@ -24,11 +24,6 @@ strong {
|
|
|
24
24
|
font-weight: bolder;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
code {
|
|
28
|
-
font-family: monospace;
|
|
29
|
-
font-size: 1em;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
27
|
small {
|
|
33
28
|
font-size: 80%;
|
|
34
29
|
}
|
|
@@ -38,7 +33,8 @@ img {
|
|
|
38
33
|
}
|
|
39
34
|
|
|
40
35
|
button,
|
|
41
|
-
input
|
|
36
|
+
input,
|
|
37
|
+
textarea {
|
|
42
38
|
font-family: inherit;
|
|
43
39
|
font-size: 100%;
|
|
44
40
|
line-height: var(--font-line-height-medium);
|
|
@@ -82,6 +78,10 @@ progress {
|
|
|
82
78
|
vertical-align: baseline;
|
|
83
79
|
}
|
|
84
80
|
|
|
81
|
+
textarea {
|
|
82
|
+
overflow: auto;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
85
|
[type=checkbox],
|
|
86
86
|
[type=radio] {
|
|
87
87
|
box-sizing: border-box;
|
|
@@ -139,6 +139,17 @@ progress {
|
|
|
139
139
|
width: auto;
|
|
140
140
|
}
|
|
141
141
|
|
|
142
|
+
.container {
|
|
143
|
+
--grid-margin: var(--grid-portrait-margin);
|
|
144
|
+
--grid-maxwidth: var(--grid-portrait-maxwidth);
|
|
145
|
+
margin-left: auto;
|
|
146
|
+
margin-right: auto;
|
|
147
|
+
max-width: var(--grid-maxwidth);
|
|
148
|
+
padding-left: var(--grid-margin);
|
|
149
|
+
padding-right: var(--grid-margin);
|
|
150
|
+
width: 100%;
|
|
151
|
+
}
|
|
152
|
+
|
|
142
153
|
.row {
|
|
143
154
|
--grid-gutter: var(--grid-portrait-gutter);
|
|
144
155
|
display: flex;
|
|
@@ -148,24 +159,52 @@ progress {
|
|
|
148
159
|
}
|
|
149
160
|
|
|
150
161
|
@media (min-width: 576px) {
|
|
162
|
+
.container {
|
|
163
|
+
--grid-margin: var(--grid-tablet-margin);
|
|
164
|
+
}
|
|
151
165
|
.row {
|
|
152
166
|
--grid-gutter: var(--grid-tablet-gutter);
|
|
153
167
|
}
|
|
168
|
+
.container {
|
|
169
|
+
--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin));
|
|
170
|
+
}
|
|
154
171
|
}
|
|
155
172
|
@media (min-width: 992px) {
|
|
173
|
+
.container {
|
|
174
|
+
--grid-margin: var(--grid-tablet-margin);
|
|
175
|
+
}
|
|
156
176
|
.row {
|
|
157
177
|
--grid-gutter: var(--grid-tablet-gutter);
|
|
158
178
|
}
|
|
179
|
+
.container {
|
|
180
|
+
--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin));
|
|
181
|
+
}
|
|
159
182
|
}
|
|
160
183
|
@media (min-width: 1280px) {
|
|
184
|
+
.container {
|
|
185
|
+
--grid-margin: var(--grid-desktop-margin);
|
|
186
|
+
}
|
|
161
187
|
.row {
|
|
162
188
|
--grid-gutter: var(--grid-desktop-gutter);
|
|
163
189
|
}
|
|
190
|
+
.container {
|
|
191
|
+
--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin));
|
|
192
|
+
}
|
|
164
193
|
}
|
|
165
194
|
@media (min-width: 1600px) {
|
|
195
|
+
.container {
|
|
196
|
+
--grid-margin: var(--grid-tv-margin);
|
|
197
|
+
}
|
|
166
198
|
.row {
|
|
167
199
|
--grid-gutter: var(--grid-tv-gutter);
|
|
168
200
|
}
|
|
201
|
+
.container {
|
|
202
|
+
--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin));
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.mt-1 {
|
|
207
|
+
margin-top: var(--spacing-scale-half) !important;
|
|
169
208
|
}
|
|
170
209
|
|
|
171
210
|
.mr-1 {
|
|
@@ -180,6 +219,10 @@ progress {
|
|
|
180
219
|
margin-bottom: var(--spacing-scale-2x) !important;
|
|
181
220
|
}
|
|
182
221
|
|
|
222
|
+
.pt-half {
|
|
223
|
+
padding-top: var(--spacing-scale-half) !important;
|
|
224
|
+
}
|
|
225
|
+
|
|
183
226
|
.py-3 {
|
|
184
227
|
padding-bottom: var(--spacing-scale-2x) !important;
|
|
185
228
|
padding-top: var(--spacing-scale-2x) !important;
|
|
@@ -295,6 +338,7 @@ label,
|
|
|
295
338
|
}
|
|
296
339
|
|
|
297
340
|
input,
|
|
341
|
+
textarea,
|
|
298
342
|
.input {
|
|
299
343
|
color: var(--color-light);
|
|
300
344
|
font-size: var(--font-size-scale-up-01);
|
|
@@ -303,19 +347,6 @@ input,
|
|
|
303
347
|
margin-bottom: var(--spacing-scale-half);
|
|
304
348
|
}
|
|
305
349
|
|
|
306
|
-
code,
|
|
307
|
-
.code {
|
|
308
|
-
background: var(--gray-5);
|
|
309
|
-
border-radius: 4px;
|
|
310
|
-
color: var(--gray-80);
|
|
311
|
-
display: inline-block;
|
|
312
|
-
font-family: monospace;
|
|
313
|
-
font-size: var(--font-size-scale-base);
|
|
314
|
-
font-weight: var(--font-weight-medium);
|
|
315
|
-
line-height: var(--font-line-height-low);
|
|
316
|
-
padding: var(--spacing-scale-half);
|
|
317
|
-
}
|
|
318
|
-
|
|
319
350
|
.text-pure-0 {
|
|
320
351
|
color: var(--pure-0) !important;
|
|
321
352
|
}
|
|
@@ -338,6 +369,10 @@ code,
|
|
|
338
369
|
white-space: nowrap !important;
|
|
339
370
|
}
|
|
340
371
|
|
|
372
|
+
.text-base {
|
|
373
|
+
font-size: var(--font-size-scale-base) !important;
|
|
374
|
+
}
|
|
375
|
+
|
|
341
376
|
.highlight {
|
|
342
377
|
background: var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));
|
|
343
378
|
color: var(--status-highlight-text);
|
|
@@ -24,11 +24,6 @@ strong {
|
|
|
24
24
|
font-weight: bolder;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
code {
|
|
28
|
-
font-family: monospace;
|
|
29
|
-
font-size: 1em;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
27
|
small {
|
|
33
28
|
font-size: 80%;
|
|
34
29
|
}
|
|
@@ -38,7 +33,8 @@ img {
|
|
|
38
33
|
}
|
|
39
34
|
|
|
40
35
|
button,
|
|
41
|
-
input
|
|
36
|
+
input,
|
|
37
|
+
textarea {
|
|
42
38
|
font-family: inherit;
|
|
43
39
|
font-size: 100%;
|
|
44
40
|
line-height: var(--font-line-height-medium);
|
|
@@ -82,6 +78,10 @@ progress {
|
|
|
82
78
|
vertical-align: baseline;
|
|
83
79
|
}
|
|
84
80
|
|
|
81
|
+
textarea {
|
|
82
|
+
overflow: auto;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
85
|
[type=checkbox],
|
|
86
86
|
[type=radio] {
|
|
87
87
|
box-sizing: border-box;
|
|
@@ -139,6 +139,17 @@ progress {
|
|
|
139
139
|
width: auto;
|
|
140
140
|
}
|
|
141
141
|
|
|
142
|
+
.container {
|
|
143
|
+
--grid-margin: var(--grid-portrait-margin);
|
|
144
|
+
--grid-maxwidth: var(--grid-portrait-maxwidth);
|
|
145
|
+
margin-left: auto;
|
|
146
|
+
margin-right: auto;
|
|
147
|
+
max-width: var(--grid-maxwidth);
|
|
148
|
+
padding-left: var(--grid-margin);
|
|
149
|
+
padding-right: var(--grid-margin);
|
|
150
|
+
width: 100%;
|
|
151
|
+
}
|
|
152
|
+
|
|
142
153
|
.row {
|
|
143
154
|
--grid-gutter: var(--grid-portrait-gutter);
|
|
144
155
|
display: flex;
|
|
@@ -148,24 +159,52 @@ progress {
|
|
|
148
159
|
}
|
|
149
160
|
|
|
150
161
|
@media (min-width: 576px) {
|
|
162
|
+
.container {
|
|
163
|
+
--grid-margin: var(--grid-tablet-margin);
|
|
164
|
+
}
|
|
151
165
|
.row {
|
|
152
166
|
--grid-gutter: var(--grid-tablet-gutter);
|
|
153
167
|
}
|
|
168
|
+
.container {
|
|
169
|
+
--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin));
|
|
170
|
+
}
|
|
154
171
|
}
|
|
155
172
|
@media (min-width: 992px) {
|
|
173
|
+
.container {
|
|
174
|
+
--grid-margin: var(--grid-tablet-margin);
|
|
175
|
+
}
|
|
156
176
|
.row {
|
|
157
177
|
--grid-gutter: var(--grid-tablet-gutter);
|
|
158
178
|
}
|
|
179
|
+
.container {
|
|
180
|
+
--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin));
|
|
181
|
+
}
|
|
159
182
|
}
|
|
160
183
|
@media (min-width: 1280px) {
|
|
184
|
+
.container {
|
|
185
|
+
--grid-margin: var(--grid-desktop-margin);
|
|
186
|
+
}
|
|
161
187
|
.row {
|
|
162
188
|
--grid-gutter: var(--grid-desktop-gutter);
|
|
163
189
|
}
|
|
190
|
+
.container {
|
|
191
|
+
--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin));
|
|
192
|
+
}
|
|
164
193
|
}
|
|
165
194
|
@media (min-width: 1600px) {
|
|
195
|
+
.container {
|
|
196
|
+
--grid-margin: var(--grid-tv-margin);
|
|
197
|
+
}
|
|
166
198
|
.row {
|
|
167
199
|
--grid-gutter: var(--grid-tv-gutter);
|
|
168
200
|
}
|
|
201
|
+
.container {
|
|
202
|
+
--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin));
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.mt-1 {
|
|
207
|
+
margin-top: var(--spacing-scale-half) !important;
|
|
169
208
|
}
|
|
170
209
|
|
|
171
210
|
.mr-1 {
|
|
@@ -180,6 +219,10 @@ progress {
|
|
|
180
219
|
margin-bottom: var(--spacing-scale-2x) !important;
|
|
181
220
|
}
|
|
182
221
|
|
|
222
|
+
.pt-half {
|
|
223
|
+
padding-top: var(--spacing-scale-half) !important;
|
|
224
|
+
}
|
|
225
|
+
|
|
183
226
|
.py-3 {
|
|
184
227
|
padding-bottom: var(--spacing-scale-2x) !important;
|
|
185
228
|
padding-top: var(--spacing-scale-2x) !important;
|
|
@@ -295,6 +338,7 @@ label,
|
|
|
295
338
|
}
|
|
296
339
|
|
|
297
340
|
input,
|
|
341
|
+
textarea,
|
|
298
342
|
.input {
|
|
299
343
|
color: var(--color-light);
|
|
300
344
|
font-size: var(--font-size-scale-up-01);
|
|
@@ -303,19 +347,6 @@ input,
|
|
|
303
347
|
margin-bottom: var(--spacing-scale-half);
|
|
304
348
|
}
|
|
305
349
|
|
|
306
|
-
code,
|
|
307
|
-
.code {
|
|
308
|
-
background: var(--gray-5);
|
|
309
|
-
border-radius: 4px;
|
|
310
|
-
color: var(--gray-80);
|
|
311
|
-
display: inline-block;
|
|
312
|
-
font-family: monospace;
|
|
313
|
-
font-size: var(--font-size-scale-base);
|
|
314
|
-
font-weight: var(--font-weight-medium);
|
|
315
|
-
line-height: var(--font-line-height-low);
|
|
316
|
-
padding: var(--spacing-scale-half);
|
|
317
|
-
}
|
|
318
|
-
|
|
319
350
|
.text-pure-0 {
|
|
320
351
|
color: var(--pure-0) !important;
|
|
321
352
|
}
|
|
@@ -338,6 +369,10 @@ code,
|
|
|
338
369
|
white-space: nowrap !important;
|
|
339
370
|
}
|
|
340
371
|
|
|
372
|
+
.text-base {
|
|
373
|
+
font-size: var(--font-size-scale-base) !important;
|
|
374
|
+
}
|
|
375
|
+
|
|
341
376
|
.highlight {
|
|
342
377
|
background: var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));
|
|
343
378
|
color: var(--status-highlight-text);
|
|
@@ -516,6 +551,20 @@ code,
|
|
|
516
551
|
animation: fill ease-in-out 2s;
|
|
517
552
|
transform: rotate(9deg);
|
|
518
553
|
}
|
|
554
|
+
.loading[data-progress="8"] .br-loading-mask.full,
|
|
555
|
+
.loading[data-progress="8"] .br-loading-fill,
|
|
556
|
+
.br-loading[data-progress="8"] .br-loading-mask.full,
|
|
557
|
+
.br-loading[data-progress="8"] .br-loading-fill {
|
|
558
|
+
animation: fill ease-in-out 2s;
|
|
559
|
+
transform: rotate(14.4deg);
|
|
560
|
+
}
|
|
561
|
+
.loading[data-progress="10"] .br-loading-mask.full,
|
|
562
|
+
.loading[data-progress="10"] .br-loading-fill,
|
|
563
|
+
.br-loading[data-progress="10"] .br-loading-mask.full,
|
|
564
|
+
.br-loading[data-progress="10"] .br-loading-fill {
|
|
565
|
+
animation: fill ease-in-out 2s;
|
|
566
|
+
transform: rotate(18deg);
|
|
567
|
+
}
|
|
519
568
|
.loading[data-progress="16"] .br-loading-mask.full,
|
|
520
569
|
.loading[data-progress="16"] .br-loading-fill,
|
|
521
570
|
.br-loading[data-progress="16"] .br-loading-mask.full,
|
|
@@ -46,7 +46,7 @@ export class Loading {
|
|
|
46
46
|
};
|
|
47
47
|
}
|
|
48
48
|
render() {
|
|
49
|
-
return (h(Host, { key: '
|
|
49
|
+
return (h(Host, { key: '7f56287a3ba146d776b7eb895721d7ec5841bfbb' }, this.isProgress ? (h("div", Object.assign({}, this.inheritedAttributes, { class: this.getCssClassMap(), role: "progressbar", "data-progress": this.progressPercent, "aria-label": "Carregando exemplo com porcentagem", "aria-valuemin": "0", "aria-valuenow": this.progressPercent, "aria-valuemax": "100" }), h("div", { class: "br-loading-mask full" }, h("div", { class: "br-loading-fill" })), h("div", { class: "br-loading-mask" }, h("div", { class: "br-loading-fill" })))) : (h("div", { class: "loading-progress-alignment" }, h("div", { class: this.getCssClassMap(), role: "progressbar", "aria-label": "Carregando exemplo indeterminado pequeno" }), h("span", { class: "rotulo" }, this.label)))));
|
|
50
50
|
}
|
|
51
51
|
static get is() { return "br-loading"; }
|
|
52
52
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loading.js","sourceRoot":"","sources":["../../../src/components/loading/loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACtF,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;
|
|
1
|
+
{"version":3,"file":"loading.js","sourceRoot":"","sources":["../../../src/components/loading/loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACtF,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAEpF;;GAEG;AAOH,MAAM,OAAO,OAAO;;QAgIV,wBAAmB,GAAe,EAAE,CAAA;0BApHG,KAAK;+BAMD,IAAI;wBAKV,KAAK;qBAMT,EAAE;;IAO3C,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAA;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAQD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;IACvB,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,qBAAqB;QACnB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;IAC5B,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,oBAAoB;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAA;IAC7B,CAAC;IAEO,cAAc;QACpB,OAAO;YACL,YAAY,EAAE,IAAI;YAClB,MAAM,EAAE,IAAI,CAAC,QAAQ;SACtB,CAAA;IACH,CAAC;IAID,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,2BACM,IAAI,CAAC,mBAAmB,IAC5B,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,IAAI,EAAC,aAAa,mBACH,IAAI,CAAC,eAAe,gBACxB,oCAAoC,mBACjC,GAAG,mBACF,IAAI,CAAC,eAAe,mBACrB,KAAK;YAEnB,WAAK,KAAK,EAAC,sBAAsB;gBAC/B,WAAK,KAAK,EAAC,iBAAiB,GAAO,CAC/B;YACN,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,WAAK,KAAK,EAAC,iBAAiB,GAAO,CAC/B,CACF,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,4BAA4B;YACrC,WACE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,IAAI,EAAC,aAAa,gBACP,0CAA0C,GAChD;YACP,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,KAAK,CAAQ,CACpC,CACP,CACI,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/loading?tab=designer).\n */\n@Component({\n tag: 'br-loading',\n styleUrl: 'loading.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Loading {\n /**\n * Referência ao elemento host do componente.\n * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n */\n @Element() el: HTMLBrLoadingElement\n\n /**\n * Determina o tipo de indicador a ser exibido:\n * - Se verdadeiro, exibirá uma barra de progresso com a porcentagem de progresso.\n * - Se falso, exibirá um indicador de carregamento indeterminado.\n */\n @Prop({ reflect: true }) isProgress: boolean = false\n\n /**\n * Define a porcentagem de progresso a ser exibida na barra de progresso.\n * Deve ser um valor numérico entre 0 e 100. Ignorado se `isProgress` estiver definido como falso.\n */\n @Prop({ reflect: true }) progressPercent: number = null\n\n /**\n * Se verdadeiro, ajusta o tamanho do indicador de carregamento para o tamanho médio.\n */\n @Prop({ reflect: true }) isMedium: boolean = false\n\n /**\n * Texto a ser exibido abaixo do indicador de carregamento.\n * Pode ser usado para fornecer informações adicionais ou descritivas sobre o estado do carregamento.\n */\n @Prop({ reflect: true }) label: string = ''\n\n /**\n * Emite um evento quando o componente é conectado ao DOM.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n */\n @Event() brDidConnect: EventEmitter<void>\n connectedCallback() {\n this.brDidConnect.emit()\n }\n\n /**\n * Emite um evento antes que o componente seja carregado pela primeira vez.\n * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n */\n @Event() brWillLoad: EventEmitter<void>\n componentWillLoad() {\n this.brWillLoad.emit()\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n /**\n * Emite um evento após o componente ter sido carregado pela primeira vez.\n * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n */\n @Event() brDidLoad: EventEmitter<void>\n componentDidLoad() {\n this.brDidLoad.emit()\n }\n\n /**\n * Emite um evento antes do componente ser renderizado.\n * Utilize este evento para preparar o componente antes de sua renderização.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n */\n @Event() brWillRender: EventEmitter<void>\n componentWillRender() {\n this.brWillRender.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido renderizado.\n * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n */\n @Event() brDidRender: EventEmitter<void>\n componentDidRender() {\n this.brDidRender.emit()\n }\n\n /**\n * Emite um evento para indicar se o componente deve ser atualizado ou não.\n * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n */\n @Event() brShouldUpdate: EventEmitter<void>\n componentShouldUpdate() {\n this.brShouldUpdate.emit()\n }\n\n /**\n * Emite um evento antes de o componente ser atualizado.\n * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n */\n @Event() brWillUpdate: EventEmitter<void>\n componentWillUpdate() {\n this.brWillUpdate.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido atualizado.\n * Utilize este evento para realizar ações após a atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n */\n @Event() brDidUpdate: EventEmitter<void>\n componentDidUpdate() {\n this.brDidUpdate.emit()\n }\n\n /**\n * Emite um evento quando o componente é desconectado do DOM.\n * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n */\n @Event() brDidDisconnect: EventEmitter<void>\n disconnectedCallback() {\n this.brDidDisconnect.emit()\n }\n\n private getCssClassMap(): CssClassMap {\n return {\n 'br-loading': true,\n medium: this.isMedium,\n }\n }\n\n private inheritedAttributes: Attributes = {}\n\n render() {\n return (\n <Host>\n {this.isProgress ? (\n <div\n {...this.inheritedAttributes}\n class={this.getCssClassMap()}\n role=\"progressbar\"\n data-progress={this.progressPercent}\n aria-label=\"Carregando exemplo com porcentagem\"\n aria-valuemin=\"0\"\n aria-valuenow={this.progressPercent}\n aria-valuemax=\"100\"\n >\n <div class=\"br-loading-mask full\">\n <div class=\"br-loading-fill\"></div>\n </div>\n <div class=\"br-loading-mask\">\n <div class=\"br-loading-fill\"></div>\n </div>\n </div>\n ) : (\n <div class=\"loading-progress-alignment\">\n <div\n class={this.getCssClassMap()}\n role=\"progressbar\"\n aria-label=\"Carregando exemplo indeterminado pequeno\"\n ></div>\n <span class=\"rotulo\">{this.label}</span>\n </div>\n )}\n </Host>\n )\n }\n}\n"]}
|
|
@@ -24,11 +24,6 @@ strong {
|
|
|
24
24
|
font-weight: bolder;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
code {
|
|
28
|
-
font-family: monospace;
|
|
29
|
-
font-size: 1em;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
27
|
small {
|
|
33
28
|
font-size: 80%;
|
|
34
29
|
}
|
|
@@ -38,7 +33,8 @@ img {
|
|
|
38
33
|
}
|
|
39
34
|
|
|
40
35
|
button,
|
|
41
|
-
input
|
|
36
|
+
input,
|
|
37
|
+
textarea {
|
|
42
38
|
font-family: inherit;
|
|
43
39
|
font-size: 100%;
|
|
44
40
|
line-height: var(--font-line-height-medium);
|
|
@@ -82,6 +78,10 @@ progress {
|
|
|
82
78
|
vertical-align: baseline;
|
|
83
79
|
}
|
|
84
80
|
|
|
81
|
+
textarea {
|
|
82
|
+
overflow: auto;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
85
|
[type=checkbox],
|
|
86
86
|
[type=radio] {
|
|
87
87
|
box-sizing: border-box;
|
|
@@ -139,6 +139,17 @@ progress {
|
|
|
139
139
|
width: auto;
|
|
140
140
|
}
|
|
141
141
|
|
|
142
|
+
.container {
|
|
143
|
+
--grid-margin: var(--grid-portrait-margin);
|
|
144
|
+
--grid-maxwidth: var(--grid-portrait-maxwidth);
|
|
145
|
+
margin-left: auto;
|
|
146
|
+
margin-right: auto;
|
|
147
|
+
max-width: var(--grid-maxwidth);
|
|
148
|
+
padding-left: var(--grid-margin);
|
|
149
|
+
padding-right: var(--grid-margin);
|
|
150
|
+
width: 100%;
|
|
151
|
+
}
|
|
152
|
+
|
|
142
153
|
.row {
|
|
143
154
|
--grid-gutter: var(--grid-portrait-gutter);
|
|
144
155
|
display: flex;
|
|
@@ -148,24 +159,52 @@ progress {
|
|
|
148
159
|
}
|
|
149
160
|
|
|
150
161
|
@media (min-width: 576px) {
|
|
162
|
+
.container {
|
|
163
|
+
--grid-margin: var(--grid-tablet-margin);
|
|
164
|
+
}
|
|
151
165
|
.row {
|
|
152
166
|
--grid-gutter: var(--grid-tablet-gutter);
|
|
153
167
|
}
|
|
168
|
+
.container {
|
|
169
|
+
--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin));
|
|
170
|
+
}
|
|
154
171
|
}
|
|
155
172
|
@media (min-width: 992px) {
|
|
173
|
+
.container {
|
|
174
|
+
--grid-margin: var(--grid-tablet-margin);
|
|
175
|
+
}
|
|
156
176
|
.row {
|
|
157
177
|
--grid-gutter: var(--grid-tablet-gutter);
|
|
158
178
|
}
|
|
179
|
+
.container {
|
|
180
|
+
--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin));
|
|
181
|
+
}
|
|
159
182
|
}
|
|
160
183
|
@media (min-width: 1280px) {
|
|
184
|
+
.container {
|
|
185
|
+
--grid-margin: var(--grid-desktop-margin);
|
|
186
|
+
}
|
|
161
187
|
.row {
|
|
162
188
|
--grid-gutter: var(--grid-desktop-gutter);
|
|
163
189
|
}
|
|
190
|
+
.container {
|
|
191
|
+
--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin));
|
|
192
|
+
}
|
|
164
193
|
}
|
|
165
194
|
@media (min-width: 1600px) {
|
|
195
|
+
.container {
|
|
196
|
+
--grid-margin: var(--grid-tv-margin);
|
|
197
|
+
}
|
|
166
198
|
.row {
|
|
167
199
|
--grid-gutter: var(--grid-tv-gutter);
|
|
168
200
|
}
|
|
201
|
+
.container {
|
|
202
|
+
--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin));
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.mt-1 {
|
|
207
|
+
margin-top: var(--spacing-scale-half) !important;
|
|
169
208
|
}
|
|
170
209
|
|
|
171
210
|
.mr-1 {
|
|
@@ -180,6 +219,10 @@ progress {
|
|
|
180
219
|
margin-bottom: var(--spacing-scale-2x) !important;
|
|
181
220
|
}
|
|
182
221
|
|
|
222
|
+
.pt-half {
|
|
223
|
+
padding-top: var(--spacing-scale-half) !important;
|
|
224
|
+
}
|
|
225
|
+
|
|
183
226
|
.py-3 {
|
|
184
227
|
padding-bottom: var(--spacing-scale-2x) !important;
|
|
185
228
|
padding-top: var(--spacing-scale-2x) !important;
|
|
@@ -295,6 +338,7 @@ label,
|
|
|
295
338
|
}
|
|
296
339
|
|
|
297
340
|
input,
|
|
341
|
+
textarea,
|
|
298
342
|
.input {
|
|
299
343
|
color: var(--color-light);
|
|
300
344
|
font-size: var(--font-size-scale-up-01);
|
|
@@ -303,19 +347,6 @@ input,
|
|
|
303
347
|
margin-bottom: var(--spacing-scale-half);
|
|
304
348
|
}
|
|
305
349
|
|
|
306
|
-
code,
|
|
307
|
-
.code {
|
|
308
|
-
background: var(--gray-5);
|
|
309
|
-
border-radius: 4px;
|
|
310
|
-
color: var(--gray-80);
|
|
311
|
-
display: inline-block;
|
|
312
|
-
font-family: monospace;
|
|
313
|
-
font-size: var(--font-size-scale-base);
|
|
314
|
-
font-weight: var(--font-weight-medium);
|
|
315
|
-
line-height: var(--font-line-height-low);
|
|
316
|
-
padding: var(--spacing-scale-half);
|
|
317
|
-
}
|
|
318
|
-
|
|
319
350
|
.text-pure-0 {
|
|
320
351
|
color: var(--pure-0) !important;
|
|
321
352
|
}
|
|
@@ -338,6 +369,10 @@ code,
|
|
|
338
369
|
white-space: nowrap !important;
|
|
339
370
|
}
|
|
340
371
|
|
|
372
|
+
.text-base {
|
|
373
|
+
font-size: var(--font-size-scale-base) !important;
|
|
374
|
+
}
|
|
375
|
+
|
|
341
376
|
.highlight {
|
|
342
377
|
background: var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));
|
|
343
378
|
color: var(--status-highlight-text);
|
|
@@ -65,7 +65,7 @@ export class Message {
|
|
|
65
65
|
}
|
|
66
66
|
render() {
|
|
67
67
|
var _a, _b;
|
|
68
|
-
return (h(Host, { key: '
|
|
68
|
+
return (h(Host, { key: '5b8bfb2b3b5c3861cf4e695c1cacb0bd034d4a82' }, this.isFeedback ? (h("div", { class: "mb-3" }, h("span", Object.assign({ class: `feedback ${this.state}`, role: "alert" }, this.inheritedAttributes), this.showIcon ? h("br-icon", { class: "icon-space", "icon-name": this.checkIconState() }) : null, ((_a = this.message) === null || _a === void 0 ? void 0 : _a.length) === 0 ? h("slot", null) : this.message))) : (h("div", Object.assign({ class: this.getCssClassMap(), role: "alert" }, this.inheritedAttributes), this.showIcon && (h("div", { class: "icon" }, h("br-icon", { "icon-name": this.checkIconState(), height: "20", "aria-hidden": "true" }))), h("div", { class: "content", role: "alert" }, ((_b = this.message) === null || _b === void 0 ? void 0 : _b.length) === 0 ? (h("div", null, this.messageTitle && h("strong", null, this.messageTitle), this.messageTitle && !this.isInline && h("br", null), h("slot", null))) : (h("div", null, h("span", { class: "message-title mr-1" }, this.messageTitle), h("span", { class: "message-body" }, this.message)))), this.isClosable && !this.isFeedback && (h("div", { class: "close" }, h("br-button", { shape: "circle", type: "button", "aria-label": "Fechar a mensagem", onClick: this.dismissHandler }, h("br-icon", { "icon-name": "fa-solid:times", "aria-hidden": "true" }))))))));
|
|
69
69
|
}
|
|
70
70
|
static get is() { return "br-message"; }
|
|
71
71
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/message/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/message?tab=designer).\n *\n * @slot default - Utilizado para inserir qualquer conteúdo que será exibido no corpo da mensagem.\n */\n@Component({\n tag: 'br-message',\n styleUrl: 'message.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Message {\n /**\n * Referência ao elemento host do componente.\n * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n */\n @Element() el: HTMLBrMessageElement\n\n @AttachInternals() elementInternals: ElementInternals\n\n /**\n * Define o título da mensagem, que é exibido no início, acima da mensagem principal.\n * Este título serve para destacar a mensagem textual. Não é aplicável para mensagens do tipo feedback.\n */\n @Prop({ reflect: true }) messageTitle: string = ''\n\n /**\n * **[OBRIGATÓRIO]** Define o texto da mensagem que será exibido.\n * Este é o conteúdo principal da mensagem. A propriedade `message` é obrigatória e deve ser fornecida para que a mensagem apareça.\n */\n @Prop({ reflect: true }) message: string = ''\n\n /**\n * Se definido como verdadeiro, o título da mensagem será exibido na mesma linha que a mensagem principal.\n * Isso pode ser útil para criar um layout onde o título e a mensagem estão alinhados horizontalmente.\n */\n @Prop({ reflect: true }) isInline: boolean = false\n\n /**\n * Se definido como verdadeiro, um botão de fechar será exibido para permitir que o usuário feche a mensagem.\n * Este recurso não está disponível para mensagens do tipo feedback.\n */\n @Prop({ reflect: true }) isClosable: boolean = false\n\n /**\n * Se definido como verdadeiro, um ícone associado à mensagem será exibido.\n * Use esta propriedade para mostrar ou ocultar o ícone da mensagem conforme necessário.\n */\n @Prop({ reflect: true }) showIcon: boolean = false\n\n /**\n * Define se a mensagem é do tipo feedback, geralmente usada para fornecer contexto adicional sobre ações do usuário.\n * Exemplos incluem mensagens de validação em campos de formulário. Não disponível para mensagens que não sejam de feedback.\n */\n @Prop({ reflect: true }) isFeedback: boolean = false\n\n /**\n * **[OBRIGATÓRIO]** Define o estado visual da mensagem.\n * Os possíveis valores são:\n * - 'info': Mensagem informativa.\n * - 'warning': Mensagem de aviso.\n * - 'danger': Mensagem de erro ou alerta.\n * - 'success': Mensagem de sucesso.\n * O valor padrão é 'info'.\n */\n @Prop({ reflect: true }) state: 'info' | 'warning' | 'danger' | 'success' = 'info'\n\n /**\n * Emite um evento quando o componente é conectado ao DOM.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n */\n @Event() brDidConnect: EventEmitter<void>\n connectedCallback() {\n this.brDidConnect.emit()\n }\n\n /**\n * Emite um evento antes que o componente seja carregado pela primeira vez.\n * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n */\n @Event() brWillLoad: EventEmitter<void>\n componentWillLoad() {\n this.brWillLoad.emit()\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n /**\n * Emite um evento após o componente ter sido carregado pela primeira vez.\n * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n */\n @Event() brDidLoad: EventEmitter<void>\n componentDidLoad() {\n this.brDidLoad.emit()\n }\n\n /**\n * Emite um evento antes do componente ser renderizado.\n * Utilize este evento para preparar o componente antes de sua renderização.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n */\n @Event() brWillRender: EventEmitter<void>\n componentWillRender() {\n this.brWillRender.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido renderizado.\n * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n */\n @Event() brDidRender: EventEmitter<void>\n componentDidRender() {\n this.brDidRender.emit()\n }\n\n /**\n * Emite um evento para indicar se o componente deve ser atualizado ou não.\n * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n */\n @Event() brShouldUpdate: EventEmitter<void>\n componentShouldUpdate() {\n this.brShouldUpdate.emit()\n }\n\n /**\n * Emite um evento antes de o componente ser atualizado.\n * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n */\n @Event() brWillUpdate: EventEmitter<void>\n componentWillUpdate() {\n this.brWillUpdate.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido atualizado.\n * Utilize este evento para realizar ações após a atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n */\n @Event() brDidUpdate: EventEmitter<void>\n componentDidUpdate() {\n this.brDidUpdate.emit()\n }\n\n /**\n * Emite um evento quando o componente é desconectado do DOM.\n * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n */\n @Event() brDidDisconnect: EventEmitter<void>\n disconnectedCallback() {\n this.brDidDisconnect.emit()\n }\n\n /** Evento emitido quando o usuário fecha a mensagem, se closable for true. */\n @Event() brDidClose: EventEmitter\n private readonly dismissHandler = () => {\n this.brDidClose.emit()\n this.el.remove()\n }\n\n private checkIconState() {\n const iconMap = {\n success: 'fa-solid:check-circle',\n warning: 'fa-solid:exclamation-triangle',\n danger: 'fa-solid:times-circle',\n info: 'fa-solid:info-circle',\n }\n return iconMap[this.state] || 'check-circle' // Valor padrão se não encontrado\n }\n\n private getCssClassMap(): CssClassMap {\n return {\n 'br-message': true,\n [this.state]: true,\n }\n }\n\n private inheritedAttributes: Attributes = {}\n\n render() {\n return (\n <Host>\n {this.isFeedback ? (\n <div class=\"mb-3\">\n <span class={`feedback ${this.state}`} role=\"alert\" {...this.inheritedAttributes}>\n {this.showIcon ? <br-icon class=\"icon-space\" icon-name={this.checkIconState()}></br-icon> : null}\n {this.message?.length === 0 ? <slot></slot> : this.message}\n </span>\n </div>\n ) : (\n <div class={this.getCssClassMap()} role=\"alert\" {...this.inheritedAttributes}>\n {this.showIcon && (\n <div class=\"icon\">\n <br-icon icon-name={this.checkIconState()} height=\"20\" aria-hidden=\"true\"></br-icon>\n </div>\n )}\n <div class=\"content\" role=\"alert\">\n {this.message?.length === 0 ? (\n <div>\n {this.messageTitle && <strong>{this.messageTitle}</strong>}\n {this.messageTitle && !this.isInline && <br />}\n <slot></slot>\n </div>\n ) : (\n <div>\n <span class=\"message-title mr-1\">{this.messageTitle}</span>\n <span class=\"message-body\">{this.message}</span>\n </div>\n )}\n </div>\n {this.isClosable && !this.isFeedback && (\n <div class=\"close\">\n <br-button shape=\"circle\" type=\"button\" aria-label=\"Fechar a mensagem\" onClick={this.dismissHandler}>\n <br-icon icon-name=\"fa-solid:times\" aria-hidden=\"true\"></br-icon>\n </br-button>\n </div>\n )}\n </div>\n )}\n </Host>\n )\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/message/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/message?tab=designer).\n *\n * @slot default - Utilizado para inserir qualquer conteúdo que será exibido no corpo da mensagem.\n */\n@Component({\n tag: 'br-message',\n styleUrl: 'message.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Message {\n /**\n * Referência ao elemento host do componente.\n * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n */\n @Element() el: HTMLBrMessageElement\n\n @AttachInternals() elementInternals: ElementInternals\n\n /**\n * Define o título da mensagem, que é exibido no início, acima da mensagem principal.\n * Este título serve para destacar a mensagem textual. Não é aplicável para mensagens do tipo feedback.\n */\n @Prop({ reflect: true }) messageTitle: string = ''\n\n /**\n * **[OBRIGATÓRIO]** Define o texto da mensagem que será exibido.\n * Este é o conteúdo principal da mensagem. A propriedade `message` é obrigatória e deve ser fornecida para que a mensagem apareça.\n */\n @Prop({ reflect: true }) message: string = ''\n\n /**\n * Se definido como verdadeiro, o título da mensagem será exibido na mesma linha que a mensagem principal.\n * Isso pode ser útil para criar um layout onde o título e a mensagem estão alinhados horizontalmente.\n */\n @Prop({ reflect: true }) isInline: boolean = false\n\n /**\n * Se definido como verdadeiro, um botão de fechar será exibido para permitir que o usuário feche a mensagem.\n * Este recurso não está disponível para mensagens do tipo feedback.\n */\n @Prop({ reflect: true }) isClosable: boolean = false\n\n /**\n * Se definido como verdadeiro, um ícone associado à mensagem será exibido.\n * Use esta propriedade para mostrar ou ocultar o ícone da mensagem conforme necessário.\n */\n @Prop({ reflect: true }) showIcon: boolean = false\n\n /**\n * Define se a mensagem é do tipo feedback, geralmente usada para fornecer contexto adicional sobre ações do usuário.\n * Exemplos incluem mensagens de validação em campos de formulário. Não disponível para mensagens que não sejam de feedback.\n */\n @Prop({ reflect: true }) isFeedback: boolean = false\n\n /**\n * **[OBRIGATÓRIO]** Define o estado visual da mensagem.\n * Os possíveis valores são:\n * - 'info': Mensagem informativa.\n * - 'warning': Mensagem de aviso.\n * - 'danger': Mensagem de erro ou alerta.\n * - 'success': Mensagem de sucesso.\n * O valor padrão é 'info'.\n */\n @Prop({ reflect: true }) state: 'info' | 'warning' | 'danger' | 'success' = 'info'\n\n /**\n * Emite um evento quando o componente é conectado ao DOM.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n */\n @Event() brDidConnect: EventEmitter<void>\n connectedCallback() {\n this.brDidConnect.emit()\n }\n\n /**\n * Emite um evento antes que o componente seja carregado pela primeira vez.\n * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n */\n @Event() brWillLoad: EventEmitter<void>\n componentWillLoad() {\n this.brWillLoad.emit()\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n /**\n * Emite um evento após o componente ter sido carregado pela primeira vez.\n * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n */\n @Event() brDidLoad: EventEmitter<void>\n componentDidLoad() {\n this.brDidLoad.emit()\n }\n\n /**\n * Emite um evento antes do componente ser renderizado.\n * Utilize este evento para preparar o componente antes de sua renderização.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n */\n @Event() brWillRender: EventEmitter<void>\n componentWillRender() {\n this.brWillRender.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido renderizado.\n * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n */\n @Event() brDidRender: EventEmitter<void>\n componentDidRender() {\n this.brDidRender.emit()\n }\n\n /**\n * Emite um evento para indicar se o componente deve ser atualizado ou não.\n * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n */\n @Event() brShouldUpdate: EventEmitter<void>\n componentShouldUpdate() {\n this.brShouldUpdate.emit()\n }\n\n /**\n * Emite um evento antes de o componente ser atualizado.\n * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n */\n @Event() brWillUpdate: EventEmitter<void>\n componentWillUpdate() {\n this.brWillUpdate.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido atualizado.\n * Utilize este evento para realizar ações após a atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n */\n @Event() brDidUpdate: EventEmitter<void>\n componentDidUpdate() {\n this.brDidUpdate.emit()\n }\n\n /**\n * Emite um evento quando o componente é desconectado do DOM.\n * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n */\n @Event() brDidDisconnect: EventEmitter<void>\n disconnectedCallback() {\n this.brDidDisconnect.emit()\n }\n\n /** Evento emitido quando o usuário fecha a mensagem, se closable for true. */\n @Event() brDidClose: EventEmitter\n private readonly dismissHandler = () => {\n this.brDidClose.emit()\n this.el.remove()\n }\n\n private checkIconState() {\n const iconMap = {\n success: 'fa-solid:check-circle',\n warning: 'fa-solid:exclamation-triangle',\n danger: 'fa-solid:times-circle',\n info: 'fa-solid:info-circle',\n }\n return iconMap[this.state] || 'check-circle' // Valor padrão se não encontrado\n }\n\n private getCssClassMap(): CssClassMap {\n return {\n 'br-message': true,\n [this.state]: true,\n }\n }\n\n private inheritedAttributes: Attributes = {}\n\n render() {\n return (\n <Host>\n {this.isFeedback ? (\n <div class=\"mb-3\">\n <span class={`feedback ${this.state}`} role=\"alert\" {...this.inheritedAttributes}>\n {this.showIcon ? <br-icon class=\"icon-space\" icon-name={this.checkIconState()}></br-icon> : null}\n {this.message?.length === 0 ? <slot></slot> : this.message}\n </span>\n </div>\n ) : (\n <div class={this.getCssClassMap()} role=\"alert\" {...this.inheritedAttributes}>\n {this.showIcon && (\n <div class=\"icon\">\n <br-icon icon-name={this.checkIconState()} height=\"20\" aria-hidden=\"true\"></br-icon>\n </div>\n )}\n <div class=\"content\" role=\"alert\">\n {this.message?.length === 0 ? (\n <div>\n {this.messageTitle && <strong>{this.messageTitle}</strong>}\n {this.messageTitle && !this.isInline && <br />}\n <slot></slot>\n </div>\n ) : (\n <div>\n <span class=\"message-title mr-1\">{this.messageTitle}</span>\n <span class=\"message-body\">{this.message}</span>\n </div>\n )}\n </div>\n {this.isClosable && !this.isFeedback && (\n <div class=\"close\">\n <br-button shape=\"circle\" type=\"button\" aria-label=\"Fechar a mensagem\" onClick={this.dismissHandler}>\n <br-icon icon-name=\"fa-solid:times\" aria-hidden=\"true\"></br-icon>\n </br-button>\n </div>\n )}\n </div>\n )}\n </Host>\n )\n }\n}\n"]}
|