npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.14.0 → 3.16.0 - Mend

@nova-design-system/nova-webcomponents 3.14.0 → 3.16.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.

Files changed (631) hide show

package/dist/native/{p-40c4a221.entry.js → p-112d096c.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as o,c as e,h as a,H as r,g as n}from"./p-d0a33e64.js";import{c}from"./p-8a1a6e56.js";import{u as i}from"./p-31591941.js";import{u as l}from"./p-ee0df37f.js";import"./p-42ea6b74.js";import{t as s}from"./p-a52cd849.js";const d="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)}";const t=d;const b=class{constructor(a){o(this,a);this.closeClicked=e(this,"closeClicked",7);this.hiddenChanged=e(this,"hiddenChanged",7);this.hiddenChangedComplete=e(this,"hiddenChangedComplete",7);this.dismissal=false;this.color="1";this.label=null;this.leadIcon=null;this.dismissible=false;this.hidden=false;this.preventAutoClose=false;this.isIconOnly=false;this.handleClose=()=>{if(!this.preventAutoClose){this.hidden=true}this.closeClicked.emit()}}handleDismissalChange(o){this.dismissible=o}handleIconChange(o){this.leadIcon=o}async handleHiddenChange(o){this.hiddenChanged.emit(o);if(this._isHidden===true)this._isHidden=o;const{fadeIn:e,fadeOut:a}=l(this.ref,{duration:150});const{collapse:r,expand:n}=i(this.ref,{duration:150});if(o===true)await s(a,r).start();if(o===false)await s(n,e).start();this.hiddenChangedComplete.emit(o);if(this._isHidden===false)this._isHidden=o}componentWillLoad(){if(this.dismissal){this.dismissible=this.dismissal}if(this.icon!=null&&this.icon!=""){this.leadIcon=this.icon}if(this.hidden){this._isHidden=true;const{setCollapsed:o}=i(this.ref);const{setFadeOut:e}=l(this.ref);o();e()}}render(){return a(r,{key:"435c5bb1f565c8bd95cca5c6828157c80f60aa39",class:c(`badge-${this.color}`,{"has-close":this.dismissible,"with-gap":this.dismissible||this.label,"visually-hidden":this._isHidden,"is-icon-only":this.isIconOnly})},a("slot",{key:"271dc833471e026af5088f48227639682e661e97",name:"leading-icon"},this.leadIcon&&a("nv-icon",{key:"e578eabf4c5a09e61e28c3839b943804acdf88e8",name:this.leadIcon,size:"sm"})),a("span",{key:"24d16a21b2b4499be712f9b747c9ab63c5e6ca0c",class:c({"visually-hidden":this.isIconOnly})},this.label,a("slot",{key:"3e3827620e6ade8be256ce7dd0b8bb949f36f2d5"})),this.dismissible&&a("button",{key:"90ed9ec1b71815554b963b0eafeb5536578700cf",onClick:this.handleClose,class:"close",type:"button"},a("nv-icon",{key:"df426e5d88c2bf02e7aa83c179c05db4795f03db",name:"x",size:"sm"})))}get ref(){return n(this)}static get watchers(){return{dismissal:["handleDismissalChange"],icon:["handleIconChange"],hidden:["handleHiddenChange"]}}};b.style=t;const g="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)}";const v=g;const u=class{constructor(a){o(this,a);this.itemChecked=e(this,"itemChecked",7);this.checked=false;this.disabled=false;this.onFieldcheckboxChanged=o=>{if(this.disabled)return;this.checked=o.detail;this.itemChecked.emit({value:this.value,checked:this.checked,group:this.group})};this.handleClick=()=>{if(this.disabled)return;if(this.el.querySelector("input").checked){this.checked=false}else{this.checked=true}}}render(){return a(r,{key:"cb922f0c0224c950ab5a87783028f2909eb1e39c",onClick:this.handleClick},a("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},a("slot",{key:"20d1014accc6cfc00658703057b25037175287af"}),a("slot",{key:"a7e61eed6bc72d3a14096cac2c195629a0ce2928",name:"main"}),a("slot",{key:"93f6bce370ac36f1ce3e0f2c1d9cdd598c14cb14",name:"label"}),a("slot",{key:"837359fc1fea49e0dea221039dc7466cdc86b757",name:"description"})))}get el(){return n(this)}};u.style=v;export{b as nv_badge,u as nv_fielddropdownitemcheck};
-//# sourceMappingURL=p-40c4a221.entry.js.map
+import{r as o,c as e,h as a,H as r,g as n}from"./p-3060df80.js";import{c}from"./p-8a1a6e56.js";import{u as i}from"./p-3cd7a66f.js";import{u as l}from"./p-a271e3be.js";import"./p-42ea6b74.js";import{t as s}from"./p-a52cd849.js";const d="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)}";const t=d;const b=class{constructor(a){o(this,a);this.closeClicked=e(this,"closeClicked",7);this.hiddenChanged=e(this,"hiddenChanged",7);this.hiddenChangedComplete=e(this,"hiddenChangedComplete",7);this.dismissal=false;this.color="1";this.label=null;this.leadIcon=null;this.dismissible=false;this.hidden=false;this.preventAutoClose=false;this.isIconOnly=false;this.handleClose=()=>{if(!this.preventAutoClose){this.hidden=true}this.closeClicked.emit()}}handleDismissalChange(o){this.dismissible=o}handleIconChange(o){this.leadIcon=o}async handleHiddenChange(o){this.hiddenChanged.emit(o);if(this._isHidden===true)this._isHidden=o;const{fadeIn:e,fadeOut:a}=l(this.el,{duration:150});const{collapse:r,expand:n}=i(this.el,{duration:150});if(o===true)await s(a,r).start();if(o===false)await s(n,e).start();this.hiddenChangedComplete.emit(o);if(this._isHidden===false)this._isHidden=o}componentWillLoad(){if(this.dismissal){this.dismissible=this.dismissal}if(this.icon!=null&&this.icon!=""){this.leadIcon=this.icon}if(this.hidden){this._isHidden=true;const{setCollapsed:o}=i(this.el);const{setFadeOut:e}=l(this.el);o();e()}}render(){return a(r,{key:"0e8a142c25a7cb078e8b953794f199135c11b616",class:c(`badge-${this.color}`,{"has-close":this.dismissible,"with-gap":this.dismissible||this.label,"visually-hidden":this._isHidden,"is-icon-only":this.isIconOnly})},a("slot",{key:"a3862245400e63270443b78f21dad3571eb08e5b",name:"leading-icon"},this.leadIcon&&a("nv-icon",{key:"46b69a8544e01ff2f738a050cb2502528fa42b04",name:this.leadIcon,size:"sm"})),a("span",{key:"8b17eeb60dee162baa98c14ccd4d5aa52c01fffc",class:c({"visually-hidden":this.isIconOnly})},this.label,a("slot",{key:"e7bad18f496e001acbdae89b93b8e614f4fcc914"})),this.dismissible&&a("button",{key:"66cdb2c94b7832ea8cd4612326e6399a9ea77bb7",onClick:this.handleClose,class:"close",type:"button"},a("nv-icon",{key:"399de04fb2fc7d5391c9ebf39e953b12e21fb219",name:"x",size:"sm"})))}get el(){return n(this)}static get watchers(){return{dismissal:["handleDismissalChange"],icon:["handleIconChange"],hidden:["handleHiddenChange"]}}};b.style=t;const g="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)}";const v=g;const u=class{constructor(a){o(this,a);this.itemChecked=e(this,"itemChecked",7);this.checked=false;this.disabled=false;this.onFieldcheckboxChanged=o=>{if(this.disabled)return;this.checked=o.detail;this.itemChecked.emit({value:this.value,checked:this.checked,group:this.group})};this.handleClick=()=>{if(this.disabled)return;if(this.el.querySelector("input").checked){this.checked=false}else{this.checked=true}}}render(){return a(r,{key:"cb922f0c0224c950ab5a87783028f2909eb1e39c",onClick:this.handleClick},a("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},a("slot",{key:"20d1014accc6cfc00658703057b25037175287af"}),a("slot",{key:"a7e61eed6bc72d3a14096cac2c195629a0ce2928",name:"main"}),a("slot",{key:"93f6bce370ac36f1ce3e0f2c1d9cdd598c14cb14",name:"label"}),a("slot",{key:"837359fc1fea49e0dea221039dc7466cdc86b757",name:"description"})))}get el(){return n(this)}};u.style=v;export{b as nv_badge,u as nv_fielddropdownitemcheck};
+//# sourceMappingURL=p-112d096c.entry.js.map

package/dist/native/p-112d096c.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["nvBadgeCss","NvBadgeStyle0","NvBadge","constructor","hostRef","this","dismissal","color","label","leadIcon","dismissible","hidden","preventAutoClose","isIconOnly","handleClose","closeClicked","emit","handleDismissalChange","handleIconChange","icon","handleHiddenChange","hiddenChanged","_isHidden","fadeIn","fadeOut","useFade","el","duration","collapse","expand","useCollapse","timeline","start","hiddenChangedComplete","componentWillLoad","setCollapsed","setFadeOut","render","h","Host","key","class","clsx","name","size","onClick","type","nvFielddropdownitemcheckCss","NvFielddropdownitemcheckStyle0","NvFielddropdownitemcheck","checked","disabled","onFieldcheckboxChanged","event","detail","itemChecked","value","group","handleClick","querySelector","labelPlacement","description","tabindex","onCheckedChanged"],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.scss?tag=nv-fielddropdownitemcheck","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../nv-icon/styles/mixins' as icon;\n@use '../../styles/utils' as utils;\n@import '../../styles/focus-ring';\n\n/* Variants */\n$badge-colors: (\n '1',\n '2',\n '3',\n '4',\n '5',\n '6',\n '7',\n '8',\n '9',\n '10',\n 'error',\n 'information',\n 'neutral',\n 'success',\n 'warning',\n 'amber',\n 'orange',\n 'turquoise',\n 'crimson',\n 'lime',\n 'petrol',\n);\n\n/* Define maps for color-related variables */\n$color-rainbow-text: (\n '1': var(--color-rainbow-1-text),\n '2': var(--color-rainbow-2-text),\n '3': var(--color-rainbow-3-text),\n '4': var(--color-rainbow-4-text),\n '5': var(--color-rainbow-5-text),\n '6': var(--color-rainbow-6-text),\n '7': var(--color-rainbow-7-text),\n '8': var(--color-rainbow-8-text),\n '9': var(--color-rainbow-9-text),\n '10': var(--color-rainbow-10-text),\n 'error': var(--color-feedback-error-low-text),\n 'information': var(--color-feedback-information-low-text),\n 'neutral': var(--color-feedback-neutral-low-text),\n 'success': var(--color-feedback-success-low-text),\n 'warning': var(--color-feedback-warning-low-text),\n 'amber': var(--color-rainbow-1-text),\n 'orange': var(--color-rainbow-2-text),\n 'turquoise': var(--color-rainbow-5-text),\n 'crimson': var(--color-rainbow-6-text),\n 'lime': var(--color-rainbow-9-text),\n 'petrol': var(--color-rainbow-8-text),\n);\n\n$color-rainbow-icon: (\n '1': var(--color-rainbow-1-icon),\n '2': var(--color-rainbow-2-icon),\n '3': var(--color-rainbow-3-icon),\n '4': var(--color-rainbow-4-icon),\n '5': var(--color-rainbow-5-icon),\n '6': var(--color-rainbow-6-icon),\n '7': var(--color-rainbow-7-icon),\n '8': var(--color-rainbow-8-icon),\n '9': var(--color-rainbow-9-icon),\n '10': var(--color-rainbow-10-icon),\n 'error': var(--color-feedback-error-low-icon),\n 'information': var(--color-feedback-information-low-icon),\n 'neutral': var(--color-feedback-neutral-low-icon),\n 'success': var(--color-feedback-success-low-icon),\n 'warning': var(--color-feedback-warning-low-icon),\n 'amber': var(--color-rainbow-1-icon),\n 'orange': var(--color-rainbow-2-icon),\n 'turquoise': var(--color-rainbow-5-icon),\n 'crimson': var(--color-rainbow-6-icon),\n 'lime': var(--color-rainbow-9-icon),\n 'petrol': var(--color-rainbow-8-icon),\n);\n\n$color-rainbow-background: (\n '1': var(--color-rainbow-1-background),\n '2': var(--color-rainbow-2-background),\n '3': var(--color-rainbow-3-background),\n '4': var(--color-rainbow-4-background),\n '5': var(--color-rainbow-5-background),\n '6': var(--color-rainbow-6-background),\n '7': var(--color-rainbow-7-background),\n '8': var(--color-rainbow-8-background),\n '9': var(--color-rainbow-9-background),\n '10': var(--color-rainbow-10-background),\n 'error': var(--color-feedback-error-low-background),\n 'information': var(--color-feedback-information-low-background),\n 'neutral': var(--color-feedback-neutral-low-background),\n 'success': var(--color-feedback-success-low-background),\n 'warning': var(--color-feedback-warning-low-background),\n 'amber': var(--color-rainbow-1-background),\n 'orange': var(--color-rainbow-2-background),\n 'turquoise': var(--color-rainbow-5-background),\n 'crimson': var(--color-rainbow-6-background),\n 'lime': var(--color-rainbow-9-background),\n 'petrol': var(--color-rainbow-8-background),\n);\n$color-rainbow-border: (\n '1': var(--color-rainbow-1-border),\n '2': var(--color-rainbow-2-border),\n '3': var(--color-rainbow-3-border),\n '4': var(--color-rainbow-4-border),\n '5': var(--color-rainbow-5-border),\n '6': var(--color-rainbow-6-border),\n '7': var(--color-rainbow-7-border),\n '8': var(--color-rainbow-8-border),\n '9': var(--color-rainbow-9-border),\n '10': var(--color-rainbow-10-border),\n 'error': var(--color-feedback-error-low-border),\n 'information': var(--color-feedback-information-low-border),\n 'neutral': var(--color-feedback-neutral-low-border),\n 'success': var(--color-feedback-success-low-border),\n 'warning': var(--color-feedback-warning-low-border),\n 'amber': var(--color-rainbow-1-border),\n 'orange': var(--color-rainbow-2-border),\n 'turquoise': var(--color-rainbow-5-border),\n 'crimson': var(--color-rainbow-6-border),\n 'lime': var(--color-rainbow-9-border),\n 'petrol': var(--color-rainbow-8-border),\n);\n\n@mixin root-styles() {\n padding: var(--badge-padding-y) var(--badge-padding-x);\n display: inline-flex !important; // override the display: none in [hidden] css\n gap: var(--badge-gap-x);\n vertical-align: middle;\n align-items: center;\n border-radius: var(--radius-rounded-full);\n border-style: solid;\n border-width: 0.5px;\n height: fit-content;\n width: fit-content;\n\n &.is-icon-only {\n padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);\n gap: var(--badge-gap-icon-only-x);\n }\n}\n\n@mixin root-styles-with-gap() {\n @include root-styles();\n}\n\n@mixin badge-color($color-key) {\n color: map.get($color-rainbow-text, $color-key);\n background-color: map.get($color-rainbow-background, $color-key);\n border-color: map.get($color-rainbow-border, $color-key);\n .close {\n @include focus-ring(\n if(\n str-index('error information neutral success warning', $color-key),\n var(\n --color-feedback-#{$color-key}-low-content,\n map.get($color-rainbow-text, $color-key)\n ),\n if(\n type-of($color-key) == 'string' and not (str-length($color-key) <= 2)\n and not\n str-index('error information neutral success warning', $color-key),\n var(\n --color-#{$color-key}-content,\n map.get($color-rainbow-text, $color-key)\n ),\n var(--color-rainbow-#{$color-key}-content)\n )\n ),\n 0.2\n );\n }\n}\n\n@mixin icon-color($color-key) {\n color: map.get($color-rainbow-icon, $color-key);\n}\n\n@mixin type-settings($font-size, $line-height) {\n font-size: var(--font-size-xs);\n line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n @include root-styles();\n\n //gap styles\n &.with-gap {\n @include root-styles-with-gap();\n }\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n\n &:not(.with-gap) {\n @include root-styles();\n }\n\n // color styles\n @each $i in $badge-colors {\n &.badge-#{$i} {\n @include badge-color($i);\n nv-icon {\n @include icon-color($i);\n }\n }\n }\n\n //label styles\n & span {\n @include type-settings(xs, xs);\n text-align: center;\n }\n\n // nv-icon styles\n & nv-icon > svg {\n @each $size, $config in icon.$size-variants {\n &.icon-#{$size} {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$size-variants, 'xs'), size),\n map.get(map.get(icon.$size-variants, 'xs'), stroke)\n );\n }\n }\n }\n\n .close {\n padding: 0;\n line-height: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: inherit;\n display: inline-flex;\n align-items: center;\n aspect-ratio: 1/1;\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n * @slot default - for custom content, for pure text use label instead.\n */\n@Component({\n tag: 'nv-badge',\n styleUrl: 'nv-badge.scss',\n shadow: false,\n})\nexport class NvBadge {\n @Element() el: HTMLNvBadgeElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Whether the badge is dismissible.\n * @deprecated use dismissible instead.\n */\n @Prop({ reflect: true })\n readonly dismissal: boolean = false;\n\n /**\n * The icon to display in the badge.\n * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n */\n @Prop({ reflect: true })\n readonly icon: string;\n\n /**\n * The location of the icon in the badge.\n * @deprecated only leadIcon now.\n */\n @Prop({ reflect: true })\n readonly iconLocation: 'left' | 'right';\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * The color of the badge.\n * deprecated Use status values or named colors instead.\n * Use a string between 1 to 10\n * or one of the status values: error, information, neutral, success, warning\n * or one of the color names: amber, orange, turquoise, crimson, lime\n */\n @Prop({ reflect: true })\n readonly color?: string = '1';\n\n /**\n * Main content of the badge.\n */\n @Prop({ reflect: true })\n readonly label?: string | null = null;\n\n /**\n * The lead icon of the badge.\n */\n @Prop({ reflect: true, mutable: true })\n leadIcon?: string | null = null;\n\n /**\n * Whether the badge is dismissible.\n */\n @Prop({ reflect: true, mutable: true })\n dismissible: boolean = false;\n\n /**\n * Controls the visibility of the badge. Will animate with fade and collapse.\n */\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n @State()\n private _isHidden: boolean;\n\n /**\n * When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n */\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n /**\n * When true, the badge will only display an icon without label.\n * The label will be visually hidden but still accessible for screen readers.\n */\n @Prop({ reflect: true })\n readonly isIconOnly?: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the badge is dismissed.\n */\n @Event()\n closeClicked: EventEmitter<void>;\n\n /**\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n */\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /**\n * Emitted when the animations complete, detail includes the hidden value.\n */\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * Handles the dismissal prop change.\n * @param {boolean} dismissal - The new dismissal value.\n */\n @Watch('dismissal')\n handleDismissalChange(dismissal: boolean) {\n this.dismissible = dismissal;\n }\n\n /**\n * Handles the icon prop change.\n * @param {string} icon - The new icon value.\n */\n @Watch('icon')\n handleIconChange(icon: string) {\n this.leadIcon = icon;\n }\n\n /**\n * Handles the hidden prop change.\n * @param {boolean} hidden - The new hidden value.\n */\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n if (this._isHidden === true) this._isHidden = hidden;\n\n const { fadeIn, fadeOut } = useFade(this.el, { duration: 150 });\n const { collapse, expand } = useCollapse(this.el, { duration: 150 });\n\n if (hidden === true) await timeline(fadeOut, collapse).start();\n if (hidden === false) await timeline(expand, fadeIn).start();\n\n this.hiddenChangedComplete.emit(hidden);\n\n if (this._isHidden === false) this._isHidden = hidden;\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n /**\n * Component will load.\n */\n componentWillLoad() {\n if (this.dismissal) {\n this.dismissible = this.dismissal;\n }\n\n if (this.icon != null && this.icon != '') {\n this.leadIcon = this.icon;\n }\n\n if (this.hidden) {\n this._isHidden = true;\n const { setCollapsed } = useCollapse(this.el);\n const { setFadeOut } = useFade(this.el);\n\n setCollapsed();\n setFadeOut();\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles the close button click.\n */\n private readonly handleClose = () => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit();\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`badge-${this.color}`, {\n 'has-close': this.dismissible,\n 'with-gap': this.dismissible || this.label,\n 'visually-hidden': this._isHidden,\n 'is-icon-only': this.isIconOnly,\n })}\n >\n <slot name=\"leading-icon\">\n {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n </slot>\n\n <span class={clsx({ 'visually-hidden': this.isIconOnly })}>\n {this.label}\n <slot></slot>\n </span>\n\n {this.dismissible && (\n <button onClick={this.handleClose} class=\"close\" type=\"button\">\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n","nv-fielddropdownitemcheck {\n slot-fb,\n span {\n all: unset;\n }\n\n cursor: pointer;\n display: flex;\n padding: var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);\n border-radius: var(--list-dropdown-item-radius);\n\n &:hover {\n background-color: var(--components-list-dropdown-item-background-hover);\n }\n}","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\n\n/**\n * @slot default - Next to the label and description.\n * @slot main - Replaces the label and description.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n tag: 'nv-fielddropdownitemcheck',\n styleUrl: 'nv-fielddropdownitemcheck.scss',\n shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Indicates whether the checkbox is selected.\n */\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /**\n * The value associated with this item.\n */\n @Prop({ reflect: true })\n readonly value?: string;\n\n /**\n * The label displayed alongside the checkbox.\n */\n @Prop({ reflect: true })\n readonly label?: string;\n\n /**\n * A description providing additional context or information about the\n * checkbox.\n */\n @Prop({ reflect: true })\n readonly description?: string;\n\n /**\n * The group this item belongs to, if applicable.\n */\n @Prop({ reflect: true })\n readonly group?: string;\n\n /**\n * Disables the item, preventing any user interaction.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Event emitted when the checkbox is toggled.\n * It provides details about the current state of the item.\n */\n @Event()\n itemChecked: EventEmitter<{\n /**\n * The value associated with this item\n */\n value: string | undefined;\n /**\n * Whether the checkbox is currently checked\n */\n checked: boolean;\n /**\n * The group this item belongs to, if any\n */\n group?: string | undefined;\n }>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * when the child <nv-fieldcheckbox> change its `checked` state,\n * update `this.checked` and emit `itemChecked`.\n * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n */\n private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n if (this.disabled) return;\n\n // NvFieldcheckbox has emitted checkedChanged\n this.checked = event.detail; // get the new state\n this.itemChecked.emit({\n value: this.value,\n checked: this.checked,\n group: this.group,\n });\n };\n\n /** Make sure the checkbox is checked when clicked anywhere in the item. */\n private handleClick = () => {\n if (this.disabled) return;\n\n if (this.el.querySelector('input').checked) {\n this.checked = false;\n } else {\n this.checked = true;\n }\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host onClick={this.handleClick}>\n <nv-fieldcheckbox\n checked={this.checked}\n name={this.label || this.value}\n label={this.label || this.value}\n labelPlacement=\"after\"\n description={this.description}\n disabled={this.disabled}\n tabindex=\"-1\"\n onCheckedChanged={this.onFieldcheckboxChanged}\n >\n <slot></slot>\n <slot name=\"main\"></slot>\n <slot name=\"label\"></slot>\n <slot name=\"description\"></slot>\n </nv-fieldcheckbox>\n </Host>\n );\n }\n\n //#endregion RENDER\n /****************************************************************************/\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/p-217de553.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as o,f as t,h as n,H as i,g as s}from"./p-3060df80.js";const r="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}";const a=r;const d=class{constructor(t){e(this,t);this.openIndexesChanged=o(this,"openIndexesChanged",7);this.data=[];this.mode="accordion";this.openIndexes=[];this.updatingFromInternal=false}async open(e){this.toggleItem(e,true)}async close(e){this.toggleItem(e,false)}toggleItem(e,o){const t=Array.from(this.el.querySelectorAll("nv-accordion-item"));const n=t[e];if(!n\|\|n.disabled){console.warn("[toggleItem] Item not found or disabled:",e);this.openIndexesChanged.emit([...this.openIndexes\|\|[]]);return}let i=[...this.openIndexes\|\|[]];const s=i.includes(e);if(this.mode==="accordion"){i=o===false\|\|o===undefined&&s?[]:[e]}else{if(o===false){i=i.filter((o=>o!==e))}else if(o===true&&!s){i.push(e)}else if(o===undefined){i=s?i.filter((o=>o!==e)):[...i,e]}}this.updatingFromInternal=true;this.openIndexes=[...i];this.updateChildrenState();this.updatingFromInternal=false;this.openIndexesChanged.emit([...i])}async updateChildrenState(){const e=Array.from(this.el.querySelectorAll("nv-accordion-item"));e.forEach(((e,o)=>{const n=(this.openIndexes\|\|[]).includes(o);e.open=n;e.mode=this.mode;e.setAttribute("aria-expanded",n?"true":"false");t(e)}))}onItemToggle(e){if(this.updatingFromInternal){return}const o=Array.from(this.el.querySelectorAll("nv-accordion-item"));const t=e.target;const n=o.indexOf(t);if(n!==-1){this.toggleItem(n,e.detail)}else{console.warn("[onItemToggle] Target item not found in items list")}}onOpenIndexesChange(e,o){if(!this.updatingFromInternal&&e!==undefined&&e!==o){this.updateChildrenState()}}onModeChange(){this.updateChildrenState()}componentWillLoad(){if(this.openIndexes===undefined){this.openIndexes=[]}}async componentDidLoad(){var e;const o=Array.from(this.el.querySelectorAll("nv-accordion-item"));if(!((e=this.data)===null\|\|e===void 0?void 0:e.length)&&(!this.openIndexes\|\|this.openIndexes.length===0)){const e=o.map(((e,o)=>e.hasAttribute("open")\|\|e.open?o:-1)).filter((e=>e!==-1));if(e.length>0){this.updatingFromInternal=true;this.openIndexes=[...e];this.updatingFromInternal=false;this.openIndexesChanged.emit([...this.openIndexes])}}await this.updateChildrenState()}render(){var e;return n(i,{key:"b7fa476c7830d6c5715ce53e42ad37253942e0e1",role:"list",class:"nv-accordion"},((e=this.data)===null\|\|e===void 0?void 0:e.length)?this.data.map(((e,o)=>{var t;return n("nv-accordion-item",{key:(t=e.id)!==null&&t!==void 0?t:o,itemTitle:e.title,disabled:e.disabled,open:(this.openIndexes\|\|[]).includes(o),mode:this.mode},e.subtitle?n("div",{slot:"header"},n("div",{class:"nv-accordion-item__header-content"},n("span",{class:"nv-accordion-item__title"},e.title),n("span",{class:"nv-accordion-item__subtitle"},e.subtitle))):null,n("div",{slot:"content"},e.content),e.footer&&n("div",{slot:"footer"},e.footer))})):n("slot",null))}get el(){return s(this)}static get watchers(){return{openIndexes:["onOpenIndexesChange"],mode:["onModeChange"]}}};d.style=a;export{d as nv_accordion};
2	+ //# sourceMappingURL=p-217de553.entry.js.map

package/dist/native/p-217de553.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["nvAccordionCss","NvAccordionStyle0","NvAccordion","constructor","hostRef","this","data","mode","openIndexes","updatingFromInternal","open","index","toggleItem","close","forceOpen","items","Array","from","el","querySelectorAll","item","disabled","console","warn","openIndexesChanged","emit","isOpen","includes","undefined","filter","i","push","updateChildrenState","forEach","shouldBeOpen","setAttribute","forceUpdate","onItemToggle","event","targetItem","target","indexOf","detail","onOpenIndexesChange","newValue","oldValue","onModeChange","componentWillLoad","componentDidLoad","_a","length","childOpenIndexes","map","hasAttribute","render","h","Host","key","role","class","id","itemTitle","title","subtitle","slot","content","footer"],"sources":["src/components/nv-accordion/styles/nv-accordion.scss?tag=nv-accordion","src/components/nv-accordion/nv-accordion.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-accordion {\n @include accordion-root();\n\n .nv-accordion__footer {\n @include accordion-footer();\n\n &:empty {\n @include accordion-footer-empty();\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Method,\n Listen,\n Element,\n forceUpdate,\n Watch,\n} from '@stencil/core';\n\n/**\n * @slot default - Slot for custom content (optional, ignored if data is provided)\n */\n@Component({\n tag: 'nv-accordion',\n styleUrl: 'styles/nv-accordion.scss',\n shadow: false,\n})\nexport class NvAccordion {\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Data to display as a list of items (title, subtitle, content).\n */\n @Prop({ reflect: false })\n readonly data: {\n /** Unique identifier of the item */\n id: string;\n /** Item title */\n title: string;\n /** Optional subtitle */\n subtitle?: string;\n /** Main content */\n content: string;\n /** Optional footer */\n footer?: string;\n /** Disabled state */\n disabled?: boolean;\n }[] = [];\n\n /**\n * Expansion mode: 'accordion' (single open) or 'multi' (multiple open)\n */\n @Prop({ reflect: true })\n readonly mode: 'accordion' | 'multi' = 'accordion';\n\n /**\n * Index of open items (external control possible)\n */\n @Prop({ reflect: false, mutable: true })\n openIndexes?: number[] = [];\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region STATE\n\n @State()\n private updatingFromInternal: boolean = false;\n\n /**\n * Reference to host element to access children\n */\n @Element() el!: HTMLNvAccordionElement;\n\n //#endregion STATE\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Event emitted when an item's open state changes\n * @bind openIndexes\n */\n @Event()\n openIndexesChanged: EventEmitter<number[]>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Opens an item by its index (Public API)\n * @param {number} index Index of the item to open\n */\n @Method()\n async open(index: number) {\n this.toggleItem(index, true);\n }\n\n /**\n * Closes an item by its index (Public API)\n * @param {number} index Index of the item to close\n */\n @Method()\n async close(index: number) {\n this.toggleItem(index, false);\n }\n\n /**\n * Toggles an item's state (internal)\n * @param {number} index Item index\n * @param {boolean} [forceOpen] Force open (true) or close (false)\n */\n private toggleItem(index: number, forceOpen?: boolean) {\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n const item = items[index];\n\n if (!item || item.disabled) {\n console.warn('[toggleItem] Item not found or disabled:', index);\n this.openIndexesChanged.emit([...(this.openIndexes || [])]);\n return;\n }\n\n let openIndexes = [...(this.openIndexes || [])];\n const isOpen = openIndexes.includes(index);\n\n if (this.mode === 'accordion') {\n openIndexes =\n forceOpen === false || (forceOpen === undefined && isOpen)\n ? []\n : [index];\n } else {\n if (forceOpen === false) {\n openIndexes = openIndexes.filter(i => i !== index);\n } else if (forceOpen === true && !isOpen) {\n openIndexes.push(index);\n } else if (forceOpen === undefined) {\n openIndexes = isOpen\n ? openIndexes.filter(i => i !== index)\n : [...openIndexes, index];\n }\n }\n\n this.updatingFromInternal = true;\n this.openIndexes = [...openIndexes];\n this.updateChildrenState();\n this.updatingFromInternal = false;\n\n this.openIndexesChanged.emit([...openIndexes]);\n }\n\n /**\n * Updates the open state of child elements based on openIndexes\n */\n private async updateChildrenState() {\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n\n items.forEach((item, i) => {\n const shouldBeOpen = (this.openIndexes || []).includes(i);\n item.open = shouldBeOpen;\n item.mode = this.mode;\n item.setAttribute('aria-expanded', shouldBeOpen ? 'true' : 'false');\n forceUpdate(item);\n });\n }\n\n /**\n * Listens to itemToggle events from nv-accordion-item elements\n * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item\n */\n @Listen('itemToggle')\n onItemToggle(event: CustomEvent<boolean>) {\n if (this.updatingFromInternal) {\n return;\n }\n\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n const targetItem = event.target as HTMLNvAccordionItemElement;\n const index = items.indexOf(targetItem);\n\n if (index !== -1) {\n this.toggleItem(index, event.detail);\n } else {\n console.warn('[onItemToggle] Target item not found in items list');\n }\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('openIndexes')\n onOpenIndexesChange(\n newValue: number[] | undefined,\n oldValue: number[] | undefined,\n ) {\n if (\n !this.updatingFromInternal &&\n newValue !== undefined &&\n newValue !== oldValue\n ) {\n this.updateChildrenState();\n }\n }\n\n @Watch('mode')\n onModeChange() {\n this.updateChildrenState();\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.openIndexes === undefined) {\n this.openIndexes = [];\n }\n }\n\n async componentDidLoad() {\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n\n // Only initialize openIndexes from child items if no data is provided and openIndexes is not explicitly set\n if (\n !this.data?.length &&\n (!this.openIndexes || this.openIndexes.length === 0)\n ) {\n const childOpenIndexes = items\n .map((item, i) => (item.hasAttribute('open') || item.open ? i : -1))\n .filter(i => i !== -1);\n\n if (childOpenIndexes.length > 0) {\n this.updatingFromInternal = true;\n this.openIndexes = [...childOpenIndexes];\n this.updatingFromInternal = false;\n\n this.openIndexesChanged.emit([...this.openIndexes]);\n }\n }\n\n // Ensure children are in sync with current openIndexes state\n await this.updateChildrenState();\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"list\" class=\"nv-accordion\">\n {this.data?.length ? (\n this.data.map((item, i) => (\n <nv-accordion-item\n key={item.id ?? i}\n itemTitle={item.title}\n disabled={item.disabled}\n open={(this.openIndexes || []).includes(i)}\n mode={this.mode}\n >\n {item.subtitle ? (\n <div slot=\"header\">\n <div class=\"nv-accordion-item__header-content\">\n <span class=\"nv-accordion-item__title\">{item.title}</span>\n <span class=\"nv-accordion-item__subtitle\">\n {item.subtitle}\n </span>\n </div>\n </div>\n ) : null}\n <div slot=\"content\">{item.content}</div>\n {item.footer && <div slot=\"footer\">{item.footer}</div>}\n </nv-accordion-item>\n ))\n ) : (\n <slot></slot>\n )}\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/{p-85f8f11a.entry.js → p-230af58a.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as o,H as i,g as n}from"./p-d0a33e64.js";const d="nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";const a=d;const s=class{constructor(o){e(this,o);this.dropdownItemSelected=t(this,"dropdownItemSelected",7);this.composed=false;this.disabled=false;this.selected=false;this.handleSelected=()=>{if(this.disabled)return;this.dropdownItemSelected.emit({label:this.label,value:this.value})}}handleKeyDown(e){var t,o;if(e.target!==this.el)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleSelected();(o=(t=this.el.closest("nv-fielddropdown"))===null||t===void 0?void 0:t.querySelector("[data-scope='focusable']"))===null||o===void 0?void 0:o.focus()}}componentWillLoad(){var e;this.composed=Boolean(this.el.children.length);if(!this.value){const t=(e=this.label)!==null&&e!==void 0?e:this.el.textContent;this.value=t.replace(/\W+/g,"")}}render(){return o(i,{key:"a70651c297707bf06023a898dd9f99b81b71e243",role:"menuitem",tabindex:"-1",onClick:this.handleSelected},o("slot",{key:"0f4d1b390a7c558ac3348372ad4923829d84019d"}),!this.composed&&o("div",{key:"edbaf2f00b95ae3100aa4578799ea056da28b0c4",class:"text-wrapper"},o("span",{key:"c7258b0bd06a557602cac32a2f98266326762f9c","data-scope":"text"},this.label)),this.selected&&o("nv-icon",{key:"3cdf6e8a02eeb6dfa41eeac96d32c6c09ff5e828",name:"check","aria-hidden":"true","data-scope":"selected"}))}get el(){return n(this)}};s.style=a;export{s as nv_fielddropdownitem};
-//# sourceMappingURL=p-85f8f11a.entry.js.map
+import{r as e,c as t,h as o,H as i,g as n}from"./p-3060df80.js";const d="nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";const a=d;const s=class{constructor(o){e(this,o);this.dropdownItemSelected=t(this,"dropdownItemSelected",7);this.composed=false;this.disabled=false;this.selected=false;this.handleSelected=()=>{if(this.disabled)return;this.dropdownItemSelected.emit({label:this.label,value:this.value})}}handleKeyDown(e){var t,o;if(e.target!==this.el)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleSelected();(o=(t=this.el.closest("nv-fielddropdown"))===null||t===void 0?void 0:t.querySelector("[data-scope='focusable']"))===null||o===void 0?void 0:o.focus()}}componentWillLoad(){var e;this.composed=Boolean(this.el.children.length);if(!this.value){const t=(e=this.label)!==null&&e!==void 0?e:this.el.textContent;this.value=t.replace(/\W+/g,"")}}render(){return o(i,{key:"a70651c297707bf06023a898dd9f99b81b71e243",role:"menuitem",tabindex:"-1",onClick:this.handleSelected},o("slot",{key:"0f4d1b390a7c558ac3348372ad4923829d84019d"}),!this.composed&&o("div",{key:"edbaf2f00b95ae3100aa4578799ea056da28b0c4",class:"text-wrapper"},o("span",{key:"c7258b0bd06a557602cac32a2f98266326762f9c","data-scope":"text"},this.label)),this.selected&&o("nv-icon",{key:"3cdf6e8a02eeb6dfa41eeac96d32c6c09ff5e828",name:"check","aria-hidden":"true","data-scope":"selected"}))}get el(){return n(this)}};s.style=a;export{s as nv_fielddropdownitem};
+//# sourceMappingURL=p-230af58a.entry.js.map

package/dist/native/p-23ee0384.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as n,c as e,h as r,H as i,g as o}from"./p-3060df80.js";import{v as t}from"./p-f5ff676c.js";const a='/* TODO: integrate this logic in the proper structure /\nnv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range {\n background: var(--components-slider-track-filled-hover);\n}\nnv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb {\n border-color: var(--components-slider-track-filled-hover);\n}\nnv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range {\n background: var(--components-slider-track-filled-focus);\n}\nnv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb {\n border-color: var(--components-slider-track-filled-focus);\n}\nnv-fieldslider[error] .slider-container .track-container .track .track-range {\n background: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container .track .thumb {\n border-color: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container .track .thumb:hover {\n border-color: var(--components-slider-track-filled-error);\n outline: calc(var(--focus-outline-stroke) 1) solid var(--components-slider-track-filled-error);\n outline-offset: calc(var(--focus-outline-offset) * 1);\n background-color: var(--components-slider-handler-background-error);\n}\nnv-fieldslider[error] .slider-container .track-container .track .thumb:focus {\n border-color: var(--components-slider-track-filled-error);\n outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);\n outline-offset: calc(var(--focus-outline-offset) * 1);\n background-color: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range {\n background: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb {\n border-color: var(--components-slider-track-filled-error);\n}\n\nnv-fieldnumber {\n --nv-field-border-default: var(--components-form-field-border-default);\n --nv-field-border-hover: var(--components-form-field-border-hover);\n --nv-field-border-focus: var(--components-form-field-border-focus);\n --nv-field-border-disabled: var(--components-form-field-border-default);\n --nv-field-border-readonly: var(--components-form-field-border-default);\n --nv-field-focus-box-shadow: var(--color-focus-brand);\n --nv-field-background: var(--components-form-field-background-default);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--form-gap-y);\n box-sizing: border-box;\n max-width: 480px;\n}\nnv-fieldnumber[fluid]:not([fluid=false]) {\n max-width: unset;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n --nv-field-border-default: var(--components-form-field-border-readonly);\n --nv-field-border-hover: var(--nv-field-border-default);\n --nv-field-border-focus: var(--components-form-field-border-focus);\n --nv-field-border-disabled: var(--nv-field-border-default);\n --nv-field-border-readonly: var(--nv-field-border-default);\n --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n --nv-field-border-default: var(--components-form-field-border-error);\n --nv-field-border-hover: var(--nv-field-border-default);\n --nv-field-border-focus: var(--nv-field-border-default);\n --nv-field-border-disabled: var(--nv-field-border-default);\n --nv-field-border-readonly: var(--nv-field-border-default);\n --nv-field-focus-box-shadow: var(--color-focus-destructive-in-field);\n}\nnv-fieldnumber[success]:not([success=false]) {\n --nv-field-border-default: var(--components-form-field-border-success);\n --nv-field-border-hover: var(--nv-field-border-default);\n --nv-field-border-focus: var(--nv-field-border-default);\n --nv-field-border-disabled: var(--nv-field-border-default);\n --nv-field-border-readonly: var(--nv-field-border-default);\n --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after {\n content: "";\n color: var(--components-form-text-required);\n font-weight: var(--font-weight-high-emphasis);\n}\nnv-fieldnumber label {\n display: flex;\n align-items: center;\n gap: var(--form-label-gap);\n align-self: stretch;\n color: var(--components-form-text-label-default);\n font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: var(--font-weight-medium-emphasis);\n line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n display: flex;\n flex-wrap: wrap;\n gap: var(--form-gap-x);\n align-items: stretch;\n align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n display: flex;\n flex-grow: 1;\n justify-content: center;\n align-items: center;\n align-self: stretch;\n border-radius: var(--form-field-radius);\n border-width: 1px;\n border-style: solid;\n border-color: var(--nv-field-border-default);\n opacity: var(--components-form-opacity-default, 1);\n background: var(--nv-field-background);\n transition: all 150ms ease-out;\n container-type: inline-size;\n container-name: field-number-input-container;\n overflow: hidden;\n position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n border-color: var(--nv-field-border-hover);\n}\nnv-fieldnumber .input-wrapper .input-container:focus-within, nv-fieldnumber .input-wrapper .input-container:focus-within:hover, nv-fieldnumber .input-wrapper .input-container:focus, nv-fieldnumber .input-wrapper .input-container:focus:hover {\n border-color: var(--nv-field-border-focus);\n box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n opacity: 0.5;\n background-color: var(--components-form-field-background-readonly);\n border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n opacity: 0.5;\n background-color: var(--components-form-field-background-disabled);\n border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n display: flex;\n align-items: center;\n flex: 1 0 0;\n overflow: hidden;\n background-color: transparent;\n color: var(--components-form-field-content-text);\n padding: var(--form-field-padding-y) var(--form-field-padding-x);\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: var(--font-weight-medium-emphasis);\n line-height: var(--form-field-line-height);\n width: 100%;\n / Hide Edge built-in password reveal and clear icons */\n width: 100%;\n appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n overflow: hidden;\n color: var(--components-form-field-content-placeholder);\n text-overflow: ellipsis;\n font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: var(--font-weight-low-emphasis);\n line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-clear, nv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n appearance: none;\n margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n color: var(--nv-field-border-default);\n margin-right: var(--form-field-gap);\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton {\n border: 0px;\n border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:focus-visible {\n border-radius: var(--button-md-border-radius);\n outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:last-of-type {\n border-top-right-radius: var(--form-field-radius);\n border-bottom-right-radius: var(--form-field-radius);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n display: flex;\n border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton {\n border: 0px;\n border-radius: 0px;\n border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:focus-visible {\n border-radius: var(--button-md-border-radius);\n outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:last-of-type {\n border-top-right-radius: var(--form-field-radius);\n border-bottom-right-radius: var(--form-field-radius);\n}\n@container field-number-input-container (width < 150px) {\n nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n display: none;\n }\n nv-fieldnumber .input-wrapper .input-container .stepper {\n display: none;\n }\n}\nnv-fieldnumber .description {\n display: flex;\n align-items: center;\n align-self: stretch;\n gap: var(--spacing-1);\n color: var(--components-form-text-description-default);\n font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\n display: flex;\n align-items: center;\n align-self: stretch;\n gap: var(--spacing-1);\n color: var(--components-form-text-description-default);\n font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n line-height: var(--form-description-line-height);\n color: var(--components-form-text-description-error);\n}';const d=a;const l=class{constructor(r){n(this,r);this.valueChanged=e(this,"valueChanged",7);this.inputId=t();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.step=1;this.autofocus=false;this.fluid=false;this.handleInput=n=>{const e=n.target;this.value=e.valueAsNumber};this.handleInputContainerClick=()=>{this.inputElement.focus()};this.handlePlus=()=>{this.inputElement.stepUp();this.value=Number(this.inputElement.value)};this.handleMinus=()=>{this.inputElement.stepDown();this.value=Number(this.inputElement.value)};this.preventSelection=n=>{n.preventDefault()};this.isMinValueReached=()=>this.min!==undefined&&this.value<=this.min;this.isMaxValueReached=()=>this.max!==undefined&&this.value>=this.max}watchValueHandler(n){this.valueChanged.emit(n)}componentWillRender(){if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}render(){return r(i,{key:"1bbe4506220df2ebb5723e916edcf49b3c0295e4"},(this.label\|\|this.el.querySelector('[slot="label"]'))&&r("label",{key:"56ed85a58e669e9c6aec04ed9ea7bc9664c478f8",htmlFor:this.inputId},r("slot",{key:"b4cf04b6bca34f0ff158fd9e7b14c56df7ea3e8a",name:"label"},this.label)),r("div",{key:"9c9432645591952acff5b1f73c5be8d8f1dae7fb",class:"input-wrapper"},r("slot",{key:"05bacf384b22fce12a66109864ec95fab403f8d7",name:"before-input"}),r("div",{key:"66f0c59c38b7309834ba22bbd767e94a04964781",class:"input-container",onClick:this.handleInputContainerClick},r("slot",{key:"7e2a7c766484b8c4c4caabab311ea635f95eb4fd",name:"leading-input"}),r("input",{key:"808f4f16b3a73d0b07efa7cff18dd5dd3f94bda4",id:this.inputId,ref:n=>this.inputElement=n,placeholder:this.placeholder,name:this.name,type:"number",autofocus:this.autofocus,required:this.required,max:this.max,min:this.min,step:this.step,value:this.value,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInput}),r("slot",{key:"65a7f356f2a9f650df9e78f53b98b43c7e179802",name:"trailing-input"}),this.error&&r("nv-icon",{key:"5eed73e177092188387abd35ccab6085a1bdb2cf",name:"alert-circle",class:"validation",size:"md"}),this.success&&r("nv-icon",{key:"74edadb953f9668e49a1b3ecd328bfd2999065ea",name:"circle-check",class:"validation",size:"md"}),r("div",{key:"e886fe1df175d5c4dcd9a4704ad47820e0af2474",class:"stepper"},r("nv-iconbutton",{key:"ff6247b57693f2a45c26e1eae67c9d86c473e0e3",size:"md",name:"minus",emphasis:"lower",onClick:this.handleMinus,disabled:this.isMinValueReached(),onMouseDown:this.preventSelection,tabindex:"-1"}),r("nv-iconbutton",{key:"aa12c105d159e08e874bdd37f56ab1837ba01c4f",size:"md",name:"plus",emphasis:"lower",onClick:this.handlePlus,disabled:this.isMaxValueReached(),onMouseDown:this.preventSelection,tabindex:"-1"}))),r("slot",{key:"c485ac2e1ca388b6e0998bdb1c5ca5876cd9e392",name:"after-input"})),(this.description\|\|this.el.querySelector('[slot="description"]'))&&r("div",{key:"88d80f2f5b0061b0f8dab4bcc88bf2d196427800",class:"description"},r("slot",{key:"0380af6af9986d000ad58328e6c4b8250f86c22a",name:"description"},this.description)),(this.errorDescription\|\|this.el.querySelector('[slot="error-description"]'))&&r("div",{key:"a2233d218f58376b6c7958efabe96a3e08c6e1f6",hidden:!this.error,class:"error-description"},r("slot",{key:"d90bc8abdcecc9711b271472a8da60b207aa04af",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{value:["watchValueHandler"]}}};l.style=d;export{l as nv_fieldnumber};
2	+ //# sourceMappingURL=p-23ee0384.entry.js.map

package/dist/native/{p-29f68e07.entry.js.map → p-23ee0384.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["nvFieldnumberCss","NvFieldnumberStyle0","NvFieldnumber","constructor","hostRef","this","inputId","uuidv4","disabled","readonly","required","error","success","step","autofocus","fluid","handleInput","event","input","target","value","valueAsNumber","handleInputContainerClick","inputElement","focus","handlePlus","stepUp","Number","handleMinus","stepDown","preventSelection","preventDefault","isMinValueReached","min","undefined","isMaxValueReached","max","watchValueHandler","newValue","valueChanged","emit","componentWillRender","message","description","validation","errorDescription","render","h","Host","key","label","el","querySelector","htmlFor","name","class","onClick","id","ref","e","placeholder","type","readOnly","onInput","size","emphasis","onMouseDown","tabindex","hidden"],"sources":["src/components/nv-fieldnumber/nv-fieldnumber.scss?tag=nv-fieldnumber","src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldnumber {\n @include form-field-variables();\n @include form-field-root();\n\n &[fluid]:not([fluid=\"false\"]) {\n @include form-field-fluid();\n }\n\n &[readonly]:not([readonly='false']) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error='false']) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success='false']) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required='false']) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n .input-wrapper {\n @include form-field-input-wrapper();\n\n .input-container {\n @include form-field-input-container();\n\n container-type: inline-size;\n container-name: field-number-input-container;\n overflow: hidden;\n position: relative;\n\n input {\n @include form-field-input();\n\n width: 100%;\n appearance: textfield;\n\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n appearance: none;\n margin: 0;\n }\n }\n\n nv-icon.validation {\n @include form-field-icon();\n margin-right: var(--form-field-gap);\n }\n\n > nv-iconbutton {\n @include form-field-action();\n }\n\n .stepper {\n display: flex;\n border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n > nv-iconbutton {\n @include form-field-action();\n border-radius: 0px;\n }\n }\n\n // container query to remove .stepper and and the spacer when the container is less than 150px\n // .. this needs to be an absolute value because container queries do not accept variables\n // .. using relative width (cqw) compared to a parent container would not work\n // .. because the parent container follows the child's width\n @container field-number-input-container (width < 150px) {\n .stepper-spacer {\n display: none;\n }\n\n .stepper {\n display: none;\n }\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}","import {\n Component,\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot trailing-input - Content to be placed after the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n /\n@Component({\n tag: 'nv-fieldnumber',\n styleUrl: 'nv-fieldnumber.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFieldnumber {\n @Element() el: HTMLNvFieldnumberElement;\n private inputElement!: HTMLInputElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the number field.\n * @deprecated Use `description` instead.\n /\n @Prop({ reflect: true })\n readonly message: string;\n\n /\n Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n /\n @Prop({ reflect: true })\n readonly validation: string;\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Lets you define the text that explains what users should enter in the text\n * input field. It’s a crucial element for making forms clear and\n * user-friendly.\n /\n @Prop({ reflect: true })\n readonly label: string;\n\n /\n Add helpful hints or extra information under the text input field. This is\n * where you can clarify what users should enter or provide additional\n * instructions, making the form easier to fill out correctly.\n /\n @Prop({ reflect: true, mutable: true })\n description: string;\n\n /\n Display temporary text inside the input field to give users a hint about\n * what to type. It’s a great way to provide examples or suggestions directly\n * in the field before they start typing.\n /\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /\n Defines the name attribute of the input field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the input’s data in form submissions. It should be\n * unique within the form to avoid conflicts\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n The disabled prop lets you turn off the input field so that users can’t\n * type in it. When disabled, the field is grayed out and won’t respond to#\n * clicks or touches.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Display the input field’s content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won’t be\n * able to type or delete anything.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the input field as required, ensuring that the user must fill it out\n * before submitting the form.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Alters the input field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n /\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /\n Show a helpful message under the input field when there’s a problem. It\n * explains what’s wrong and how users can fix it, making the error easier to\n * understand and resolve.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription: string;\n\n /\n Changes the input field’s appearance to indicate successful input or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n The maximum value that the input field can accept. Use this in combination\n * with min to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly max: number;\n\n /\n The minimum value that the input field can accept. Use this in combination\n * with max to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly min: number;\n\n /\n Define the increment value for the input field. It determines how much the\n * value will increase or decrease when the user clicks the stepper buttons.\n /\n @Prop({ reflect: true })\n readonly step: number = 1;\n\n /\n The value of the input field. It’s the text that users type in or the value\n * that you set programmatically. This is the main way to interact with the\n * input field, and it’s essential for creating forms that users can fill out.\n /\n @Prop({ reflect: true, mutable: true })\n value: number;\n\n /\n Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on an <input>\n * element.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n /\n Allows the field to stretch and fill the entire width of its container.\n /\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the input value changes.\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<number>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('value')\n watchValueHandler(newValue: number) {\n this.valueChanged.emit(newValue);\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region METHODS\n\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.valueAsNumber;\n };\n\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n private handlePlus = () => {\n this.inputElement.stepUp();\n this.value = Number(this.inputElement.value);\n };\n\n private handleMinus = () => {\n this.inputElement.stepDown();\n this.value = Number(this.inputElement.value);\n };\n\n // prevents text selection when clicking the buttons multiple times\n private preventSelection = (event: Event) => {\n event.preventDefault();\n };\n\n private isMinValueReached = (): boolean => {\n return this.min !== undefined && this.value <= this.min;\n };\n\n private isMaxValueReached = (): boolean => {\n return this.max !== undefined && this.value >= this.max;\n };\n\n //#endregion METHODS\n /************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <div class=\"input-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n <slot name=\"leading-input\"></slot>\n\n <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type=\"number\"\n autofocus={this.autofocus}\n required={this.required}\n max={this.max}\n min={this.min}\n step={this.step}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\n />\n\n <slot name=\"trailing-input\"></slot>\n\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n )}\n\n <div class=\"stepper\">\n <nv-iconbutton\n size=\"md\"\n name=\"minus\"\n emphasis=\"lower\"\n onClick={this.handleMinus}\n disabled={this.isMinValueReached()}\n onMouseDown={this.preventSelection}\n tabindex=\"-1\"\n ></nv-iconbutton>\n <nv-iconbutton\n size=\"md\"\n name=\"plus\"\n emphasis=\"lower\"\n onClick={this.handlePlus}\n disabled={this.isMaxValueReached()}\n onMouseDown={this.preventSelection}\n tabindex=\"-1\"\n />\n </div>\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription \|\|\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["nvFieldnumberCss","NvFieldnumberStyle0","NvFieldnumber","constructor","hostRef","this","inputId","uuidv4","disabled","readonly","required","error","success","step","autofocus","fluid","handleInput","event","input","target","value","valueAsNumber","handleInputContainerClick","inputElement","focus","handlePlus","stepUp","Number","handleMinus","stepDown","preventSelection","preventDefault","isMinValueReached","min","undefined","isMaxValueReached","max","watchValueHandler","newValue","valueChanged","emit","componentWillRender","message","description","validation","errorDescription","render","h","Host","key","label","el","querySelector","htmlFor","name","class","onClick","id","ref","e","placeholder","type","readOnly","onInput","size","emphasis","onMouseDown","tabindex","hidden"],"sources":["src/components/nv-fieldnumber/nv-fieldnumber.scss?tag=nv-fieldnumber","src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldnumber {\n @include form-field-variables();\n @include form-field-root();\n\n &[fluid]:not([fluid=\"false\"]) {\n @include form-field-fluid();\n }\n\n &[readonly]:not([readonly='false']) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error='false']) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success='false']) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required='false']) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n .input-wrapper {\n @include form-field-input-wrapper();\n\n .input-container {\n @include form-field-input-container();\n\n container-type: inline-size;\n container-name: field-number-input-container;\n overflow: hidden;\n position: relative;\n\n input {\n @include form-field-input();\n\n width: 100%;\n appearance: textfield;\n\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n appearance: none;\n margin: 0;\n }\n }\n\n nv-icon.validation {\n @include form-field-icon();\n margin-right: var(--form-field-gap);\n }\n\n > nv-iconbutton {\n @include form-field-action();\n }\n\n .stepper {\n display: flex;\n border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n > nv-iconbutton {\n @include form-field-action();\n border-radius: 0px;\n }\n }\n\n // container query to remove .stepper and and the spacer when the container is less than 150px\n // .. this needs to be an absolute value because container queries do not accept variables\n // .. using relative width (cqw) compared to a parent container would not work\n // .. because the parent container follows the child's width\n @container field-number-input-container (width < 150px) {\n .stepper-spacer {\n display: none;\n }\n\n .stepper {\n display: none;\n }\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}","import {\n Component,\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot trailing-input - Content to be placed after the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n /\n@Component({\n tag: 'nv-fieldnumber',\n styleUrl: 'nv-fieldnumber.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFieldnumber {\n @Element() el: HTMLNvFieldnumberElement;\n private inputElement!: HTMLInputElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the number field.\n * @deprecated Use `description` instead.\n /\n @Prop({ reflect: true })\n readonly message: string;\n\n /\n Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n /\n @Prop({ reflect: true })\n readonly validation: string;\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Lets you define the text that explains what users should enter in the text\n * input field. It’s a crucial element for making forms clear and\n * user-friendly.\n /\n @Prop({ reflect: true })\n readonly label: string;\n\n /\n Add helpful hints or extra information under the text input field. This is\n * where you can clarify what users should enter or provide additional\n * instructions, making the form easier to fill out correctly.\n /\n @Prop({ reflect: true, mutable: true })\n description: string;\n\n /\n Display temporary text inside the input field to give users a hint about\n * what to type. It’s a great way to provide examples or suggestions directly\n * in the field before they start typing.\n /\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /\n Defines the name attribute of the input field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the input’s data in form submissions. It should be\n * unique within the form to avoid conflicts\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n The disabled prop lets you turn off the input field so that users can’t\n * type in it. When disabled, the field is grayed out and won’t respond to#\n * clicks or touches.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Display the input field’s content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won’t be\n * able to type or delete anything.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the input field as required, ensuring that the user must fill it out\n * before submitting the form.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Alters the input field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n /\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /\n Show a helpful message under the input field when there’s a problem. It\n * explains what’s wrong and how users can fix it, making the error easier to\n * understand and resolve.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription: string;\n\n /\n Changes the input field’s appearance to indicate successful input or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n The maximum value that the input field can accept. Use this in combination\n * with min to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly max: number;\n\n /\n The minimum value that the input field can accept. Use this in combination\n * with max to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly min: number;\n\n /\n Define the increment value for the input field. It determines how much the\n * value will increase or decrease when the user clicks the stepper buttons.\n /\n @Prop({ reflect: true })\n readonly step: number = 1;\n\n /\n The value of the input field. It’s the text that users type in or the value\n * that you set programmatically. This is the main way to interact with the\n * input field, and it’s essential for creating forms that users can fill out.\n /\n @Prop({ reflect: true, mutable: true })\n value: number;\n\n /\n Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on an <input>\n * element.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n /\n Allows the field to stretch and fill the entire width of its container.\n /\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the input value changes.\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<number>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('value')\n watchValueHandler(newValue: number) {\n this.valueChanged.emit(newValue);\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region METHODS\n\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.valueAsNumber;\n };\n\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n private handlePlus = () => {\n this.inputElement.stepUp();\n this.value = Number(this.inputElement.value);\n };\n\n private handleMinus = () => {\n this.inputElement.stepDown();\n this.value = Number(this.inputElement.value);\n };\n\n // prevents text selection when clicking the buttons multiple times\n private preventSelection = (event: Event) => {\n event.preventDefault();\n };\n\n private isMinValueReached = (): boolean => {\n return this.min !== undefined && this.value <= this.min;\n };\n\n private isMaxValueReached = (): boolean => {\n return this.max !== undefined && this.value >= this.max;\n };\n\n //#endregion METHODS\n /************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <div class=\"input-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n <slot name=\"leading-input\"></slot>\n\n <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type=\"number\"\n autofocus={this.autofocus}\n required={this.required}\n max={this.max}\n min={this.min}\n step={this.step}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\n />\n\n <slot name=\"trailing-input\"></slot>\n\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n )}\n\n <div class=\"stepper\">\n <nv-iconbutton\n size=\"md\"\n name=\"minus\"\n emphasis=\"lower\"\n onClick={this.handleMinus}\n disabled={this.isMinValueReached()}\n onMouseDown={this.preventSelection}\n tabindex=\"-1\"\n ></nv-iconbutton>\n <nv-iconbutton\n size=\"md\"\n name=\"plus\"\n emphasis=\"lower\"\n onClick={this.handlePlus}\n disabled={this.isMaxValueReached()}\n onMouseDown={this.preventSelection}\n tabindex=\"-1\"\n />\n </div>\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription \|\|\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}