@nova-design-system/nova-react 3.5.0 → 3.7.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/README.md +6 -0
- package/dist/cjs/{timeline.animation-1b88f052-B8-vCVrY.js → collapse.animation-16e3af45-CChx_tQJ.js} +4 -25
- package/dist/cjs/fade.animation-71e8e34c-BAw_TYsB.js +68 -0
- package/dist/cjs/{index-Te0zRbKN.js → index-Cv7U-U85.js} +2237 -1595
- package/dist/cjs/index.js +3 -1
- package/dist/cjs/nv-accordion-item.entry-BgDBJjHO.js +178 -0
- package/dist/cjs/nv-accordion.entry-1dHBq_qo.js +164 -0
- package/dist/cjs/{nv-alert.entry-CPbApg9_.js → nv-alert.entry-6J-BEBxl.js} +10 -8
- package/dist/cjs/{nv-avatar.entry-CwM8IOei.js → nv-avatar.entry-Lav6aVEw.js} +2 -2
- package/dist/cjs/{nv-badge_2.entry-Bqu-2k7E.js → nv-badge_2.entry-DaAOJgy_.js} +14 -12
- package/dist/cjs/{nv-breadcrumb.entry-CmceXVS9.js → nv-breadcrumb.entry-BKoLlkWC.js} +2 -2
- package/dist/cjs/{nv-breadcrumbs.entry-B7xbEUl5.js → nv-breadcrumbs.entry-BdGgzdxC.js} +2 -2
- package/dist/cjs/{nv-button.entry-Cd_CE1fx.js → nv-button.entry-Pe2qJFy0.js} +2 -2
- package/dist/cjs/{nv-calendar.entry-B2lm2nvb.js → nv-calendar.entry-WRFrbZtz.js} +97 -67
- package/dist/cjs/{nv-col.entry-BF8XR4B1.js → nv-col.entry-C3IgKfxS.js} +2 -2
- package/dist/cjs/{nv-datagrid.entry-CcQ8XP6J.js → nv-datagrid.entry-Bh1mgk8D.js} +3 -3
- package/dist/cjs/{nv-datagridcolumn.entry-uGbQ4NMr.js → nv-datagridcolumn.entry-DopvtY6C.js} +2 -2
- package/dist/cjs/{nv-dialog.entry-DyK4wFFz.js → nv-dialog.entry-D8oF5B-9.js} +20 -7
- package/dist/cjs/{nv-dialogfooter_2.entry-DT3kR9Xn.js → nv-dialogfooter_2.entry-QE1dFuOh.js} +3 -3
- package/dist/cjs/{nv-fieldcheckbox.entry-D_wHbgcq.js → nv-fieldcheckbox.entry-BbC0JUWc.js} +5 -5
- package/dist/cjs/{nv-fielddate.entry-BaIcP2EG.js → nv-fielddate.entry-BIuQgdYW.js} +122 -36
- package/dist/cjs/{nv-fielddaterange.entry-BNcF2N2M.js → nv-fielddaterange.entry-C82h1WUR.js} +33 -5
- package/dist/cjs/{nv-fielddropdown.entry-DWlDvODi.js → nv-fielddropdown.entry-CWqg8M3_.js} +4 -4
- package/dist/cjs/{nv-fielddropdownitem.entry-BIy_GUKA.js → nv-fielddropdownitem.entry-KuL1iVS4.js} +2 -2
- package/dist/cjs/{nv-fieldmultiselect.entry-B74CLRuh.js → nv-fieldmultiselect.entry-CAdWlUw2.js} +96 -103
- package/dist/cjs/{nv-fieldnumber.entry-BQBy1EIj.js → nv-fieldnumber.entry-Bbk2wO5k.js} +4 -4
- package/dist/cjs/{nv-fieldpassword.entry-DNFZvmBx.js → nv-fieldpassword.entry-BOtLqrGx.js} +4 -4
- package/dist/cjs/{nv-fieldradio.entry-BIR29jv5.js → nv-fieldradio.entry-CY4txacC.js} +4 -4
- package/dist/cjs/{nv-fieldselect.entry-DulA_N5q.js → nv-fieldselect.entry-CRP6e7uq.js} +6 -6
- package/dist/cjs/{nv-fieldslider.entry-DCslY5gg.js → nv-fieldslider.entry-BLO9yOcu.js} +54 -10
- package/dist/cjs/{nv-fieldtext.entry-Dvv8KjJC.js → nv-fieldtext.entry-BqgV8SxD.js} +4 -4
- package/dist/cjs/{nv-fieldtextarea.entry-rVcnznae.js → nv-fieldtextarea.entry-dDaXddme.js} +4 -4
- package/dist/cjs/{nv-fieldtime.entry-_fXkWsoI.js → nv-fieldtime.entry-DAIYFHO7.js} +11 -11
- package/dist/cjs/{nv-icon.entry-BGyFETNH.js → nv-icon.entry-CxE0uTUN.js} +2 -2
- package/dist/cjs/{nv-iconbutton_2.entry-CtClzxKf.js → nv-iconbutton_2.entry-DAWQjqvb.js} +3 -3
- package/dist/cjs/{nv-menu.entry-B3vFxd1E.js → nv-menu.entry-Fg1jfAeH.js} +2 -2
- package/dist/cjs/{nv-menuitem.entry-BIWwr98d.js → nv-menuitem.entry-CGg4iJrd.js} +2 -2
- package/dist/cjs/{nv-popover.entry-vonHjF_y.js → nv-popover.entry-DsKxPxfa.js} +9 -8
- package/dist/cjs/{nv-row.entry-BYUhLZ0r.js → nv-row.entry-BsPFwLLA.js} +2 -2
- package/dist/cjs/{nv-stack.entry-Cxc6QmII.js → nv-stack.entry-4Ec3nJml.js} +2 -2
- package/dist/cjs/{nv-table.entry-DSBUXcSF.js → nv-table.entry-Bv0iDqou.js} +3 -3
- package/dist/cjs/{nv-tablecolumn.entry-BP857bqD.js → nv-tablecolumn.entry-XJJCmUC2.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-CnquGUlJ.js → nv-toggle.entry-C72c_569.js} +3 -3
- package/dist/cjs/{nv-tooltip.entry-XvxL_FTH.js → nv-tooltip.entry-BNvm30iV.js} +4 -3
- package/dist/cjs/{fade.animation-2a077983-aKN0EDTo.js → stylefire.es-74da334a-y0piPjlz.js} +0 -64
- package/dist/cjs/timeline.animation-adf35ecb-CE6Dsdxr.js +23 -0
- package/dist/generated/components.js +18 -2
- package/dist/generated/components.server.js +23 -3
- package/dist/types/generated/components.d.ts +17 -3
- package/dist/types/generated/components.server.d.ts +17 -3
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
require('react');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
|
+
exports.NvAccordion = index.NvAccordion;
|
|
9
|
+
exports.NvAccordionItem = index.NvAccordionItem;
|
|
8
10
|
exports.NvAlert = index.NvAlert;
|
|
9
11
|
exports.NvAvatar = index.NvAvatar;
|
|
10
12
|
exports.NvBadge = index.NvBadge;
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
|
+
var collapse_animation16e3af45 = require('./collapse.animation-16e3af45-CChx_tQJ.js');
|
|
5
|
+
require('./stylefire.es-74da334a-y0piPjlz.js');
|
|
6
|
+
require('react');
|
|
7
|
+
|
|
8
|
+
const nvAccordionItemCss = "nv-accordion-item{display:block;border-bottom:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion-item:last-child{border-bottom:none}nv-accordion-item .nv-accordion-item__header{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4)}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__chevron{margin-left:var(--spacing-2);flex-shrink:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__header-content{display:flex;flex-direction:column;gap:var(--spacing-0-5);flex:1;min-width:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__title{color:var(--color-content-high-text);font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__subtitle{color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__content{background:var(--color-level-10-background)}nv-accordion-item .nv-accordion-item__content .nv-accordion-item__content-inner{padding:var(--spacing-4);color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:500;line-height:var(--line-height-base);}nv-accordion-item.is-disabled{opacity:var(--opacity-disabled);pointer-events:none}nv-accordion-item.is-open .nv-accordion-item__header{border-bottom:var(--spacing-px) solid var(--color-content-low-border)}";
|
|
9
|
+
const NvAccordionItemStyle0 = nvAccordionItemCss;
|
|
10
|
+
|
|
11
|
+
const NvAccordionItem = class {
|
|
12
|
+
constructor(hostRef) {
|
|
13
|
+
index.registerInstance(this, hostRef);
|
|
14
|
+
this.itemToggle = index.createEvent(this, "itemToggle");
|
|
15
|
+
/** Open or closed */
|
|
16
|
+
this.open = false;
|
|
17
|
+
/** Disables the item */
|
|
18
|
+
this.disabled = false;
|
|
19
|
+
/** Parent expansion mode (accordion or multi) */
|
|
20
|
+
this.mode = 'accordion';
|
|
21
|
+
//#endregion EVENTS
|
|
22
|
+
/****************************************************************************/
|
|
23
|
+
//#region STATE
|
|
24
|
+
/** Internal state for open/close rendering */
|
|
25
|
+
this.currentOpenState = false;
|
|
26
|
+
/**
|
|
27
|
+
* Controls if the panel has been initialized for animations
|
|
28
|
+
*/
|
|
29
|
+
this.isInitialized = false;
|
|
30
|
+
/**
|
|
31
|
+
* Animation in progress
|
|
32
|
+
*/
|
|
33
|
+
this.isAnimating = false;
|
|
34
|
+
/**
|
|
35
|
+
* Handler for header click
|
|
36
|
+
*/
|
|
37
|
+
this.handleHeaderClick = () => {
|
|
38
|
+
this.toggle();
|
|
39
|
+
};
|
|
40
|
+
/**
|
|
41
|
+
* Handler for iconbutton click
|
|
42
|
+
* @param {Event} e - Click event
|
|
43
|
+
*/
|
|
44
|
+
this.handleIconClick = (e) => {
|
|
45
|
+
e.stopPropagation(); // Prevent header click from triggering
|
|
46
|
+
this.toggle();
|
|
47
|
+
};
|
|
48
|
+
/**
|
|
49
|
+
* Handler for keyboard events on iconbutton
|
|
50
|
+
* @param {KeyboardEvent} e - Keyboard event
|
|
51
|
+
*/
|
|
52
|
+
this.handleHeaderKeyDown = (e) => {
|
|
53
|
+
if (this.disabled)
|
|
54
|
+
return;
|
|
55
|
+
switch (e.key) {
|
|
56
|
+
case 'Enter':
|
|
57
|
+
case ' ':
|
|
58
|
+
e.preventDefault();
|
|
59
|
+
this.toggle();
|
|
60
|
+
break;
|
|
61
|
+
case 'ArrowDown':
|
|
62
|
+
e.preventDefault();
|
|
63
|
+
if (!this.open) {
|
|
64
|
+
this.open = true;
|
|
65
|
+
this.itemToggle.emit(this.open);
|
|
66
|
+
this.updateVisibility(this.open);
|
|
67
|
+
}
|
|
68
|
+
break;
|
|
69
|
+
case 'ArrowUp':
|
|
70
|
+
e.preventDefault();
|
|
71
|
+
if (this.open) {
|
|
72
|
+
this.open = false;
|
|
73
|
+
this.itemToggle.emit(this.open);
|
|
74
|
+
this.updateVisibility(this.open);
|
|
75
|
+
}
|
|
76
|
+
break;
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
//#endregion STATE
|
|
81
|
+
/****************************************************************************/
|
|
82
|
+
//#region WATCHERS
|
|
83
|
+
async onOpenChanged(newValue, oldValue) {
|
|
84
|
+
this.currentOpenState = newValue; // Synchronize internal state
|
|
85
|
+
// Skip initial render
|
|
86
|
+
if (oldValue === undefined) {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
await this.updateVisibility(newValue);
|
|
90
|
+
}
|
|
91
|
+
//#endregion WATCHERS
|
|
92
|
+
/****************************************************************************/
|
|
93
|
+
//#region ANIMATIONS
|
|
94
|
+
/**
|
|
95
|
+
* Updates the visibility state with Nova animation system
|
|
96
|
+
* @param {boolean} open - Whether the accordion item should be open
|
|
97
|
+
*/
|
|
98
|
+
async updateVisibility(open) {
|
|
99
|
+
if (!this.contentRef)
|
|
100
|
+
return;
|
|
101
|
+
this.isAnimating = true;
|
|
102
|
+
const { collapse, expand } = collapse_animation16e3af45.useCollapse(this.contentRef, {
|
|
103
|
+
duration: 200,
|
|
104
|
+
});
|
|
105
|
+
if (open) {
|
|
106
|
+
// Expand with animation
|
|
107
|
+
await expand();
|
|
108
|
+
}
|
|
109
|
+
else {
|
|
110
|
+
// Collapse with animation
|
|
111
|
+
await collapse();
|
|
112
|
+
}
|
|
113
|
+
this.isAnimating = false;
|
|
114
|
+
}
|
|
115
|
+
//#endregion ANIMATIONS
|
|
116
|
+
/****************************************************************************/
|
|
117
|
+
//#region LIFECYCLE
|
|
118
|
+
componentWillLoad() {
|
|
119
|
+
this.currentOpenState = this.open; // Initial synchronization
|
|
120
|
+
}
|
|
121
|
+
componentDidLoad() {
|
|
122
|
+
if (this.contentRef) {
|
|
123
|
+
const { setExpanded, setCollapsed } = collapse_animation16e3af45.useCollapse(this.contentRef);
|
|
124
|
+
if (this.open) {
|
|
125
|
+
// If open by default on initial load, set expanded state without animation
|
|
126
|
+
setExpanded();
|
|
127
|
+
}
|
|
128
|
+
else {
|
|
129
|
+
// If closed by default, set collapsed state without animation
|
|
130
|
+
setCollapsed();
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
disconnectedCallback() {
|
|
135
|
+
if (this.mutationObserver) {
|
|
136
|
+
this.mutationObserver.disconnect();
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
//#endregion LIFECYCLE
|
|
140
|
+
/****************************************************************************/
|
|
141
|
+
//#region METHODS
|
|
142
|
+
/**
|
|
143
|
+
* Toggle open/close (Public API)
|
|
144
|
+
*/
|
|
145
|
+
async toggle() {
|
|
146
|
+
if (!this.disabled && !this.isAnimating) {
|
|
147
|
+
this.open = !this.open;
|
|
148
|
+
this.itemToggle.emit(this.open);
|
|
149
|
+
// Force animation update directly instead of relying on watcher
|
|
150
|
+
await this.updateVisibility(this.open);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
/**
|
|
154
|
+
* Get the chevron icon name based on open state
|
|
155
|
+
* @returns {string} The icon name to display in the chevron button
|
|
156
|
+
*/
|
|
157
|
+
get chevronIconName() {
|
|
158
|
+
return this.open ? 'chevron-top' : 'chevron-down';
|
|
159
|
+
}
|
|
160
|
+
//#endregion METHODS
|
|
161
|
+
/****************************************************************************/
|
|
162
|
+
//#region RENDER
|
|
163
|
+
render() {
|
|
164
|
+
return (index.h(index.Host, { key: 'dfb8ca76f8ac40c938323be1ccba4353ea33a616', class: {
|
|
165
|
+
'nv-accordion-item': true,
|
|
166
|
+
'is-open': this.open,
|
|
167
|
+
'is-disabled': this.disabled,
|
|
168
|
+
'is-animating': this.isAnimating,
|
|
169
|
+
}, role: "listitem", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: '258efe0502a39d963a9e75c16285ee9cbc65cb9f', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, index.h("slot", { key: 'bb4dae743f06e3d41d1f7b8c17793b668df9347b', name: "header" }, index.h("div", { key: 'f3142a81c6be776d95ab9292101b889db6e35805', class: "nv-accordion-item__header-content" }, this.itemTitle && (index.h("span", { key: 'e897d8b4d414ba4e93b2853c152059579063335e', class: "nv-accordion-item__title" }, this.itemTitle)), this.subtitle && (index.h("span", { key: 'b8e03ceb1ca0e4c0b0fe24398f0e1c592ac077ab', class: "nv-accordion-item__subtitle" }, this.subtitle)))), index.h("nv-iconbutton", { key: '8d90711a96f5ce2e7d6f5ebcf3922cd0fedd69bd', emphasis: "low", size: "sm", shape: "square", name: this.chevronIconName, tabindex: this.disabled ? -1 : 0, onClick: this.handleIconClick, onKeyDown: this.handleHeaderKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "content", "aria-label": this.open ? 'Fermer la section' : 'Ouvrir la section' })), index.h("div", { key: '171b5165f3663fa5f0fa28ef84145dfc998e9f10', id: "content", class: "nv-accordion-item__content", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.contentRef = el) }, index.h("div", { key: 'dcf753f23cec073a036d8137f1299dcf4ca4af78', class: "nv-accordion-item__content-inner" }, index.h("slot", { key: '3dc85def21aace19f3d211262b6cf66ccb9438fa', name: "content" })))));
|
|
170
|
+
}
|
|
171
|
+
get el() { return index.getElement(this); }
|
|
172
|
+
static get watchers() { return {
|
|
173
|
+
"open": ["onOpenChanged"]
|
|
174
|
+
}; }
|
|
175
|
+
};
|
|
176
|
+
NvAccordionItem.style = NvAccordionItemStyle0;
|
|
177
|
+
|
|
178
|
+
exports.nv_accordion_item = NvAccordionItem;
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
|
+
require('react');
|
|
5
|
+
|
|
6
|
+
const nvAccordionCss = "nv-accordion{display:block;border:var(--spacing-px) solid var(--color-content-low-border);border-radius:var(--radius-rounded-lg)}nv-accordion .nv-accordion__footer{padding:var(--spacing-3);background:var(--color-level-05-background);border-radius:0 0 var(--radius-rounded-lg) var(--radius-rounded-lg);margin-top:calc(var(--spacing-px) * -1);border-top:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion .nv-accordion__footer:empty{display:none}";
|
|
7
|
+
const NvAccordionStyle0 = nvAccordionCss;
|
|
8
|
+
|
|
9
|
+
const NvAccordion = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
index.registerInstance(this, hostRef);
|
|
12
|
+
this.openChanged = index.createEvent(this, "openChanged");
|
|
13
|
+
/****************************************************************************/
|
|
14
|
+
//#region PROPERTIES
|
|
15
|
+
/**
|
|
16
|
+
* Data to display as a list of items (title, subtitle, content).
|
|
17
|
+
*/
|
|
18
|
+
this.data = [];
|
|
19
|
+
/**
|
|
20
|
+
* Expansion mode: 'accordion' (single open) or 'multi' (multiple open)
|
|
21
|
+
*/
|
|
22
|
+
this.mode = 'accordion';
|
|
23
|
+
//#endregion PROPERTIES
|
|
24
|
+
/****************************************************************************/
|
|
25
|
+
//#region STATE
|
|
26
|
+
/**
|
|
27
|
+
* Internal index of open items (not exposed)
|
|
28
|
+
*/
|
|
29
|
+
this.internalOpenIndexes = [];
|
|
30
|
+
}
|
|
31
|
+
//#endregion EVENTS
|
|
32
|
+
/****************************************************************************/
|
|
33
|
+
//#region METHODS
|
|
34
|
+
/**
|
|
35
|
+
* Opens an item by its index (Public API)
|
|
36
|
+
* @param {number} index Index of the item to open
|
|
37
|
+
*/
|
|
38
|
+
async open(index) {
|
|
39
|
+
this.toggleItem(index, true);
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Closes an item by its index (Public API)
|
|
43
|
+
* @param {number} index Index of the item to close
|
|
44
|
+
*/
|
|
45
|
+
async close(index) {
|
|
46
|
+
this.toggleItem(index, false);
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* Toggles an item's state (internal)
|
|
50
|
+
* @param {number} index Item index
|
|
51
|
+
* @param {boolean} [forceOpen] Force open (true) or close (false)
|
|
52
|
+
*/
|
|
53
|
+
toggleItem(index, forceOpen) {
|
|
54
|
+
let openIndexes = this.openIndexes !== undefined
|
|
55
|
+
? [...this.openIndexes]
|
|
56
|
+
: [...(this.internalOpenIndexes || [])];
|
|
57
|
+
const isOpen = openIndexes.includes(index);
|
|
58
|
+
if (this.mode === 'accordion') {
|
|
59
|
+
openIndexes = forceOpen === false || isOpen ? [] : [index];
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
if (forceOpen === false) {
|
|
63
|
+
openIndexes = openIndexes.filter(i => i !== index);
|
|
64
|
+
}
|
|
65
|
+
else if (!isOpen) {
|
|
66
|
+
openIndexes.push(index);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
this.internalOpenIndexes = openIndexes;
|
|
70
|
+
this.openChanged.emit({ openIndexes });
|
|
71
|
+
if (this.openIndexes !== undefined) {
|
|
72
|
+
this.openIndexes =
|
|
73
|
+
this.mode === 'accordion'
|
|
74
|
+
? [openIndexes[0]].filter(x => x !== undefined)
|
|
75
|
+
: [...openIndexes];
|
|
76
|
+
}
|
|
77
|
+
// Update child elements state - for both data and slot usage
|
|
78
|
+
this.updateChildrenState();
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Updates the open state of child elements based on internalOpenIndexes
|
|
82
|
+
*/
|
|
83
|
+
async updateChildrenState() {
|
|
84
|
+
// Force a re-render by updating the state
|
|
85
|
+
this.internalOpenIndexes = [...(this.internalOpenIndexes || [])];
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* Listens to itemToggle events from nv-accordion-item elements
|
|
89
|
+
* @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item
|
|
90
|
+
*/
|
|
91
|
+
onItemToggle(event) {
|
|
92
|
+
// Find the index of the item that emitted the event
|
|
93
|
+
const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
|
|
94
|
+
const targetItem = event.target;
|
|
95
|
+
const index = items.indexOf(targetItem);
|
|
96
|
+
if (index !== -1) {
|
|
97
|
+
// If the event comes from an item that is opening, handle accordion mode
|
|
98
|
+
if (event.detail === true) {
|
|
99
|
+
if (this.mode === 'accordion') {
|
|
100
|
+
// Close all other items
|
|
101
|
+
items.forEach((item, i) => {
|
|
102
|
+
if (i !== index && item.open) {
|
|
103
|
+
item.open = false;
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
this.internalOpenIndexes = [index];
|
|
107
|
+
}
|
|
108
|
+
else {
|
|
109
|
+
// Add index to internalOpenIndexes if not already present
|
|
110
|
+
if (!this.internalOpenIndexes.includes(index)) {
|
|
111
|
+
this.internalOpenIndexes = [...this.internalOpenIndexes, index];
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
else {
|
|
116
|
+
// If the item is closing, remove it from internalOpenIndexes
|
|
117
|
+
this.internalOpenIndexes = this.internalOpenIndexes.filter(i => i !== index);
|
|
118
|
+
}
|
|
119
|
+
// Emit openChanged event
|
|
120
|
+
this.openChanged.emit({ openIndexes: this.internalOpenIndexes });
|
|
121
|
+
if (this.openIndexes !== undefined) {
|
|
122
|
+
this.openIndexes =
|
|
123
|
+
this.mode === 'accordion'
|
|
124
|
+
? [this.internalOpenIndexes[0]].filter(x => x !== undefined)
|
|
125
|
+
: [...this.internalOpenIndexes];
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
//#endregion METHODS
|
|
130
|
+
/****************************************************************************/
|
|
131
|
+
//#region WATCHERS
|
|
132
|
+
//#endregion WATCHERS
|
|
133
|
+
/****************************************************************************/
|
|
134
|
+
//#region LIFECYCLE
|
|
135
|
+
componentWillLoad() {
|
|
136
|
+
if (this.openIndexes !== undefined) {
|
|
137
|
+
this.internalOpenIndexes = [...this.openIndexes];
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
componentDidLoad() {
|
|
141
|
+
// If using direct child elements, initialize their state
|
|
142
|
+
if (!this.data || this.data.length === 0) {
|
|
143
|
+
this.updateChildrenState();
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
componentWillUpdate() {
|
|
147
|
+
if (this.openIndexes !== undefined) {
|
|
148
|
+
this.internalOpenIndexes = [...this.openIndexes];
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
//#endregion LIFECYCLE
|
|
152
|
+
/****************************************************************************/
|
|
153
|
+
//#region RENDER
|
|
154
|
+
render() {
|
|
155
|
+
return (index.h(index.Host, { key: 'a6cb21b274024a00e60e0d0db780f25fab6e5bc2', role: "list", class: "nv-accordion" }, this.data && this.data.length > 0 ? (this.data.map((item, i) => {
|
|
156
|
+
var _a;
|
|
157
|
+
return (index.h("nv-accordion-item", { key: (_a = item.id) !== null && _a !== void 0 ? _a : i, itemTitle: item.title, disabled: item.disabled, open: (this.internalOpenIndexes || []).includes(i) }, item.subtitle ? (index.h("div", { slot: "header" }, index.h("div", { class: "nv-accordion-item__header-content" }, index.h("span", { class: "nv-accordion-item__title" }, item.title), index.h("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, index.h("div", { slot: "content" }, item.content), item.footer && index.h("div", { slot: "footer" }, item.footer)));
|
|
158
|
+
})) : (index.h("slot", null))));
|
|
159
|
+
}
|
|
160
|
+
get el() { return index.getElement(this); }
|
|
161
|
+
};
|
|
162
|
+
NvAccordion.style = NvAccordionStyle0;
|
|
163
|
+
|
|
164
|
+
exports.nv_accordion = NvAccordion;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var constants4faa1fae = require('./constants-4faa1fae-BzFAKCkR.js');
|
|
6
|
-
var
|
|
7
|
-
var
|
|
6
|
+
var collapse_animation16e3af45 = require('./collapse.animation-16e3af45-CChx_tQJ.js');
|
|
7
|
+
var fade_animation71e8e34c = require('./fade.animation-71e8e34c-BAw_TYsB.js');
|
|
8
|
+
require('./stylefire.es-74da334a-y0piPjlz.js');
|
|
9
|
+
var timeline_animationAdf35ecb = require('./timeline.animation-adf35ecb-CE6Dsdxr.js');
|
|
8
10
|
require('react');
|
|
9
11
|
|
|
10
12
|
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}";
|
|
@@ -115,15 +117,15 @@ const NvAlert = class {
|
|
|
115
117
|
this.toggleHiddenClass(hidden);
|
|
116
118
|
return;
|
|
117
119
|
}
|
|
118
|
-
const { fadeIn, fadeOut } =
|
|
119
|
-
const { collapse, expand } =
|
|
120
|
+
const { fadeIn, fadeOut } = fade_animation71e8e34c.useFade(this.ref, { duration: 150 });
|
|
121
|
+
const { collapse, expand } = collapse_animation16e3af45.useCollapse(this.ref, { duration: 150 });
|
|
120
122
|
if (hidden) {
|
|
121
|
-
await
|
|
123
|
+
await timeline_animationAdf35ecb.timeline(fadeOut, collapse).start();
|
|
122
124
|
this.toggleHiddenClass(true);
|
|
123
125
|
}
|
|
124
126
|
else {
|
|
125
127
|
this.toggleHiddenClass(false);
|
|
126
|
-
await
|
|
128
|
+
await timeline_animationAdf35ecb.timeline(expand, fadeIn).start();
|
|
127
129
|
}
|
|
128
130
|
}
|
|
129
131
|
/**
|
|
@@ -161,7 +163,7 @@ const NvAlert = class {
|
|
|
161
163
|
//#region RENDER
|
|
162
164
|
render() {
|
|
163
165
|
var _a;
|
|
164
|
-
return (index.h(index.Host, { key: '
|
|
166
|
+
return (index.h(index.Host, { key: 'f0e75ac2c38aced1dcf76cb1d5f03becefbee71d', role: "alert", class: clsx297c1ffe.clsx('root', `feedback-${this.feedback}`) }, index.h("nv-icon", { key: '19f7fcf452d62277ab436acd20c285f44fbaecd4', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), index.h("div", { key: '8e656ffd0bce63bd33d92b97df21389af265e182', class: "content" }, this.heading && index.h("p", { key: '0aa928e8ee8605d735f890bc67128563ce3ad379', class: "heading" }, this.heading), this.message && index.h("p", { key: '690d9928646d25a636b2bb04eb65eee40c402f52', class: "message" }, this.message), index.h("slot", { key: '86309f093688dbb81ff805f1c9137b200541e905' })), this.dismissible && (index.h("button", { key: '387695ff1e23a7e289cf58c51042ccc561d451ad', class: "close", type: "button", onClick: this.handleDismiss }, index.h("nv-icon", { key: '788b99b4c56fc8c936a67ac48d2db37fdcca7631', name: "x", size: "sm" })))));
|
|
165
167
|
}
|
|
166
168
|
get ref() { return index.getElement(this); }
|
|
167
169
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var constants4faa1fae = require('./constants-4faa1fae-BzFAKCkR.js');
|
|
6
6
|
require('react');
|
|
@@ -59,7 +59,7 @@ const NvAvatar = class {
|
|
|
59
59
|
/****************************************************************************/
|
|
60
60
|
//#region RENDER
|
|
61
61
|
render() {
|
|
62
|
-
return (index.h(index.Host, { key: '
|
|
62
|
+
return (index.h(index.Host, { key: '127d470eb9121f611f9e18f029ab9ef15a4a49df', class: clsx297c1ffe.clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (index.h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (index.h("slot", { name: "icon" }, index.h("nv-icon", { name: "user" })))));
|
|
63
63
|
}
|
|
64
64
|
};
|
|
65
65
|
NvAvatar.style = NvAvatarStyle0;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
|
-
var
|
|
6
|
-
var
|
|
5
|
+
var collapse_animation16e3af45 = require('./collapse.animation-16e3af45-CChx_tQJ.js');
|
|
6
|
+
var fade_animation71e8e34c = require('./fade.animation-71e8e34c-BAw_TYsB.js');
|
|
7
|
+
require('./stylefire.es-74da334a-y0piPjlz.js');
|
|
8
|
+
var timeline_animationAdf35ecb = require('./timeline.animation-adf35ecb-CE6Dsdxr.js');
|
|
7
9
|
require('react');
|
|
8
10
|
|
|
9
11
|
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)}";
|
|
@@ -97,12 +99,12 @@ const NvBadge = class {
|
|
|
97
99
|
this.hiddenChanged.emit(hidden);
|
|
98
100
|
if (this._isHidden === true)
|
|
99
101
|
this._isHidden = hidden;
|
|
100
|
-
const { fadeIn, fadeOut } =
|
|
101
|
-
const { collapse, expand } =
|
|
102
|
+
const { fadeIn, fadeOut } = fade_animation71e8e34c.useFade(this.ref, { duration: 150 });
|
|
103
|
+
const { collapse, expand } = collapse_animation16e3af45.useCollapse(this.ref, { duration: 150 });
|
|
102
104
|
if (hidden === true)
|
|
103
|
-
await
|
|
105
|
+
await timeline_animationAdf35ecb.timeline(fadeOut, collapse).start();
|
|
104
106
|
if (hidden === false)
|
|
105
|
-
await
|
|
107
|
+
await timeline_animationAdf35ecb.timeline(expand, fadeIn).start();
|
|
106
108
|
this.hiddenChangedComplete.emit(hidden);
|
|
107
109
|
if (this._isHidden === false)
|
|
108
110
|
this._isHidden = hidden;
|
|
@@ -122,8 +124,8 @@ const NvBadge = class {
|
|
|
122
124
|
}
|
|
123
125
|
if (this.hidden) {
|
|
124
126
|
this._isHidden = true;
|
|
125
|
-
const { setCollapsed } =
|
|
126
|
-
const { setFadeOut } =
|
|
127
|
+
const { setCollapsed } = collapse_animation16e3af45.useCollapse(this.ref);
|
|
128
|
+
const { setFadeOut } = fade_animation71e8e34c.useFade(this.ref);
|
|
127
129
|
setCollapsed();
|
|
128
130
|
setFadeOut();
|
|
129
131
|
}
|
|
@@ -132,12 +134,12 @@ const NvBadge = class {
|
|
|
132
134
|
/****************************************************************************/
|
|
133
135
|
//#region RENDER
|
|
134
136
|
render() {
|
|
135
|
-
return (index.h(index.Host, { key: '
|
|
137
|
+
return (index.h(index.Host, { key: '435c5bb1f565c8bd95cca5c6828157c80f60aa39', class: clsx297c1ffe.clsx(`badge-${this.color}`, {
|
|
136
138
|
'has-close': this.dismissible,
|
|
137
139
|
'with-gap': this.dismissible || this.label,
|
|
138
140
|
'visually-hidden': this._isHidden,
|
|
139
141
|
'is-icon-only': this.isIconOnly,
|
|
140
|
-
}) }, index.h("slot", { key: '
|
|
142
|
+
}) }, index.h("slot", { key: '271dc833471e026af5088f48227639682e661e97', name: "leading-icon" }, this.leadIcon && index.h("nv-icon", { key: 'e578eabf4c5a09e61e28c3839b943804acdf88e8', name: this.leadIcon, size: "sm" })), index.h("span", { key: '24d16a21b2b4499be712f9b747c9ab63c5e6ca0c', class: clsx297c1ffe.clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, index.h("slot", { key: '3e3827620e6ade8be256ce7dd0b8bb949f36f2d5' })), this.dismissible && (index.h("button", { key: '90ed9ec1b71815554b963b0eafeb5536578700cf', onClick: this.handleClose, class: "close", type: "button" }, index.h("nv-icon", { key: 'df426e5d88c2bf02e7aa83c179c05db4795f03db', name: "x", size: "sm" })))));
|
|
141
143
|
}
|
|
142
144
|
get ref() { return index.getElement(this); }
|
|
143
145
|
static get watchers() { return {
|
|
@@ -194,7 +196,7 @@ const NvFielddropdownitemcheck = class {
|
|
|
194
196
|
};
|
|
195
197
|
}
|
|
196
198
|
render() {
|
|
197
|
-
return (index.h(index.Host, { key: '
|
|
199
|
+
return (index.h(index.Host, { key: '82abe79dd061f60e380f033027f799121769f89e', onClick: this.handleClick }, index.h("nv-fieldcheckbox", { key: '505181c56faacb09e55c428d91287d96e1c3b72a', 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 }, index.h("slot", { key: '95a53b7d4ec735fd3256505b57e2a497b475f511' }), index.h("slot", { key: '137d5e2b3046417bbc90c0bd2dd10b846d1dfd53', name: "main" }), index.h("slot", { key: '47d4a73e401186b7bc7a18aaad82018f0ccc1e2f', name: "label" }), index.h("slot", { key: 'ff5c752d386c282635a97ad2bcb8858571aff7e9', name: "description" }))));
|
|
198
200
|
}
|
|
199
201
|
get el() { return index.getElement(this); }
|
|
200
202
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -36,7 +36,7 @@ const NvBreadcrumb = class {
|
|
|
36
36
|
/****************************************************************************/
|
|
37
37
|
//#region RENDER
|
|
38
38
|
render() {
|
|
39
|
-
return (index.h(index.Host, { key: '
|
|
39
|
+
return (index.h(index.Host, { key: 'b0cfdee987585488bd49734900ee421b081e6df4', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx297c1ffe.clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (index.h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (index.h("slot", null)), this.tooltip && (index.h("nv-tooltip", { key: '970d9552c3f81bffd86889fc2ff169f73810507b', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (index.h("nv-popover", { key: '1b14ce172db49aaeb199d6801978f96204ba05a1', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, index.h("ul", { key: 'b984309f9290bb4bcfed796200ffaad6e52a2b93', slot: "content" }, index.h("slot", { key: '189408f75e689b98b4cf9397074dbaefaecece9a' })))), index.h("span", { key: '62a4bed098620043b69f1e7dcf51db7de035f5fc', "data-scope": "separator" }, "/")));
|
|
40
40
|
}
|
|
41
41
|
get el() { return index.getElement(this); }
|
|
42
42
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.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}";
|
|
@@ -12,7 +12,7 @@ const NvBreadcrumbs = class {
|
|
|
12
12
|
}
|
|
13
13
|
//#region RENDER
|
|
14
14
|
render() {
|
|
15
|
-
return (index.h(index.Host, { key: '
|
|
15
|
+
return (index.h(index.Host, { key: '4337fe5161c0ce444001e1b92221f3adac26e4bf', role: "navigation", "aria-label": "breadcrumbs" }, index.h("ol", { key: '00d470eadfe879be525a4a4b7ec3368601a0697c' }, index.h("slot", { key: '2d012f152b49f33f399aa14dfb18a4c39265128c' }))));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
NvBreadcrumbs.style = NvBreadcrumbsStyle0;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var constants4faa1fae = require('./constants-4faa1fae-BzFAKCkR.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -150,7 +150,7 @@ const NvButton = class {
|
|
|
150
150
|
/****************************************************************************/
|
|
151
151
|
//#region RENDER
|
|
152
152
|
render() {
|
|
153
|
-
return (index.h(index.Host, { key: '
|
|
153
|
+
return (index.h(index.Host, { key: '54c0b3351f4d8a180058a03e61a562882fb98498', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (index.h("nv-loader", { key: '21315e4af4111bcf47c67e65a9a58a1d7121a43e', size: this.size === constants4faa1fae.ButtonSize.Large ? 'sm' : 'xs' })), index.h("slot", { key: 'f37683ddaa2c11c5b7accfc99429c930f5a3dcf6', name: "leading-icon" }), index.h("slot", { key: 'd17ebe7505d9027c6c58f930a8ea9b097561cead' }), index.h("slot", { key: '2cd6c9756cc7540417041adf5830b734291b2ab5', name: "trailing-icon" })));
|
|
154
154
|
}
|
|
155
155
|
static get formAssociated() { return true; }
|
|
156
156
|
get el() { return index.getElement(this); }
|