npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.17.0 → 3.18.0 - Mend

@nova-design-system/nova-webcomponents 3.17.0 → 3.18.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 (197) hide show

package/dist/components/{p-98429fd7.js.map → p-c981bb48.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~98429fd7~~.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,qoHAAqoH,CAAC;AAC1pH,uBAAe,WAAW;;MCSb,QAAQ;IALrB;;;;;;;;;;QAeW,SAAI,GAAuB,IAAI,CAAC;KA2B1C;;;;;IAZC,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,IAAI,IAAI,QAAQ,IAAI,CAAC,IAAI,EAAE,EAChC,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,CAAC,KAAK,EAAE,CACpC,GACK,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-loader/nv-loader.scss?tag=nv-loader","src/components/nv-loader/nv-loader.tsx"],"sourcesContent":["@use \"sass:map\";\n\n/* Variants /\n$loader-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$loader-color: (\"brand\", \"white\");\n\n/ Define maps for color-related variables /\n$components-loader-background: (\n \"brand\": var(--components-loader-brand-background),\n \"white\": var(--components-loader-white-background)\n);\n\n$components-loader-foreground: (\n \"brand\": var(--components-loader-brand-foreground),\n \"white\": var(--components-loader-white-foreground)\n);\n\n/ Define maps for size-related variables /\n$components-loader-size: (\n \"xs\": var(--loader-size-xs),\n \"sm\": var(--loader-size-sm),\n \"md\": var(--loader-size-md),\n \"lg\": var(--loader-size-lg),\n \"xl\": var(--loader-size-xl)\n);\n\n@mixin root-styles() {\n display: inline-block;\n position: relative;\n aspect-ratio: 1 / 1;\n border-radius: 9999px;\n color: inherit;\n}\n\n@mixin size-styles($size) {\n $loader-size: map.get($components-loader-size, $size);\n $border-size: calc($loader-size / 10);\n\n width: $loader-size;\n height: $loader-size;\n\n &::before,\n &::after {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n }\n\n &::before {\n content: \" \";\n border: $border-size solid;\n opacity: 0.3;\n }\n\n &::after {\n content: \" \";\n border-top: $border-size solid transparent;\n border-left: $border-size solid transparent;\n border-right: $border-size solid transparent;\n border-bottom: $border-size solid;\n animation: rotation 1s linear infinite;\n }\n}\n\n@mixin color-styles($color) {\n &::before {\n border-color: map.get($components-loader-background, $color);\n opacity: 1;\n }\n\n &::after {\n border-bottom-color: map.get($components-loader-foreground, $color);\n }\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\nnv-loader {\n @include root-styles();\n\n @each $size in $loader-sizes {\n &.size-#{$size} {\n @include size-styles($size);\n }\n }\n\n @each $color in $loader-color {\n &.color-#{$color} {\n @include color-styles($color);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes, LoaderColors } from '../../utils/constants';\n\n@Component({\n tag: 'nv-loader',\n styleUrl: 'nv-loader.scss',\n shadow: false,\n})\nexport class NvLoader {\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Choose the size of the loader to best fit your application’s needs, whether\n * it’s a small spinner for subtle loading indicators or a large one for more\n * prominent displays.\n /\n @Prop({ reflect: true })\n readonly size: `${SemanticSizes}` = 'md';\n\n /\n Choose the color of the loader. Options are primary and white to keep the\n * design consistent and ensure the loader stands out or blends in\n * appropriately with your application’s interface.\n /\n @Prop({ reflect: true })\n readonly color: `${LoaderColors}`;\n\n //#endregion PROPERTIES\n /**************************************************************************/\n //#region RENDER\n\n / <slot> empty to force rendering change */\n render() {\n return (\n <Host\n class={clsx(\n this.size && `size-${this.size}`,\n this.color && `color-${this.color}`,\n )}\n ></Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"p-c981bb48.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,qoHAAqoH,CAAC;AAC1pH,uBAAe,WAAW;;MCSb,QAAQ;IALrB;;;;;;;;;;QAeW,SAAI,GAAuB,IAAI,CAAC;KA2B1C;;;;;IAZC,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,IAAI,IAAI,QAAQ,IAAI,CAAC,IAAI,EAAE,EAChC,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,CAAC,KAAK,EAAE,CACpC,GACK,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-loader/nv-loader.scss?tag=nv-loader","src/components/nv-loader/nv-loader.tsx"],"sourcesContent":["@use \"sass:map\";\n\n/* Variants /\n$loader-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$loader-color: (\"brand\", \"white\");\n\n/ Define maps for color-related variables /\n$components-loader-background: (\n \"brand\": var(--components-loader-brand-background),\n \"white\": var(--components-loader-white-background)\n);\n\n$components-loader-foreground: (\n \"brand\": var(--components-loader-brand-foreground),\n \"white\": var(--components-loader-white-foreground)\n);\n\n/ Define maps for size-related variables /\n$components-loader-size: (\n \"xs\": var(--loader-size-xs),\n \"sm\": var(--loader-size-sm),\n \"md\": var(--loader-size-md),\n \"lg\": var(--loader-size-lg),\n \"xl\": var(--loader-size-xl)\n);\n\n@mixin root-styles() {\n display: inline-block;\n position: relative;\n aspect-ratio: 1 / 1;\n border-radius: 9999px;\n color: inherit;\n}\n\n@mixin size-styles($size) {\n $loader-size: map.get($components-loader-size, $size);\n $border-size: calc($loader-size / 10);\n\n width: $loader-size;\n height: $loader-size;\n\n &::before,\n &::after {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n }\n\n &::before {\n content: \" \";\n border: $border-size solid;\n opacity: 0.3;\n }\n\n &::after {\n content: \" \";\n border-top: $border-size solid transparent;\n border-left: $border-size solid transparent;\n border-right: $border-size solid transparent;\n border-bottom: $border-size solid;\n animation: rotation 1s linear infinite;\n }\n}\n\n@mixin color-styles($color) {\n &::before {\n border-color: map.get($components-loader-background, $color);\n opacity: 1;\n }\n\n &::after {\n border-bottom-color: map.get($components-loader-foreground, $color);\n }\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\nnv-loader {\n @include root-styles();\n\n @each $size in $loader-sizes {\n &.size-#{$size} {\n @include size-styles($size);\n }\n }\n\n @each $color in $loader-color {\n &.color-#{$color} {\n @include color-styles($color);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes, LoaderColors } from '../../utils/constants';\n\n@Component({\n tag: 'nv-loader',\n styleUrl: 'nv-loader.scss',\n shadow: false,\n})\nexport class NvLoader {\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Choose the size of the loader to best fit your application’s needs, whether\n * it’s a small spinner for subtle loading indicators or a large one for more\n * prominent displays.\n /\n @Prop({ reflect: true })\n readonly size: `${SemanticSizes}` = 'md';\n\n /\n Choose the color of the loader. Options are primary and white to keep the\n * design consistent and ensure the loader stands out or blends in\n * appropriately with your application’s interface.\n /\n @Prop({ reflect: true })\n readonly color: `${LoaderColors}`;\n\n //#endregion PROPERTIES\n /**************************************************************************/\n //#region RENDER\n\n / <slot> empty to force rendering change */\n render() {\n return (\n <Host\n class={clsx(\n this.size && `size-${this.size}`,\n this.color && `color-${this.color}`,\n )}\n ></Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-0fd23531.js → p-d1b02966.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5829b9f7.js';
-import { d as defineCustomElement$3 } from './p-47d499b4.js';
-import { d as defineCustomElement$2 } from './p-7112612c.js';
-import { d as defineCustomElement$1 } from './p-98429fd7.js';
+import { d as defineCustomElement$3 } from './p-ed43bcec.js';
+import { d as defineCustomElement$2 } from './p-6ca3d847.js';
+import { d as defineCustomElement$1 } from './p-c981bb48.js';
 import { v as v4 } from './p-f5ff676c.js';
 const nvFieldnumberCss = "/* 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}";
@@ -181,4 +181,4 @@ defineCustomElement();
 export { NvFieldnumber as N, defineCustomElement as d };
-//# sourceMappingURL=p-0fd23531.js.map
+//# sourceMappingURL=p-d1b02966.js.map

package/dist/components/{p-0fd23531.js.map → p-d1b02966.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-0fd23531.js","mappings":"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","names":["uuidv4"],"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"],"version":3}
1	+ {"file":"p-d1b02966.js","mappings":"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","names":["uuidv4"],"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"],"version":3}

package/dist/components/{p-6f2b257e.js → p-ea45f1ab.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5829b9f7.js';
-import { d as defineCustomElement$1 } from './p-63595ea1.js';
+import { d as defineCustomElement$1 } from './p-ebfecbaa.js';
 const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip nv-popover>[data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip nv-popover>[data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
 const NvTooltipStyle0 = nvTooltipCss;
@@ -44,7 +44,7 @@ const NvTooltip = /*@__PURE__*/ proxyCustomElement(class NvTooltip extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '5d5facbf2a0487bda4fbae49913a2cb4f69dcf5a' }, h("slot", { key: '91080d347f3473879109f7b0b59b159f5bb5979b' }), h("nv-popover", { key: '876e5e2487d1b2b5182e42909a6edeab5b3e9db2', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: 'e30ce16ed27e41dee7359fb44ccba7a780e72d37', slot: "content" }, this.message), h("slot", { key: '395c75d7f45bab9aaebf979bd75087058b979350', name: "content" }))));
+        return (h(Host, { key: 'bbf9407ca59c3e6122cbdc7c9e3aefe56b64311d' }, h("slot", { key: 'b13ae1307843e66cd018ce204c94147b53a26649' }), h("nv-popover", { key: '12d9bdca8d68eff93f6aa80304535df3be127c32', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: '6f4e64e97cc644f9da030e30b1069150c47c2985', slot: "content" }, this.message), h("slot", { key: '2b55d3b0c1279ce0a8bf165be1b26fe854e91d47', name: "content" }))));
     }
     get el() { return this; }
     static get style() { return NvTooltipStyle0; }
