@nova-design-system/nova-react 3.0.0-beta.47 → 3.1.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/dist/cjs/{constants-98e2dcc2-C0SBCapP.js → constants-b97e736d-BzFAKCkR.js} +11 -0
- package/dist/cjs/{index-Byv3Vmev.js → index-Cn-oNJnW.js} +1839 -1420
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/{nv-alert.entry-BXY4KXbF.js → nv-alert.entry-BFwufSUQ.js} +11 -11
- package/dist/cjs/{nv-avatar.entry-BnPSKkJJ.js → nv-avatar.entry-Do1K4s3s.js} +7 -7
- package/dist/cjs/nv-badge_2.entry-NTGHyFdg.js +204 -0
- package/dist/cjs/{nv-breadcrumb.entry-D5vGHLOG.js → nv-breadcrumb.entry-oPVGJYlk.js} +1 -1
- package/dist/cjs/{nv-breadcrumbs.entry-CsaqAsnb.js → nv-breadcrumbs.entry-BsOw153b.js} +1 -1
- package/dist/cjs/{nv-button.entry-DzZfGZGy.js → nv-button.entry-13tdBiRr.js} +7 -7
- package/dist/cjs/nv-calendar.entry-u9MgGb83.js +1064 -0
- package/dist/cjs/{nv-col.entry-Cng8NaTW.js → nv-col.entry-DFhv-GI7.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-BbAOzpiO.js → nv-datagrid.entry-BoB17gvI.js} +377 -40
- package/dist/cjs/{nv-datagridcolumn.entry-CRogHbVM.js → nv-datagridcolumn.entry-C3MYBmfS.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-BSIZGYGF.js → nv-dialog.entry-OA3qL3Tx.js} +19 -13
- package/dist/cjs/{nv-dialogfooter_2.entry-Q4_li_QU.js → nv-dialogfooter_2.entry-LAQYSiGV.js} +3 -3
- package/dist/cjs/{nv-fieldcheckbox.entry-DmgzfmRd.js → nv-fieldcheckbox.entry-CP7SDzVO.js} +1 -1
- package/dist/cjs/{nv-fielddate.entry-qAvLX_Ru.js → nv-fielddate.entry-CD7PX6yA.js} +9 -18
- package/dist/cjs/{nv-fielddaterange.entry-DVB8Rwxk.js → nv-fielddaterange.entry-BVBVGmly.js} +27 -29
- package/dist/cjs/{nv-fielddropdown.entry-DKXmoXeW.js → nv-fielddropdown.entry-Nwric1vT.js} +13 -6
- package/dist/cjs/{nv-fielddropdownitem.entry-BVLVXi0e.js → nv-fielddropdownitem.entry-CiqSw5VL.js} +2 -2
- package/dist/cjs/{nv-fieldmultiselect.entry-DrTbd3Dj.js → nv-fieldmultiselect.entry-QKNIBcW1.js} +11 -5
- package/dist/cjs/nv-fieldnumber.entry-DfHcI-sO.js +130 -0
- package/dist/cjs/nv-fieldpassword.entry-b2pUmS8F.js +121 -0
- package/dist/cjs/{nv-fieldradio.entry-CVEY4v6F.js → nv-fieldradio.entry-Dxc6ZCyb.js} +4 -4
- package/dist/cjs/{nv-fieldselect.entry-BrCUuRWa.js → nv-fieldselect.entry-Cys0KRyG.js} +11 -7
- package/dist/cjs/nv-fieldtext.entry-DCZWLFFp.js +123 -0
- package/dist/cjs/{nv-fieldtextarea.entry-B4qiLmX1.js → nv-fieldtextarea.entry-DEeRdtZ7.js} +9 -5
- package/dist/cjs/{nv-fieldtime.entry-Bp2IWjhN.js → nv-fieldtime.entry-BqxiFlLI.js} +71 -68
- package/dist/cjs/nv-icon.entry-CzEdUDdA.js +79 -0
- package/dist/cjs/{nv-iconbutton_2.entry-BRPAGl2S.js → nv-iconbutton_2.entry-BLNrQz9Q.js} +3 -3
- package/dist/cjs/{nv-menu.entry-BiWiIZAm.js → nv-menu.entry-7IDfPmZ8.js} +4 -2
- package/dist/cjs/{nv-menuitem.entry-CFkXoZ_r.js → nv-menuitem.entry-B9cjy7O8.js} +2 -2
- package/dist/cjs/{nv-popover.entry-KT1iQUJk.js → nv-popover.entry-ChLYZ3zY.js} +2 -2
- package/dist/cjs/{nv-row.entry-Cs2GDrcu.js → nv-row.entry-DiLY8Vbc.js} +2 -2
- package/dist/cjs/{nv-stack.entry-Ci7pxGSo.js → nv-stack.entry-MpPzmg5_.js} +2 -2
- package/dist/cjs/{nv-table.entry-N4MV8Y6E.js → nv-table.entry-cME3Zuq2.js} +3 -3
- package/dist/cjs/{nv-tablecolumn.entry-CTz4jsZl.js → nv-tablecolumn.entry-DSctDxCS.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-m10-ncYR.js → nv-toggle.entry-EBWm3Xy5.js} +3 -3
- package/dist/cjs/{nv-tooltip.entry-B6aRDto3.js → nv-tooltip.entry-q6rJLq1C.js} +2 -2
- package/dist/generated/components.js +4 -1
- package/dist/types/generated/components.d.ts +14 -7
- package/package.json +1 -1
- package/dist/cjs/nv-badge_2.entry-BsI3B8Rr.js +0 -195
- package/dist/cjs/nv-calendar.entry-CGKv_-gO.js +0 -1065
- package/dist/cjs/nv-fieldnumber.entry-DegbEHRL.js +0 -126
- package/dist/cjs/nv-fieldpassword.entry-gqjlEl7a.js +0 -117
- package/dist/cjs/nv-fieldtext.entry-q9NnqL5c.js +0 -119
- package/dist/cjs/nv-icon.entry-B1ax9cJS.js +0 -79
package/dist/cjs/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
|
-
var
|
|
5
|
+
var constantsB97e736d = require('./constants-b97e736d-BzFAKCkR.js');
|
|
6
6
|
var timeline_animation1b88f052 = require('./timeline.animation-1b88f052-B8-vCVrY.js');
|
|
7
7
|
var fade_animation2a077983 = require('./fade.animation-2a077983-aKN0EDTo.js');
|
|
8
8
|
require('react');
|
|
9
9
|
|
|
10
|
-
const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
|
|
10
|
+
const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
|
|
11
11
|
const NvAlertStyle0 = nvAlertCss;
|
|
12
12
|
|
|
13
13
|
const NvAlert = class {
|
|
@@ -49,11 +49,11 @@ const NvAlert = class {
|
|
|
49
49
|
* Passes the original event from the close button to the close event detail.
|
|
50
50
|
* @param {MouseEvent} originalEvent - The original event from the close button.
|
|
51
51
|
*/
|
|
52
|
-
this.handleDismiss = (
|
|
52
|
+
this.handleDismiss = () => {
|
|
53
53
|
if (!this.preventAutoClose) {
|
|
54
54
|
this.hidden = true;
|
|
55
55
|
}
|
|
56
|
-
this.closeClicked.emit(
|
|
56
|
+
this.closeClicked.emit();
|
|
57
57
|
};
|
|
58
58
|
/**
|
|
59
59
|
* By default an icon is linked to the feedback type
|
|
@@ -61,15 +61,15 @@ const NvAlert = class {
|
|
|
61
61
|
*/
|
|
62
62
|
this.getDefaultIcon = () => {
|
|
63
63
|
switch (this.feedback) {
|
|
64
|
-
case
|
|
64
|
+
case constantsB97e736d.FeedbackColors.Warning:
|
|
65
65
|
return 'alert-circle';
|
|
66
|
-
case
|
|
66
|
+
case constantsB97e736d.FeedbackColors.Information:
|
|
67
67
|
return 'info-circle';
|
|
68
|
-
case
|
|
68
|
+
case constantsB97e736d.FeedbackColors.Success:
|
|
69
69
|
return 'circle-check';
|
|
70
|
-
case
|
|
70
|
+
case constantsB97e736d.FeedbackColors.Error:
|
|
71
71
|
return 'alert-circle';
|
|
72
|
-
case
|
|
72
|
+
case constantsB97e736d.FeedbackColors.Neutral:
|
|
73
73
|
return 'help';
|
|
74
74
|
default:
|
|
75
75
|
return 'info-circle';
|
|
@@ -161,7 +161,7 @@ const NvAlert = class {
|
|
|
161
161
|
//#region RENDER
|
|
162
162
|
render() {
|
|
163
163
|
var _a;
|
|
164
|
-
return (index.h(index.Host, { key: '
|
|
164
|
+
return (index.h(index.Host, { key: '8c775b0d81d4f6f82421b667925e1ceafead5b2d', role: "alert", class: clsx297c1ffe.clsx('root', `feedback-${this.feedback}`) }, index.h("nv-icon", { key: 'e42f28e360d600c9863fb7f11eab2a1c501bb6ce', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), index.h("div", { key: '87f7d65ea812afda0ce6ba6ace6e443dd53263da', class: "content" }, this.heading && index.h("p", { key: '8150784a2663d47410fd6b92ca678f756f086f28', class: "heading" }, this.heading), this.message && index.h("p", { key: '27f029f2ded81f82e260dc0f2087d46ba5cd7e62', class: "message" }, this.message), index.h("slot", { key: '3256f379c6d7ea5dab9d284b9229ceffb55e7443' })), this.dismissible && (index.h("button", { key: '6b7f333b26ab17c2c523a3c9933599176a9152c0', class: "close", type: "button", onClick: this.handleDismiss }, index.h("nv-icon", { key: 'badcf4153b6add49042b91415e010f662a042e61', name: "x", size: "sm" })))));
|
|
165
165
|
}
|
|
166
166
|
get ref() { return index.getElement(this); }
|
|
167
167
|
static get watchers() { return {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
|
-
var
|
|
5
|
+
var constantsB97e736d = require('./constants-b97e736d-BzFAKCkR.js');
|
|
6
6
|
require('react');
|
|
7
7
|
|
|
8
8
|
const nvAvatarCss = "nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
|
|
@@ -23,19 +23,19 @@ const NvAvatar = class {
|
|
|
23
23
|
}
|
|
24
24
|
componentWillRender() {
|
|
25
25
|
if (this.xsmall) {
|
|
26
|
-
this.size =
|
|
26
|
+
this.size = constantsB97e736d.SemanticSizes.ExtraSmall;
|
|
27
27
|
}
|
|
28
28
|
if (this.small) {
|
|
29
|
-
this.size =
|
|
29
|
+
this.size = constantsB97e736d.SemanticSizes.Small;
|
|
30
30
|
}
|
|
31
31
|
if (this.medium) {
|
|
32
|
-
this.size =
|
|
32
|
+
this.size = constantsB97e736d.SemanticSizes.Medium;
|
|
33
33
|
}
|
|
34
34
|
if (this.large) {
|
|
35
|
-
this.size =
|
|
35
|
+
this.size = constantsB97e736d.SemanticSizes.Large;
|
|
36
36
|
}
|
|
37
37
|
if (this.xlarge) {
|
|
38
|
-
this.size =
|
|
38
|
+
this.size = constantsB97e736d.SemanticSizes.ExtraLarge;
|
|
39
39
|
}
|
|
40
40
|
if (this.text) {
|
|
41
41
|
this.initials = this.text;
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
|
+
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
|
+
var timeline_animation1b88f052 = require('./timeline.animation-1b88f052-B8-vCVrY.js');
|
|
6
|
+
var fade_animation2a077983 = require('./fade.animation-2a077983-aKN0EDTo.js');
|
|
7
|
+
require('react');
|
|
8
|
+
|
|
9
|
+
const nvBadgeCss = "nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.with-gap.is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge:not(.with-gap).is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background);border-color:var(--color-rainbow-3-border)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background);border-color:var(--color-rainbow-4-border)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background);border-color:var(--color-rainbow-7-border)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background);border-color:var(--color-rainbow-10-border)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge.badge-error{color:var(--color-feedback-error-low-text);background-color:var(--color-feedback-error-low-background);border-color:var(--color-feedback-error-low-border)}nv-badge.badge-error .close:focus,nv-badge.badge-error .close:focus-within{outline:none}nv-badge.badge-error .close:focus-visible,nv-badge.badge-error .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-error-low-content, var(--color-feedback-error-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-error nv-icon{color:var(--color-feedback-error-low-icon)}nv-badge.badge-information{color:var(--color-feedback-information-low-text);background-color:var(--color-feedback-information-low-background);border-color:var(--color-feedback-information-low-border)}nv-badge.badge-information .close:focus,nv-badge.badge-information .close:focus-within{outline:none}nv-badge.badge-information .close:focus-visible,nv-badge.badge-information .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-information-low-content, var(--color-feedback-information-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-information nv-icon{color:var(--color-feedback-information-low-icon)}nv-badge.badge-neutral{color:var(--color-feedback-neutral-low-text);background-color:var(--color-feedback-neutral-low-background);border-color:var(--color-feedback-neutral-low-border)}nv-badge.badge-neutral .close:focus,nv-badge.badge-neutral .close:focus-within{outline:none}nv-badge.badge-neutral .close:focus-visible,nv-badge.badge-neutral .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-neutral-low-content, var(--color-feedback-neutral-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-neutral nv-icon{color:var(--color-feedback-neutral-low-icon)}nv-badge.badge-success{color:var(--color-feedback-success-low-text);background-color:var(--color-feedback-success-low-background);border-color:var(--color-feedback-success-low-border)}nv-badge.badge-success .close:focus,nv-badge.badge-success .close:focus-within{outline:none}nv-badge.badge-success .close:focus-visible,nv-badge.badge-success .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-success-low-content, var(--color-feedback-success-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-success nv-icon{color:var(--color-feedback-success-low-icon)}nv-badge.badge-warning{color:var(--color-feedback-warning-low-text);background-color:var(--color-feedback-warning-low-background);border-color:var(--color-feedback-warning-low-border)}nv-badge.badge-warning .close:focus,nv-badge.badge-warning .close:focus-within{outline:none}nv-badge.badge-warning .close:focus-visible,nv-badge.badge-warning .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-warning-low-content, var(--color-feedback-warning-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-warning nv-icon{color:var(--color-feedback-warning-low-icon)}nv-badge.badge-amber{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-amber .close:focus,nv-badge.badge-amber .close:focus-within{outline:none}nv-badge.badge-amber .close:focus-visible,nv-badge.badge-amber .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-amber-content, var(--color-rainbow-1-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-amber nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-orange{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-orange .close:focus,nv-badge.badge-orange .close:focus-within{outline:none}nv-badge.badge-orange .close:focus-visible,nv-badge.badge-orange .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-orange-content, var(--color-rainbow-2-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-orange nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-turquoise{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-turquoise .close:focus,nv-badge.badge-turquoise .close:focus-within{outline:none}nv-badge.badge-turquoise .close:focus-visible,nv-badge.badge-turquoise .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-turquoise-content, var(--color-rainbow-5-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-turquoise nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-crimson{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-crimson .close:focus,nv-badge.badge-crimson .close:focus-within{outline:none}nv-badge.badge-crimson .close:focus-visible,nv-badge.badge-crimson .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-crimson-content, var(--color-rainbow-6-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-crimson nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-lime{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-lime .close:focus,nv-badge.badge-lime .close:focus-within{outline:none}nv-badge.badge-lime .close:focus-visible,nv-badge.badge-lime .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-lime-content, var(--color-rainbow-9-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-lime nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-petrol{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-petrol .close:focus,nv-badge.badge-petrol .close:focus-within{outline:none}nv-badge.badge-petrol .close:focus-visible,nv-badge.badge-petrol .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-petrol-content, var(--color-rainbow-8-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-petrol nv-icon{color:var(--color-rainbow-8-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important;text-align:center}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
|
|
10
|
+
const NvBadgeStyle0 = nvBadgeCss;
|
|
11
|
+
|
|
12
|
+
const NvBadge = class {
|
|
13
|
+
constructor(hostRef) {
|
|
14
|
+
index.registerInstance(this, hostRef);
|
|
15
|
+
this.closeClicked = index.createEvent(this, "closeClicked");
|
|
16
|
+
this.hiddenChanged = index.createEvent(this, "hiddenChanged");
|
|
17
|
+
this.hiddenChangedComplete = index.createEvent(this, "hiddenChangedComplete");
|
|
18
|
+
/****************************************************************************/
|
|
19
|
+
//#region DEPRECATED
|
|
20
|
+
/**
|
|
21
|
+
* Whether the badge is dismissible.
|
|
22
|
+
* @deprecated use dismissible instead.
|
|
23
|
+
*/
|
|
24
|
+
this.dismissal = false;
|
|
25
|
+
//#endregion DEPRECATED
|
|
26
|
+
/****************************************************************************/
|
|
27
|
+
//#region PROPERTIES
|
|
28
|
+
/**
|
|
29
|
+
* The color of the badge.
|
|
30
|
+
* deprecated Use status values or named colors instead.
|
|
31
|
+
* Use a string between 1 to 10
|
|
32
|
+
* or one of the status values: error, information, neutral, success, warning
|
|
33
|
+
* or one of the color names: amber, orange, turquoise, crimson, lime
|
|
34
|
+
*/
|
|
35
|
+
this.color = '1';
|
|
36
|
+
/**
|
|
37
|
+
* Main content of the badge.
|
|
38
|
+
*/
|
|
39
|
+
this.label = null;
|
|
40
|
+
/**
|
|
41
|
+
* The lead icon of the badge.
|
|
42
|
+
*/
|
|
43
|
+
this.leadIcon = null;
|
|
44
|
+
/**
|
|
45
|
+
* Whether the badge is dismissible.
|
|
46
|
+
*/
|
|
47
|
+
this.dismissible = false;
|
|
48
|
+
/**
|
|
49
|
+
* Controls the visibility of the badge. Will animate with fade and collapse.
|
|
50
|
+
*/
|
|
51
|
+
this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
|
|
52
|
+
/**
|
|
53
|
+
* When true, the alert does not automatically close upon dismissing.
|
|
54
|
+
* Useful for externally controlled component behavior.
|
|
55
|
+
*/
|
|
56
|
+
this.preventAutoClose = false;
|
|
57
|
+
/**
|
|
58
|
+
* When true, the badge will only display an icon without label.
|
|
59
|
+
* The label will be visually hidden but still accessible for screen readers.
|
|
60
|
+
*/
|
|
61
|
+
this.isIconOnly = false;
|
|
62
|
+
//#endregion LIFECYCLE
|
|
63
|
+
/****************************************************************************/
|
|
64
|
+
//#region METHODS
|
|
65
|
+
/**
|
|
66
|
+
* Handles the close button click.
|
|
67
|
+
*/
|
|
68
|
+
this.handleClose = () => {
|
|
69
|
+
if (!this.preventAutoClose) {
|
|
70
|
+
this.hidden = true;
|
|
71
|
+
}
|
|
72
|
+
this.closeClicked.emit();
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
//#endregion EVENTS
|
|
76
|
+
/****************************************************************************/
|
|
77
|
+
//#region WATCHERS
|
|
78
|
+
/**
|
|
79
|
+
* Handles the dismissal prop change.
|
|
80
|
+
* @param {boolean} dismissal - The new dismissal value.
|
|
81
|
+
*/
|
|
82
|
+
handleDismissalChange(dismissal) {
|
|
83
|
+
this.dismissible = dismissal;
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* Handles the icon prop change.
|
|
87
|
+
* @param {string} icon - The new icon value.
|
|
88
|
+
*/
|
|
89
|
+
handleIconChange(icon) {
|
|
90
|
+
this.leadIcon = icon;
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Handles the hidden prop change.
|
|
94
|
+
* @param {boolean} hidden - The new hidden value.
|
|
95
|
+
*/
|
|
96
|
+
async handleHiddenChange(hidden) {
|
|
97
|
+
this.hiddenChanged.emit(hidden);
|
|
98
|
+
if (this._isHidden === true)
|
|
99
|
+
this._isHidden = hidden;
|
|
100
|
+
const { fadeIn, fadeOut } = fade_animation2a077983.useFade(this.ref, { duration: 150 });
|
|
101
|
+
const { collapse, expand } = timeline_animation1b88f052.useCollapse(this.ref, { duration: 150 });
|
|
102
|
+
if (hidden === true)
|
|
103
|
+
await timeline_animation1b88f052.timeline(fadeOut, collapse).start();
|
|
104
|
+
if (hidden === false)
|
|
105
|
+
await timeline_animation1b88f052.timeline(expand, fadeIn).start();
|
|
106
|
+
this.hiddenChangedComplete.emit(hidden);
|
|
107
|
+
if (this._isHidden === false)
|
|
108
|
+
this._isHidden = hidden;
|
|
109
|
+
}
|
|
110
|
+
//#endregion WATCHERS
|
|
111
|
+
/****************************************************************************/
|
|
112
|
+
//#region LIFECYCLE
|
|
113
|
+
/**
|
|
114
|
+
* Component will load.
|
|
115
|
+
*/
|
|
116
|
+
componentWillLoad() {
|
|
117
|
+
if (this.dismissal) {
|
|
118
|
+
this.dismissible = this.dismissal;
|
|
119
|
+
}
|
|
120
|
+
if (this.icon != null && this.icon != '') {
|
|
121
|
+
this.leadIcon = this.icon;
|
|
122
|
+
}
|
|
123
|
+
if (this.hidden) {
|
|
124
|
+
this._isHidden = true;
|
|
125
|
+
const { setCollapsed } = timeline_animation1b88f052.useCollapse(this.ref);
|
|
126
|
+
const { setFadeOut } = fade_animation2a077983.useFade(this.ref);
|
|
127
|
+
setCollapsed();
|
|
128
|
+
setFadeOut();
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
//#endregion METHODS
|
|
132
|
+
/****************************************************************************/
|
|
133
|
+
//#region RENDER
|
|
134
|
+
render() {
|
|
135
|
+
return (index.h(index.Host, { key: 'cde39aa20bdbc6529d317a1f9f0c04f7bf79112e', class: clsx297c1ffe.clsx(`badge-${this.color}`, {
|
|
136
|
+
'has-close': this.dismissible,
|
|
137
|
+
'with-gap': this.dismissible || this.label,
|
|
138
|
+
'visually-hidden': this._isHidden,
|
|
139
|
+
'is-icon-only': this.isIconOnly,
|
|
140
|
+
}) }, index.h("slot", { key: 'cd0ebe919619431f096fe87e6e9412cbed88e467', name: "leading-icon" }, this.leadIcon && index.h("nv-icon", { key: 'b010613a9ffe4b9ae027e128ba519c43d4211d7d', name: this.leadIcon, size: "sm" })), index.h("span", { key: '5035aa8d35272f716442731b9493483835e083c6', class: clsx297c1ffe.clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, index.h("slot", { key: '81a475c0081911d8b4606450ecdf085a4f7e2853' })), this.dismissible && (index.h("button", { key: '402fe040a11cae0974ffa911b81f781230fd0516', onClick: this.handleClose, class: "close", type: "button" }, index.h("nv-icon", { key: '6f32fa2ae87170963c22bd35cebcf18500426570', name: "x", size: "sm" })))));
|
|
141
|
+
}
|
|
142
|
+
get ref() { return index.getElement(this); }
|
|
143
|
+
static get watchers() { return {
|
|
144
|
+
"dismissal": ["handleDismissalChange"],
|
|
145
|
+
"icon": ["handleIconChange"],
|
|
146
|
+
"hidden": ["handleHiddenChange"]
|
|
147
|
+
}; }
|
|
148
|
+
};
|
|
149
|
+
NvBadge.style = NvBadgeStyle0;
|
|
150
|
+
|
|
151
|
+
const nvFielddropdownitemcheckCss = "nv-fielddropdownitemcheck{cursor:pointer;display:flex;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);border-radius:var(--list-dropdown-item-radius)}nv-fielddropdownitemcheck slot-fb,nv-fielddropdownitemcheck span{all:unset}nv-fielddropdownitemcheck:hover{background-color:var(--components-list-dropdown-item-background-hover)}";
|
|
152
|
+
const NvFielddropdownitemcheckStyle0 = nvFielddropdownitemcheckCss;
|
|
153
|
+
|
|
154
|
+
const NvFielddropdownitemcheck = class {
|
|
155
|
+
constructor(hostRef) {
|
|
156
|
+
index.registerInstance(this, hostRef);
|
|
157
|
+
this.itemChecked = index.createEvent(this, "itemChecked");
|
|
158
|
+
/****************************************************************************/
|
|
159
|
+
//#region PROPERTIES
|
|
160
|
+
/**
|
|
161
|
+
* Indicates whether the checkbox is selected.
|
|
162
|
+
*/
|
|
163
|
+
this.checked = false;
|
|
164
|
+
/**
|
|
165
|
+
* Disables the item, preventing any user interaction.
|
|
166
|
+
*/
|
|
167
|
+
this.disabled = false;
|
|
168
|
+
/**
|
|
169
|
+
* when the child <nv-fieldcheckbox> change its `checked` state,
|
|
170
|
+
* update `this.checked` and emit `itemChecked`.
|
|
171
|
+
* @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.
|
|
172
|
+
*/
|
|
173
|
+
this.onFieldcheckboxChanged = (event) => {
|
|
174
|
+
if (this.disabled)
|
|
175
|
+
return;
|
|
176
|
+
// NvFieldcheckbox has emitted checkedChanged
|
|
177
|
+
this.checked = event.detail; // get the new state
|
|
178
|
+
this.itemChecked.emit({
|
|
179
|
+
value: this.value,
|
|
180
|
+
checked: this.checked,
|
|
181
|
+
group: this.group,
|
|
182
|
+
});
|
|
183
|
+
};
|
|
184
|
+
/** Make sure the checkbox is checked when clicked anywhere in the item. */
|
|
185
|
+
this.handleClick = () => {
|
|
186
|
+
if (this.disabled)
|
|
187
|
+
return;
|
|
188
|
+
if (this.el.querySelector('input').checked) {
|
|
189
|
+
this.checked = false;
|
|
190
|
+
}
|
|
191
|
+
else {
|
|
192
|
+
this.checked = true;
|
|
193
|
+
}
|
|
194
|
+
};
|
|
195
|
+
}
|
|
196
|
+
render() {
|
|
197
|
+
return (index.h(index.Host, { key: '4defa520c983278534b87cbc632269d1fcf9517e', onClick: this.handleClick }, index.h("nv-fieldcheckbox", { key: '772ef205d9a14d51193f926ecb8280bce57ca8a9', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged })));
|
|
198
|
+
}
|
|
199
|
+
get el() { return index.getElement(this); }
|
|
200
|
+
};
|
|
201
|
+
NvFielddropdownitemcheck.style = NvFielddropdownitemcheckStyle0;
|
|
202
|
+
|
|
203
|
+
exports.nv_badge = NvBadge;
|
|
204
|
+
exports.nv_fielddropdownitemcheck = NvFielddropdownitemcheck;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
4
|
require('react');
|
|
5
5
|
|
|
6
6
|
const nvBreadcrumbsCss = "nv-breadcrumbs{display:block}nv-breadcrumbs>ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--breadcrumb-padding-y)}nv-breadcrumbs nv-breadcrumb:last-child [data-scope=separator],nv-breadcrumbs nv-breadcrumb:last-child [slot=separator]{display:none}";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
4
|
-
var
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
|
+
var constantsB97e736d = require('./constants-b97e736d-BzFAKCkR.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
7
7
|
const nvButtonCss = "nv-button{text-decoration:none;display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:\"TT Norms Pro\", sans-serif;transition:background-color 150ms ease-out;user-select:none;cursor:pointer;height:fit-content;width:fit-content}nv-button[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-button[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-button[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-button[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-button[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-button[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-button[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-button[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-button[emphasis=high]{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high]:hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high]:active{background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=high][active]:not([active=false]){background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high][danger]:not([danger=false]){background:var(--components-button-destructive-high-background);border:1px solid transparent;color:var(--components-button-destructive-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):hover{background:var(--components-button-destructive-high-background-hover);border:1px solid transparent;color:var(--components-button-destructive-high-text-hover)}nv-button[emphasis=high][danger]:not([danger=false]):focus,nv-button[emphasis=high][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=high][danger]:not([danger=false]):focus-visible,nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium]:hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium]:active{background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[emphasis=medium]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=medium][active]:not([active=false]){background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium][danger]:not([danger=false]){background:var(--components-button-destructive-medium-background);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):hover{background:var(--components-button-destructive-medium-background-hover);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text-hover)}nv-button[emphasis=medium][danger]:not([danger=false]):focus,nv-button[emphasis=medium][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible,nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=low][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low][danger]:not([danger=false]){background:var(--components-button-destructive-low-background);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):hover{background:var(--components-button-destructive-low-background-hover);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text-hover)}nv-button[emphasis=low][danger]:not([danger=false]):focus,nv-button[emphasis=low][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=low][danger]:not([danger=false]):focus-visible,nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[emphasis=lower]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=lower][active]:not([active=false]){background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower][danger]:not([danger=false]){background:var(--components-button-destructive-lower-background);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):hover{background:var(--components-button-destructive-lower-background-hover);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text-hover)}nv-button[emphasis=lower][danger]:not([danger=false]):focus,nv-button[emphasis=lower][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible,nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[fluid]:not([fluid=false]){width:100%}nv-button[loading]:not([loading=false]) [slot=leading-icon]{display:none}";
|
|
@@ -76,11 +76,11 @@ const NvButton = class {
|
|
|
76
76
|
event.preventDefault();
|
|
77
77
|
return;
|
|
78
78
|
}
|
|
79
|
-
if (this.type !==
|
|
79
|
+
if (this.type !== constantsB97e736d.ButtonType.Button &&
|
|
80
80
|
(this.form || ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.form))) {
|
|
81
81
|
this.processFormAction();
|
|
82
82
|
}
|
|
83
|
-
else if (this.form && this.type ===
|
|
83
|
+
else if (this.form && this.type === constantsB97e736d.ButtonType.Button) {
|
|
84
84
|
console.warn('Button has a form id but is not of type submit or reset so no form action will be processed.', `Button:`, this.el);
|
|
85
85
|
}
|
|
86
86
|
};
|
|
@@ -99,10 +99,10 @@ const NvButton = class {
|
|
|
99
99
|
return;
|
|
100
100
|
}
|
|
101
101
|
switch (this.type) {
|
|
102
|
-
case
|
|
102
|
+
case constantsB97e736d.ButtonType.Submit:
|
|
103
103
|
formElement.requestSubmit();
|
|
104
104
|
break;
|
|
105
|
-
case
|
|
105
|
+
case constantsB97e736d.ButtonType.Reset:
|
|
106
106
|
formElement.reset();
|
|
107
107
|
break;
|
|
108
108
|
}
|
|
@@ -150,7 +150,7 @@ const NvButton = class {
|
|
|
150
150
|
/****************************************************************************/
|
|
151
151
|
//#region RENDER
|
|
152
152
|
render() {
|
|
153
|
-
return (index.h(index.Host, { key: 'f8b20f9052d71f93eaf03f98550a7237225cadf2', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (index.h("nv-loader", { key: 'c1cefa72ee24dad9ce16bbfe1f51e6cec6dc7fbc', size: this.size ===
|
|
153
|
+
return (index.h(index.Host, { key: 'f8b20f9052d71f93eaf03f98550a7237225cadf2', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (index.h("nv-loader", { key: 'c1cefa72ee24dad9ce16bbfe1f51e6cec6dc7fbc', size: this.size === constantsB97e736d.ButtonSize.Large ? 'sm' : 'xs' })), index.h("slot", { key: '36a311494e45ebc23b1133923a676d58e87f3800', name: "leading-icon" }), index.h("slot", { key: 'f6fea826cda9a09f7152f4e30cc6981c89e73ebe' }), index.h("slot", { key: 'd59c23ff85ea7efc16c69c5adbeb0e91786f1f68', name: "trailing-icon" })));
|
|
154
154
|
}
|
|
155
155
|
static get formAssociated() { return true; }
|
|
156
156
|
get el() { return index.getElement(this); }
|