@nova-design-system/nova-react 3.11.0 → 3.13.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 +27 -58
- package/dist/cjs/collapse.animation-acda1bf5-BuORVmQv.js +214 -0
- package/dist/cjs/{constants-23aaef7b-Cj2b-su0.js → constants-d0f19e7b-s0SCO_vi.js} +5 -0
- package/dist/cjs/fade.animation-eb454088-Bma0SpTf.js +724 -0
- package/dist/cjs/{index-9kW3hkgy.js → index-Jgn7NELT.js} +2422 -1713
- package/dist/cjs/index.js +69 -1
- package/dist/cjs/{nv-accordion-item.entry-77CmzSqs.js → nv-accordion-item.entry-C7vVmDCg.js} +74 -40
- package/dist/cjs/nv-accordion.entry-CFynyAOo.js +178 -0
- package/dist/cjs/{nv-alert.entry-4ATJ67O4.js → nv-alert.entry-C_FMs0Yi.js} +20 -20
- package/dist/cjs/{nv-avatar.entry-DOI0QFTW.js → nv-avatar.entry-BvjSzIHn.js} +7 -7
- package/dist/cjs/nv-badge_2.entry-CLNvgVtj.js +212 -0
- package/dist/cjs/{nv-breadcrumb.entry-C6TteX7v.js → nv-breadcrumb.entry-Ch2Cvr_a.js} +2 -2
- package/dist/cjs/{nv-breadcrumbs.entry-CpYRzd4I.js → nv-breadcrumbs.entry-DmH8AGIm.js} +1 -1
- package/dist/cjs/{nv-button.entry-DUU-LHJM.js → nv-button.entry-B0lusQ2w.js} +8 -8
- package/dist/cjs/{nv-buttongroup.entry-BDdi1Z66.js → nv-buttongroup.entry-DLVCcdh9.js} +1 -1
- package/dist/cjs/{nv-calendar.entry-DMpLDXJG.js → nv-calendar.entry-BmX0f_Or.js} +20 -16
- package/dist/cjs/{nv-col.entry-WTuI3NnF.js → nv-col.entry-lysICYEC.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-BXqZFjrC.js → nv-datagrid.entry-vG3h5dj3.js} +7 -7
- package/dist/cjs/{nv-datagridcolumn.entry-B-M6q2Tk.js → nv-datagridcolumn.entry-9NynF9K-.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-DEM7iOao.js → nv-dialog.entry-Ctsz1K-O.js} +3 -3
- package/dist/cjs/{nv-dialogfooter_2.entry-B09v2yKV.js → nv-dialogfooter_2.entry-B17HEgyc.js} +10 -7
- package/dist/cjs/{nv-fieldcheckbox.entry-Z5tjeUuU.js → nv-fieldcheckbox.entry-DMiADwqV.js} +2 -2
- package/dist/cjs/{nv-fielddate.entry-5lSIc9Ek.js → nv-fielddate.entry-D3X6Jl3u.js} +2 -2
- package/dist/cjs/{nv-fielddaterange.entry-CuhBqqML.js → nv-fielddaterange.entry-C8_SFFXW.js} +2 -2
- package/dist/cjs/{nv-fielddropdown.entry-BFFr0ATC.js → nv-fielddropdown.entry-BiBR8Qgs.js} +2 -2
- package/dist/cjs/{nv-fielddropdownitem.entry-BugR9GTU.js → nv-fielddropdownitem.entry-DQ8QK4AS.js} +1 -1
- package/dist/cjs/{nv-fieldmultiselect.entry-S7ur1tcN.js → nv-fieldmultiselect.entry-J5VTOPum.js} +2 -32
- package/dist/cjs/{nv-fieldnumber.entry-BMpv7Xab.js → nv-fieldnumber.entry-Djpg1HMq.js} +3 -3
- package/dist/cjs/{nv-fieldpassword.entry-B5WsGvF8.js → nv-fieldpassword.entry-DKT9Xn5H.js} +2 -2
- package/dist/cjs/{nv-fieldradio.entry-BhojWkU4.js → nv-fieldradio.entry-CPYf3K2o.js} +2 -2
- package/dist/cjs/{nv-fieldselect.entry-CCM3U7mj.js → nv-fieldselect.entry-DnbL7aZB.js} +2 -2
- package/dist/cjs/{nv-fieldslider.entry-XQRuw_C-.js → nv-fieldslider.entry-CNRJuo7v.js} +25 -17
- package/dist/cjs/{nv-fieldtext.entry-DtgMcL9y.js → nv-fieldtext.entry-B9lIHck7.js} +1 -1
- package/dist/cjs/{nv-fieldtextarea.entry-BF4luAgA.js → nv-fieldtextarea.entry-B2EDj8cm.js} +1 -1
- package/dist/cjs/{nv-fieldtime.entry-DyP6QWzm.js → nv-fieldtime.entry-CpoXpAPx.js} +61 -61
- package/dist/cjs/nv-icon.entry-DbOeEd4f.js +79 -0
- package/dist/cjs/{nv-iconbutton_2.entry-DlLquYC0.js → nv-iconbutton_2.entry-DR_wR73O.js} +2 -2
- package/dist/cjs/{nv-menu.entry-Dj2paHp_.js → nv-menu.entry-DB_G8hS_.js} +1 -1
- package/dist/cjs/{nv-menuitem.entry-DbV-21bC.js → nv-menuitem.entry-PBCNIzPI.js} +1 -1
- package/dist/cjs/nv-notification.entry-CyumbQS_.js +178 -0
- package/dist/cjs/{nv-popover.entry-mefWRuFR.js → nv-popover.entry-ttESQMgj.js} +29 -12
- package/dist/cjs/{nv-row.entry-Ds7BSvjO.js → nv-row.entry-DPEGaFeS.js} +2 -2
- package/dist/cjs/{nv-stack.entry-vlegAAKj.js → nv-stack.entry-CTPwlz23.js} +2 -2
- package/dist/cjs/{nv-table.entry-CiZvYc93.js → nv-table.entry-Dv1mZKcu.js} +3 -3
- package/dist/cjs/{nv-tablecolumn.entry-ChUzCWVu.js → nv-tablecolumn.entry-DrAaeHm-.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-CLY7TxJv.js → nv-toggle.entry-D2TRd371.js} +4 -4
- package/dist/cjs/nv-togglebutton.entry-D95qOQ1K.js +55 -0
- package/dist/cjs/{nv-togglebuttongroup.entry-JZNZk6j2.js → nv-togglebuttongroup.entry-BNvyZgbh.js} +2 -2
- package/dist/cjs/{nv-tooltip.entry-BhwdNKUk.js → nv-tooltip.entry-oOw6EmyL.js} +12 -3
- package/dist/cjs/{stylefire.es-74da334a-y0piPjlz.js → style-value-types.es-f5d10b79-D0QCM8OB.js} +50 -694
- package/dist/cjs/{timeline.animation-adf35ecb-CE6Dsdxr.js → timeline.animation-79215cd4-KteJaZPb.js} +19 -0
- package/dist/generated/components.js +8 -0
- package/dist/generated/components.server.js +21 -2
- package/dist/index.js +1 -0
- package/dist/types/generated/components.d.ts +5 -0
- package/dist/types/generated/components.server.d.ts +5 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +4 -2
- package/dist/cjs/collapse.animation-16e3af45-CChx_tQJ.js +0 -84
- package/dist/cjs/fade.animation-71e8e34c-BAw_TYsB.js +0 -68
- package/dist/cjs/nv-accordion.entry-DCspxUr-.js +0 -164
- package/dist/cjs/nv-badge_2.entry-h081ah26.js +0 -212
- package/dist/cjs/nv-icon.entry-DlnsNiSG.js +0 -79
- package/dist/cjs/nv-togglebutton.entry-C6dUap1P.js +0 -55
|
@@ -1,212 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var index = require('./index-9kW3hkgy.js');
|
|
4
|
-
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
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');
|
|
9
|
-
require('react');
|
|
10
|
-
|
|
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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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);z-index:111}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)}";
|
|
12
|
-
const NvBadgeStyle0 = nvBadgeCss;
|
|
13
|
-
|
|
14
|
-
const NvBadge = class {
|
|
15
|
-
constructor(hostRef) {
|
|
16
|
-
index.registerInstance(this, hostRef);
|
|
17
|
-
this.closeClicked = index.createEvent(this, "closeClicked");
|
|
18
|
-
this.hiddenChanged = index.createEvent(this, "hiddenChanged");
|
|
19
|
-
this.hiddenChangedComplete = index.createEvent(this, "hiddenChangedComplete");
|
|
20
|
-
/****************************************************************************/
|
|
21
|
-
//#region DEPRECATED
|
|
22
|
-
/**
|
|
23
|
-
* Whether the badge is dismissible.
|
|
24
|
-
* @deprecated use dismissible instead.
|
|
25
|
-
*/
|
|
26
|
-
this.dismissal = false;
|
|
27
|
-
//#endregion DEPRECATED
|
|
28
|
-
/****************************************************************************/
|
|
29
|
-
//#region PROPERTIES
|
|
30
|
-
/**
|
|
31
|
-
* The color of the badge.
|
|
32
|
-
* deprecated Use status values or named colors instead.
|
|
33
|
-
* Use a string between 1 to 10
|
|
34
|
-
* or one of the status values: error, information, neutral, success, warning
|
|
35
|
-
* or one of the color names: amber, orange, turquoise, crimson, lime
|
|
36
|
-
*/
|
|
37
|
-
this.color = '1';
|
|
38
|
-
/**
|
|
39
|
-
* Main content of the badge.
|
|
40
|
-
*/
|
|
41
|
-
this.label = null;
|
|
42
|
-
/**
|
|
43
|
-
* The lead icon of the badge.
|
|
44
|
-
*/
|
|
45
|
-
this.leadIcon = null;
|
|
46
|
-
/**
|
|
47
|
-
* Whether the badge is dismissible.
|
|
48
|
-
*/
|
|
49
|
-
this.dismissible = false;
|
|
50
|
-
/**
|
|
51
|
-
* Controls the visibility of the badge. Will animate with fade and collapse.
|
|
52
|
-
*/
|
|
53
|
-
this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
|
|
54
|
-
/**
|
|
55
|
-
* When true, the alert does not automatically close upon dismissing.
|
|
56
|
-
* Useful for externally controlled component behavior.
|
|
57
|
-
*/
|
|
58
|
-
this.preventAutoClose = false;
|
|
59
|
-
/**
|
|
60
|
-
* When true, the badge will only display an icon without label.
|
|
61
|
-
* The label will be visually hidden but still accessible for screen readers.
|
|
62
|
-
*/
|
|
63
|
-
this.isIconOnly = false;
|
|
64
|
-
//#endregion LIFECYCLE
|
|
65
|
-
/****************************************************************************/
|
|
66
|
-
//#region METHODS
|
|
67
|
-
/**
|
|
68
|
-
* Handles the close button click.
|
|
69
|
-
*/
|
|
70
|
-
this.handleClose = () => {
|
|
71
|
-
if (!this.preventAutoClose) {
|
|
72
|
-
this.hidden = true;
|
|
73
|
-
}
|
|
74
|
-
this.closeClicked.emit();
|
|
75
|
-
};
|
|
76
|
-
}
|
|
77
|
-
//#endregion EVENTS
|
|
78
|
-
/****************************************************************************/
|
|
79
|
-
//#region WATCHERS
|
|
80
|
-
/**
|
|
81
|
-
* Handles the dismissal prop change.
|
|
82
|
-
* @param {boolean} dismissal - The new dismissal value.
|
|
83
|
-
*/
|
|
84
|
-
handleDismissalChange(dismissal) {
|
|
85
|
-
this.dismissible = dismissal;
|
|
86
|
-
}
|
|
87
|
-
/**
|
|
88
|
-
* Handles the icon prop change.
|
|
89
|
-
* @param {string} icon - The new icon value.
|
|
90
|
-
*/
|
|
91
|
-
handleIconChange(icon) {
|
|
92
|
-
this.leadIcon = icon;
|
|
93
|
-
}
|
|
94
|
-
/**
|
|
95
|
-
* Handles the hidden prop change.
|
|
96
|
-
* @param {boolean} hidden - The new hidden value.
|
|
97
|
-
*/
|
|
98
|
-
async handleHiddenChange(hidden) {
|
|
99
|
-
this.hiddenChanged.emit(hidden);
|
|
100
|
-
if (this._isHidden === true)
|
|
101
|
-
this._isHidden = hidden;
|
|
102
|
-
const { fadeIn, fadeOut } = fade_animation71e8e34c.useFade(this.ref, { duration: 150 });
|
|
103
|
-
const { collapse, expand } = collapse_animation16e3af45.useCollapse(this.ref, { duration: 150 });
|
|
104
|
-
if (hidden === true)
|
|
105
|
-
await timeline_animationAdf35ecb.timeline(fadeOut, collapse).start();
|
|
106
|
-
if (hidden === false)
|
|
107
|
-
await timeline_animationAdf35ecb.timeline(expand, fadeIn).start();
|
|
108
|
-
this.hiddenChangedComplete.emit(hidden);
|
|
109
|
-
if (this._isHidden === false)
|
|
110
|
-
this._isHidden = hidden;
|
|
111
|
-
}
|
|
112
|
-
//#endregion WATCHERS
|
|
113
|
-
/****************************************************************************/
|
|
114
|
-
//#region LIFECYCLE
|
|
115
|
-
/**
|
|
116
|
-
* Component will load.
|
|
117
|
-
*/
|
|
118
|
-
componentWillLoad() {
|
|
119
|
-
if (this.dismissal) {
|
|
120
|
-
this.dismissible = this.dismissal;
|
|
121
|
-
}
|
|
122
|
-
if (this.icon != null && this.icon != '') {
|
|
123
|
-
this.leadIcon = this.icon;
|
|
124
|
-
}
|
|
125
|
-
if (this.hidden) {
|
|
126
|
-
this._isHidden = true;
|
|
127
|
-
const { setCollapsed } = collapse_animation16e3af45.useCollapse(this.ref);
|
|
128
|
-
const { setFadeOut } = fade_animation71e8e34c.useFade(this.ref);
|
|
129
|
-
setCollapsed();
|
|
130
|
-
setFadeOut();
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
//#endregion METHODS
|
|
134
|
-
/****************************************************************************/
|
|
135
|
-
//#region RENDER
|
|
136
|
-
render() {
|
|
137
|
-
return (index.h(index.Host, { key: '435c5bb1f565c8bd95cca5c6828157c80f60aa39', class: clsx297c1ffe.clsx(`badge-${this.color}`, {
|
|
138
|
-
'has-close': this.dismissible,
|
|
139
|
-
'with-gap': this.dismissible || this.label,
|
|
140
|
-
'visually-hidden': this._isHidden,
|
|
141
|
-
'is-icon-only': this.isIconOnly,
|
|
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" })))));
|
|
143
|
-
}
|
|
144
|
-
get ref() { return index.getElement(this); }
|
|
145
|
-
static get watchers() { return {
|
|
146
|
-
"dismissal": ["handleDismissalChange"],
|
|
147
|
-
"icon": ["handleIconChange"],
|
|
148
|
-
"hidden": ["handleHiddenChange"]
|
|
149
|
-
}; }
|
|
150
|
-
};
|
|
151
|
-
NvBadge.style = NvBadgeStyle0;
|
|
152
|
-
|
|
153
|
-
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)}";
|
|
154
|
-
const NvFielddropdownitemcheckStyle0 = nvFielddropdownitemcheckCss;
|
|
155
|
-
|
|
156
|
-
const NvFielddropdownitemcheck = class {
|
|
157
|
-
constructor(hostRef) {
|
|
158
|
-
index.registerInstance(this, hostRef);
|
|
159
|
-
this.itemChecked = index.createEvent(this, "itemChecked");
|
|
160
|
-
/****************************************************************************/
|
|
161
|
-
//#region PROPERTIES
|
|
162
|
-
/**
|
|
163
|
-
* Indicates whether the checkbox is selected.
|
|
164
|
-
*/
|
|
165
|
-
this.checked = false;
|
|
166
|
-
/**
|
|
167
|
-
* Disables the item, preventing any user interaction.
|
|
168
|
-
*/
|
|
169
|
-
this.disabled = false;
|
|
170
|
-
//#endregion EVENTS
|
|
171
|
-
/****************************************************************************/
|
|
172
|
-
//#region METHODS
|
|
173
|
-
/**
|
|
174
|
-
* when the child <nv-fieldcheckbox> change its `checked` state,
|
|
175
|
-
* update `this.checked` and emit `itemChecked`.
|
|
176
|
-
* @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.
|
|
177
|
-
*/
|
|
178
|
-
this.onFieldcheckboxChanged = (event) => {
|
|
179
|
-
if (this.disabled)
|
|
180
|
-
return;
|
|
181
|
-
// NvFieldcheckbox has emitted checkedChanged
|
|
182
|
-
this.checked = event.detail; // get the new state
|
|
183
|
-
this.itemChecked.emit({
|
|
184
|
-
value: this.value,
|
|
185
|
-
checked: this.checked,
|
|
186
|
-
group: this.group,
|
|
187
|
-
});
|
|
188
|
-
};
|
|
189
|
-
/** Make sure the checkbox is checked when clicked anywhere in the item. */
|
|
190
|
-
this.handleClick = () => {
|
|
191
|
-
if (this.disabled)
|
|
192
|
-
return;
|
|
193
|
-
if (this.el.querySelector('input').checked) {
|
|
194
|
-
this.checked = false;
|
|
195
|
-
}
|
|
196
|
-
else {
|
|
197
|
-
this.checked = true;
|
|
198
|
-
}
|
|
199
|
-
};
|
|
200
|
-
}
|
|
201
|
-
//#endregion METHODS
|
|
202
|
-
/****************************************************************************/
|
|
203
|
-
//#region RENDER
|
|
204
|
-
render() {
|
|
205
|
-
return (index.h(index.Host, { key: 'cb922f0c0224c950ab5a87783028f2909eb1e39c', onClick: this.handleClick }, index.h("nv-fieldcheckbox", { key: '6f8748022131a8cd31b0f69851313f80c330172a', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, index.h("slot", { key: '20d1014accc6cfc00658703057b25037175287af' }), index.h("slot", { key: 'a7e61eed6bc72d3a14096cac2c195629a0ce2928', name: "main" }), index.h("slot", { key: '93f6bce370ac36f1ce3e0f2c1d9cdd598c14cb14', name: "label" }), index.h("slot", { key: '837359fc1fea49e0dea221039dc7466cdc86b757', name: "description" }))));
|
|
206
|
-
}
|
|
207
|
-
get el() { return index.getElement(this); }
|
|
208
|
-
};
|
|
209
|
-
NvFielddropdownitemcheck.style = NvFielddropdownitemcheckStyle0;
|
|
210
|
-
|
|
211
|
-
exports.nv_badge = NvBadge;
|
|
212
|
-
exports.nv_fielddropdownitemcheck = NvFielddropdownitemcheck;
|