@@ -77,4 +77,4 @@ defineCustomElement();
 export { NvTooltip as N, defineCustomElement as d };
-//# sourceMappingURL=p-6f2b257e.js.map
+//# sourceMappingURL=p-ea45f1ab.js.map

package/dist/components/{p-6f2b257e.js.map → p-ea45f1ab.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~6f2b257e~~.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,4yBAA4yB,CAAC;AACl0B,wBAAe,YAAY;;MCmBd,SAAS;IALtB;;;;;;;;;QAiCW,cAAS,GAAc,QAAQ,CAAC;;;;;;QAQhC,eAAU,GAAW,CAAC,CAAC;;;;;;;;;QAWvB,aAAQ,GAAa,UAAU,CAAC;KAkD1C;;;;IAjCC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;YACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;aAC5C,CAAC,CAAC;KACN;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,EAEb,mEACE,WAAW,EAAC,OAAO,EACnB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3B,0DAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-tooltip/nv-tooltip.scss?tag=nv-tooltip","src/components/nv-tooltip/nv-tooltip.tsx"],"sourcesContent":["@mixin root-styles() {\n display: inline-block;\n position: relative;\n user-select: none;\n &:has([fluid]:not([fluid='false'])) {\n display: block;\n }\n}\n\n@mixin tooltip-styles() {\n background: var(--components-tooltip-background);\n color: var(--components-tooltip-text);\n font-weight: var(--font-weight-medium-emphasis);\n padding: var(--tooltip-padding-y) var(--tooltip-padding-x);\n font-size: var(--tooltip-font-size);\n border-radius: var(--tooltip-radius);\n border: none;\n box-shadow:\n 0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1)\n var(--shadow-spread-lg-1) var(--shadow-color-opacity-1),\n 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2)\n var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);\n}\n\n@mixin arrow-styles() {\n background: var(--components-tooltip-background);\n box-shadow: none;\n border: none;\n}\n\nnv-tooltip {\n @include root-styles();\n\n nv-popover > [data-scope='popover'] {\n @include tooltip-styles();\n\n [data-scope='arrow'] {\n @include arrow-styles();\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport type { Placement, Strategy } from '@floating-ui/dom';\n\n/*\n @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n /\n@Component({\n tag: 'nv-tooltip',\n styleUrl: 'nv-tooltip.scss',\n shadow: false,\n})\nexport class NvTooltip {\n @Element() el: HTMLNvTooltipElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * @internal\n * Accepts a reference to the DOM element acting as the popover trigger. This\n * should be used when the slot for the trigger is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n triggerElement: Element;\n\n /\n A string representing the text to be displayed inside the tooltip. This\n * content is shown when the tooltip is activated by the user, such as on\n * hover or focus events.\n /\n @Prop({ reflect: true })\n readonly message: string;\n\n /\n Decides where the tooltip shows up next to the element it’s linked to\n * (above, below, to the sides). If there isn’t enough room, it will adjust\n * it's position on the axis to fit on the screen, so users can always see it.\n /\n @Prop({ reflect: true })\n readonly placement: Placement = 'bottom';\n\n /\n Controls how long (in milliseconds) the tooltip waits to show after you\n * hover over or focus on an element. If you move away before the delay is up,\n * the tooltip won't appear.\n /\n @Prop({ reflect: true })\n readonly enterDelay: number = 0;\n\n /\n Sets the positioning strategy for the tooltip. Options include:\n * - `absolute`: Positions the tooltip relative to the trigger element\n * (default).\n * - `fixed`: Positions the tooltip relative to the viewport, useful when you\n * need the tooltip to break out of overflow hidden containers, it will not\n * scroll inside a scroll container due to the fixed positioning.\n /\n @Prop({ reflect: true })\n readonly strategy: Strategy = 'absolute';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the tooltip is opened or closed. Bubbles up from the popover\n * element.\n /\n @Event()\n openChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (!this.triggerElement)\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === null;\n });\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot></slot>\n\n <nv-popover\n triggerMode=\"hover\"\n hasArrow\n placement={this.placement}\n strategy={this.strategy}\n triggerElement={this.triggerElement}\n groupName={'tooltip'}\n enterDelay={this.enterDelay}\n >\n <p slot=\"content\">{this.message}</p>\n <slot name=\"content\"></slot>\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"p-ea45f1ab.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,4yBAA4yB,CAAC;AACl0B,wBAAe,YAAY;;MCmBd,SAAS;IALtB;;;;;;;;;QAiCW,cAAS,GAAc,QAAQ,CAAC;;;;;;QAQhC,eAAU,GAAW,CAAC,CAAC;;;;;;;;;QAWvB,aAAQ,GAAa,UAAU,CAAC;KAkD1C;;;;IAjCC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;YACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;aAC5C,CAAC,CAAC;KACN;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,EAEb,mEACE,WAAW,EAAC,OAAO,EACnB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3B,0DAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-tooltip/nv-tooltip.scss?tag=nv-tooltip","src/components/nv-tooltip/nv-tooltip.tsx"],"sourcesContent":["@mixin root-styles() {\n display: inline-block;\n position: relative;\n user-select: none;\n &:has([fluid]:not([fluid='false'])) {\n display: block;\n }\n}\n\n@mixin tooltip-styles() {\n background: var(--components-tooltip-background);\n color: var(--components-tooltip-text);\n font-weight: var(--font-weight-medium-emphasis);\n padding: var(--tooltip-padding-y) var(--tooltip-padding-x);\n font-size: var(--tooltip-font-size);\n border-radius: var(--tooltip-radius);\n border: none;\n box-shadow:\n 0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1)\n var(--shadow-spread-lg-1) var(--shadow-color-opacity-1),\n 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2)\n var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);\n}\n\n@mixin arrow-styles() {\n background: var(--components-tooltip-background);\n box-shadow: none;\n border: none;\n}\n\nnv-tooltip {\n @include root-styles();\n\n nv-popover > [data-scope='popover'] {\n @include tooltip-styles();\n\n [data-scope='arrow'] {\n @include arrow-styles();\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport type { Placement, Strategy } from '@floating-ui/dom';\n\n/*\n @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n /\n@Component({\n tag: 'nv-tooltip',\n styleUrl: 'nv-tooltip.scss',\n shadow: false,\n})\nexport class NvTooltip {\n @Element() el: HTMLNvTooltipElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * @internal\n * Accepts a reference to the DOM element acting as the popover trigger. This\n * should be used when the slot for the trigger is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n triggerElement: Element;\n\n /\n A string representing the text to be displayed inside the tooltip. This\n * content is shown when the tooltip is activated by the user, such as on\n * hover or focus events.\n /\n @Prop({ reflect: true })\n readonly message: string;\n\n /\n Decides where the tooltip shows up next to the element it’s linked to\n * (above, below, to the sides). If there isn’t enough room, it will adjust\n * it's position on the axis to fit on the screen, so users can always see it.\n /\n @Prop({ reflect: true })\n readonly placement: Placement = 'bottom';\n\n /\n Controls how long (in milliseconds) the tooltip waits to show after you\n * hover over or focus on an element. If you move away before the delay is up,\n * the tooltip won't appear.\n /\n @Prop({ reflect: true })\n readonly enterDelay: number = 0;\n\n /\n Sets the positioning strategy for the tooltip. Options include:\n * - `absolute`: Positions the tooltip relative to the trigger element\n * (default).\n * - `fixed`: Positions the tooltip relative to the viewport, useful when you\n * need the tooltip to break out of overflow hidden containers, it will not\n * scroll inside a scroll container due to the fixed positioning.\n /\n @Prop({ reflect: true })\n readonly strategy: Strategy = 'absolute';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the tooltip is opened or closed. Bubbles up from the popover\n * element.\n /\n @Event()\n openChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (!this.triggerElement)\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === null;\n });\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot></slot>\n\n <nv-popover\n triggerMode=\"hover\"\n hasArrow\n placement={this.placement}\n strategy={this.strategy}\n triggerElement={this.triggerElement}\n groupName={'tooltip'}\n enterDelay={this.enterDelay}\n >\n <p slot=\"content\">{this.message}</p>\n <slot name=\"content\"></slot>\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-63595ea1.js → p-ebfecbaa.js} RENAMED Viewed

@@ -2387,7 +2387,7 @@ const NvPopover = /*@__PURE__*/ proxyCustomElement(class NvPopover extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '0644e319053ca1f216aac89f5737805008b097be' }, h("slot", { key: '7f03080c300378be09e6fce9a44fa2a4a8730f40', name: "trigger" }), h("div", { key: '801b7f1dd8c87db5eb06bcabddda8936c89a6ab2', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'd8e40589a4c53d4ac0c313f3d97cf61ef928f56d', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: 'af0743b1a94c44dd161712e080dbf54a69c9d4a4', name: "content" }))));
+        return (h(Host, { key: '8fdb18b1233e2f988d16b85927bbf5b1f7f47630' }, h("slot", { key: '3dfc19787da335fa0e6b38fe2aebfa1a9df04ea8', name: "trigger" }), h("div", { key: 'd529ca4a2efb62d6bfab679d85acbfb8002e1442', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'bb187c48e62a9653af8649c1a0670534499f6060', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: 'b60efb50e864ac0f530fcb7b9fc52c53924f29b1', name: "content" }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -2432,4 +2432,4 @@ defineCustomElement();
 export { NvPopover as N, defineCustomElement as d };
-//# sourceMappingURL=p-63595ea1.js.map
+//# sourceMappingURL=p-ebfecbaa.js.map