npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.9.0 → 3.10.0 - Mend

@nova-design-system/nova-webcomponents 3.9.0 → 3.10.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 (444) hide show

package/dist/components/nv-alert.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
 import { c as clsx } from './p-8a1a6e56.js';
-import { F as FeedbackColors } from './p-1f505531.js';
+import { F as FeedbackColors } from './p-a3ddec4c.js';
 import { u as useCollapse } from './p-9a263d0e.js';
 import { u as useFade } from './p-1cbacdba.js';
 import './p-09cdd71f.js';
 import { t as timeline } from './p-15aeab4d.js';
-import { d as defineCustomElement$2 } from './p-6460318d.js';
+import { d as defineCustomElement$2 } from './p-a1fe0a5d.js';
-const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
+const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
 const NvAlertStyle0 = nvAlertCss;
 const NvAlert$1 = /*@__PURE__*/ proxyCustomElement(class NvAlert extends H {

package/dist/components/nv-alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-alert.js","mappings":"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","names":["NvAlert"],"sources":["src/components/nv-alert/nv-alert.scss?tag=nv-alert","src/components/nv-alert/nv-alert.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants /\n$alert-feedback: (\"information\", \"warning\", \"error\", \"success\", \"neutral\");\n\n/ Define maps for feedback-related variables /\n$components-alert-background: (\n \"information\": var(--components-alert-information-background),\n \"warning\": var(--components-alert-warning-background),\n \"error\": var(--components-alert-error-background),\n \"success\": var(--components-alert-success-background),\n \"neutral\": var(--components-alert-neutral-background)\n);\n\n$components-alert-border: (\n \"information\": var(--components-alert-information-border),\n \"warning\": var(--components-alert-warning-border),\n \"error\": var(--components-alert-error-border),\n \"success\": var(--components-alert-success-border),\n \"neutral\": var(--components-alert-neutral-border)\n);\n\n$components-alert-icon: (\n \"information\": var(--components-alert-information-icon),\n \"warning\": var(--components-alert-warning-icon),\n \"error\": var(--components-alert-error-icon),\n \"success\": var(--components-alert-success-icon),\n \"neutral\": var(--components-alert-neutral-icon)\n);\n\n@mixin root-styles() {\n display: flex !important; // override the display: none in [hidden] css\n align-items: flex-start;\n position: relative;\n gap: var(--alert-gap-x);\n border-radius: var(--alert-radius);\n font-family: \"TT Norms Pro\", \"Montserrat\", sans-serif;\n}\n\n@mixin content-styles() {\n display: flex;\n padding: var(--alert-padding);\n padding-left: 0;\n flex-direction: column;\n gap: var(--alert-gap-y);\n}\n\n@mixin feedback-color($feedback-type) {\n background-color: map.get($components-alert-background, $feedback-type);\n border: 1px solid map.get($components-alert-border, $feedback-type) !important;\n}\n\n@mixin icon-color($feedback-type) {\n color: map.get($components-alert-icon, $feedback-type);\n}\n\n@mixin icon-position {\n margin-left: var(--alert-icon-position-x);\n margin-top: var(--alert-icon-position-y);\n}\n\nnv-alert {\n @include root-styles();\n\n & > nv-icon {\n @include icon-position();\n }\n\n &.hidden {\n display: none!important;\n }\n\n @each $feedback in $alert-feedback {\n &.feedback-#{$feedback} {\n @include feedback-color($feedback);\n & > .close {\n @include focus-ring(map.get($components-alert-border, $feedback));\n }\n }\n }\n\n @each $feedback in $alert-feedback {\n & > nv-icon.icon-#{$feedback} {\n @include icon-color($feedback);\n }\n }\n\n & > .content {\n @include content-styles();\n\n & > .heading {\n color: var(--components-alert-content-title);\n font-size: var(--alert-heading-font-size);\n line-height: var(--alert-heading-line-height);\n font-weight: var(--alert-heading-font-weight);\n }\n & > .message {\n color: var(--components-alert-content-description);\n font-size: var(--alert-message-font-size);\n line-height: var(--alert-message-line-height);\n }\n }\n & > .close {\n border-radius: var(--alert-radius);\n position: absolute;\n display: flex;\n top: var(--alert-icon-position-y);\n right: var(--alert-icon-position-x);\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n DeprecatedSemanticColors,\n FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\n\n/\n @slot default - Use this slot to insert HTML into the alert content.\n /\n@Component({\n tag: 'nv-alert',\n styleUrl: 'nv-alert.scss',\n shadow: false,\n})\nexport class NvAlert {\n @Element() ref: HTMLNvAlertElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Defines color of the alert.\n * @deprecated use feedback instead.\n /\n @Prop({ reflect: true })\n readonly color: `${DeprecatedSemanticColors}`;\n\n componentWillRender() {\n if (this.color) {\n switch (this.color) {\n case 'primary' as DeprecatedSemanticColors:\n this.feedback = 'warning' as FeedbackColors;\n break;\n case 'secondary' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n case 'neutral' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n default:\n this.feedback = this.color as FeedbackColors;\n }\n }\n }\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Specifies the alert type which determines the color and default icon.\n /\n @Prop({ reflect: true, mutable: true })\n feedback: `${FeedbackColors}` = 'information';\n\n /\n Main content of the alert. For more complex content, use the default slot\n * instead.\n /\n @Prop({ reflect: true })\n readonly message: string;\n\n /\n Short and concise text for the alert title.\n /\n @Prop({ reflect: true })\n readonly heading: string;\n\n /\n Icon associated with the alert, defaults vary based on the feedback type.\n /\n @Prop({ reflect: true })\n readonly icon: string;\n\n /\n Allows the alert to be dismissed via a close button (x). The alert is not\n * dismissible unless explicitly enabled.\n /\n @Prop({ reflect: true })\n readonly dismissible: boolean = false;\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 Controls the visibility of the alert. 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\n /\n When true, the alert will not animate when it is hidden or shown.\n /\n @Prop({ reflect: true })\n readonly hasNoAnimations: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n * @bind hidden\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 /\n Emitted when the close button is clicked.\n /\n @Event()\n closeClicked: EventEmitter<void>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Used for 2 way binding with the hidden property.\n * Triggers open and close animations.\n * @param {boolean} hidden - The visibility state of the alert.\n /\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n\n await this.updateVisibility(hidden);\n this.hiddenChangedComplete.emit(hidden);\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the dismissal of the alert, considering the preventAutoClose prop.\n * Passes the original event from the close button to the close event detail.\n * @param {MouseEvent} originalEvent - The original event from the close button.\n /\n private handleDismiss = () => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit();\n };\n\n /\n By default an icon is linked to the feedback type\n * @returns {string} - The default icon name.\n /\n private getDefaultIcon = () => {\n switch (this.feedback) {\n case FeedbackColors.Warning:\n return 'alert-circle';\n case FeedbackColors.Information:\n return 'info-circle';\n case FeedbackColors.Success:\n return 'circle-check';\n case FeedbackColors.Error:\n return 'alert-circle';\n case FeedbackColors.Neutral:\n return 'help';\n default:\n return 'info-circle';\n }\n };\n\n /\n Updates the visibility state of the alert with optional animations\n * @param {boolean} hidden - Whether the alert should be hidden\n /\n private async updateVisibility(hidden: boolean) {\n if (this.hasNoAnimations) {\n this.toggleHiddenClass(hidden);\n return;\n }\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden) {\n await timeline(fadeOut, collapse).start();\n this.toggleHiddenClass(true);\n } else {\n this.toggleHiddenClass(false);\n await timeline(expand, fadeIn).start();\n }\n }\n\n /\n Toggles the 'hidden' class on the element\n * @param {boolean} hidden - Whether to add or remove the hidden class\n /\n private toggleHiddenClass(hidden: boolean) {\n this.ref.classList.toggle('hidden', hidden);\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.color) {\n switch (this.color) {\n case 'primary' as DeprecatedSemanticColors:\n this.feedback = 'warning' as FeedbackColors;\n break;\n case 'secondary' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n case 'neutral' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n default:\n this.feedback = this.color as FeedbackColors;\n }\n }\n\n if (this.hidden) {\n this.ref.classList.add('hidden');\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n <nv-icon\n name={this.icon ?? this.getDefaultIcon()}\n class={`icon-${this.feedback}`}\n size=\"md\"\n ></nv-icon>\n\n <div class=\"content\">\n {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n {this.message && <p class=\"message\">{this.message}</p>}\n\n <slot></slot>\n </div>\n\n {this.dismissible && (\n <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-alert.js","mappings":"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","names":["NvAlert"],"sources":["src/components/nv-alert/nv-alert.scss?tag=nv-alert","src/components/nv-alert/nv-alert.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants /\n$alert-feedback: (\"information\", \"warning\", \"error\", \"success\", \"neutral\");\n\n/ Define maps for feedback-related variables /\n$components-alert-background: (\n \"information\": var(--components-alert-information-background),\n \"warning\": var(--components-alert-warning-background),\n \"error\": var(--components-alert-error-background),\n \"success\": var(--components-alert-success-background),\n \"neutral\": var(--components-alert-neutral-background)\n);\n\n$components-alert-border: (\n \"information\": var(--components-alert-information-border),\n \"warning\": var(--components-alert-warning-border),\n \"error\": var(--components-alert-error-border),\n \"success\": var(--components-alert-success-border),\n \"neutral\": var(--components-alert-neutral-border)\n);\n\n$components-alert-icon: (\n \"information\": var(--components-alert-information-icon),\n \"warning\": var(--components-alert-warning-icon),\n \"error\": var(--components-alert-error-icon),\n \"success\": var(--components-alert-success-icon),\n \"neutral\": var(--components-alert-neutral-icon)\n);\n\n@mixin root-styles() {\n display: flex !important; // override the display: none in [hidden] css\n align-items: flex-start;\n position: relative;\n gap: var(--alert-gap-x);\n border-radius: var(--alert-radius);\n font-family: \"TT Norms Pro\", \"Montserrat\", sans-serif;\n}\n\n@mixin content-styles() {\n display: flex;\n padding: var(--alert-padding);\n padding-left: 0;\n flex-direction: column;\n gap: var(--alert-gap-y);\n}\n\n@mixin feedback-color($feedback-type) {\n background-color: map.get($components-alert-background, $feedback-type);\n border: 1px solid map.get($components-alert-border, $feedback-type) !important;\n}\n\n@mixin icon-color($feedback-type) {\n color: map.get($components-alert-icon, $feedback-type);\n}\n\n@mixin icon-position {\n margin-left: var(--alert-icon-position-x);\n margin-top: var(--alert-icon-position-y);\n}\n\nnv-alert {\n @include root-styles();\n\n & > nv-icon {\n @include icon-position();\n }\n\n &.hidden {\n display: none!important;\n }\n\n @each $feedback in $alert-feedback {\n &.feedback-#{$feedback} {\n @include feedback-color($feedback);\n & > .close {\n @include focus-ring(map.get($components-alert-border, $feedback));\n }\n }\n }\n\n @each $feedback in $alert-feedback {\n & > nv-icon.icon-#{$feedback} {\n @include icon-color($feedback);\n }\n }\n\n & > .content {\n @include content-styles();\n\n & > .heading {\n color: var(--components-alert-content-title);\n font-size: var(--alert-heading-font-size);\n line-height: var(--alert-heading-line-height);\n font-weight: var(--alert-heading-font-weight);\n }\n & > .message {\n color: var(--components-alert-content-description);\n font-size: var(--alert-message-font-size);\n line-height: var(--alert-message-line-height);\n }\n }\n & > .close {\n border-radius: var(--alert-radius);\n position: absolute;\n display: flex;\n top: var(--alert-icon-position-y);\n right: var(--alert-icon-position-x);\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n DeprecatedSemanticColors,\n FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\n\n/\n @slot default - Use this slot to insert HTML into the alert content.\n /\n@Component({\n tag: 'nv-alert',\n styleUrl: 'nv-alert.scss',\n shadow: false,\n})\nexport class NvAlert {\n @Element() ref: HTMLNvAlertElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Defines color of the alert.\n * @deprecated use feedback instead.\n /\n @Prop({ reflect: true })\n readonly color: `${DeprecatedSemanticColors}`;\n\n componentWillRender() {\n if (this.color) {\n switch (this.color) {\n case 'primary' as DeprecatedSemanticColors:\n this.feedback = 'warning' as FeedbackColors;\n break;\n case 'secondary' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n case 'neutral' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n default:\n this.feedback = this.color as FeedbackColors;\n }\n }\n }\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Specifies the alert type which determines the color and default icon.\n /\n @Prop({ reflect: true, mutable: true })\n feedback: `${FeedbackColors}` = 'information';\n\n /\n Main content of the alert. For more complex content, use the default slot\n * instead.\n /\n @Prop({ reflect: true })\n readonly message: string;\n\n /\n Short and concise text for the alert title.\n /\n @Prop({ reflect: true })\n readonly heading: string;\n\n /\n Icon associated with the alert, defaults vary based on the feedback type.\n /\n @Prop({ reflect: true })\n readonly icon: string;\n\n /\n Allows the alert to be dismissed via a close button (x). The alert is not\n * dismissible unless explicitly enabled.\n /\n @Prop({ reflect: true })\n readonly dismissible: boolean = false;\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 Controls the visibility of the alert. 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\n /\n When true, the alert will not animate when it is hidden or shown.\n /\n @Prop({ reflect: true })\n readonly hasNoAnimations: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n * @bind hidden\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 /\n Emitted when the close button is clicked.\n /\n @Event()\n closeClicked: EventEmitter<void>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Used for 2 way binding with the hidden property.\n * Triggers open and close animations.\n * @param {boolean} hidden - The visibility state of the alert.\n /\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n\n await this.updateVisibility(hidden);\n this.hiddenChangedComplete.emit(hidden);\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the dismissal of the alert, considering the preventAutoClose prop.\n * Passes the original event from the close button to the close event detail.\n * @param {MouseEvent} originalEvent - The original event from the close button.\n /\n private handleDismiss = () => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit();\n };\n\n /\n By default an icon is linked to the feedback type\n * @returns {string} - The default icon name.\n /\n private getDefaultIcon = () => {\n switch (this.feedback) {\n case FeedbackColors.Warning:\n return 'alert-circle';\n case FeedbackColors.Information:\n return 'info-circle';\n case FeedbackColors.Success:\n return 'circle-check';\n case FeedbackColors.Error:\n return 'alert-circle';\n case FeedbackColors.Neutral:\n return 'help';\n default:\n return 'info-circle';\n }\n };\n\n /\n Updates the visibility state of the alert with optional animations\n * @param {boolean} hidden - Whether the alert should be hidden\n /\n private async updateVisibility(hidden: boolean) {\n if (this.hasNoAnimations) {\n this.toggleHiddenClass(hidden);\n return;\n }\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden) {\n await timeline(fadeOut, collapse).start();\n this.toggleHiddenClass(true);\n } else {\n this.toggleHiddenClass(false);\n await timeline(expand, fadeIn).start();\n }\n }\n\n /\n Toggles the 'hidden' class on the element\n * @param {boolean} hidden - Whether to add or remove the hidden class\n /\n private toggleHiddenClass(hidden: boolean) {\n this.ref.classList.toggle('hidden', hidden);\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.color) {\n switch (this.color) {\n case 'primary' as DeprecatedSemanticColors:\n this.feedback = 'warning' as FeedbackColors;\n break;\n case 'secondary' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n case 'neutral' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n default:\n this.feedback = this.color as FeedbackColors;\n }\n }\n\n if (this.hidden) {\n this.ref.classList.add('hidden');\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n <nv-icon\n name={this.icon ?? this.getDefaultIcon()}\n class={`icon-${this.feedback}`}\n size=\"md\"\n ></nv-icon>\n\n <div class=\"content\">\n {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n {this.message && <p class=\"message\">{this.message}</p>}\n\n <slot></slot>\n </div>\n\n {this.dismissible && (\n <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-avatar.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-aff3ed68.js';
 import { c as clsx } from './p-8a1a6e56.js';
-import { S as SemanticSizes } from './p-1f505531.js';
-import { d as defineCustomElement$2 } from './p-6460318d.js';
+import { S as SemanticSizes } from './p-a3ddec4c.js';
+import { d as defineCustomElement$2 } from './p-a1fe0a5d.js';
 const nvAvatarCss = "nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
 const NvAvatarStyle0 = nvAvatarCss;

package/dist/components/nv-badge.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NvBadge$1, d as defineCustomElement$1 } from './p-60064345.js';
+import { N as NvBadge$1, d as defineCustomElement$1 } from './p-8011513c.js';
 const NvBadge = NvBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-breadcrumb.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, f as forceUpdate, h, d as Host } from './p-aff3ed68.js';
 import { c as clsx } from './p-8a1a6e56.js';
-import { d as defineCustomElement$3 } from './p-8067d283.js';
-import { d as defineCustomElement$2 } from './p-ba87d9d5.js';
+import { d as defineCustomElement$3 } from './p-195f46f3.js';
+import { d as defineCustomElement$2 } from './p-2ef4fb88.js';
-const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb.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-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
+const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb.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-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3);z-index:111}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3);z-index:111}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
 const NvBreadcrumbStyle0 = nvBreadcrumbCss;
 const NvBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NvBreadcrumb extends H {

package/dist/components/nv-breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-breadcrumb.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,~~6+DAA6+D~~,CAAC;~~AACtgE~~,2BAAe,eAAe;;MCUjBA,cAAY;IALzB;;;;;;;;;;QAkBW,SAAI,GAA4B,SAAS,CAAC;KAyEpD;;;;IArDC,gBAAgB;;QAEd,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAClD;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAC3C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CACrD,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAC7C,CAAC;SACH;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,SAAS,EACnD,KAAK,EAAE,IAAI,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,IAE/C,IAAI,CAAC,IAAI,KAAK,WAAW,IACxB,cAAQ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,UAAc,KAE3D,eAAa,CACd,EACA,IAAI,CAAC,OAAO,KACX,mEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAC,KAAK,GACH,CACf,EACA,IAAI,CAAC,IAAI,KAAK,WAAW,KACxB,mEACE,WAAW,EAAC,OAAO,EACnB,SAAS,EAAC,aAAa,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,IAEnC,2DAAI,IAAI,EAAC,SAAS,IAChB,8DAAa,CACV,CACM,CACd,EACD,2EAAiB,WAAW,QAAS,CAChC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvBreadcrumb"],"sources":["src/components/nv-breadcrumb/nv-breadcrumb.scss?tag=nv-breadcrumb","src/components/nv-breadcrumb/nv-breadcrumb.tsx"],"sourcesContent":["@use \"../../styles/focus-ring\" as focus;\n@use \"../../styles/utils\" as utils;\n\n@mixin root-styles() {\n display: flex;\n align-items: center;\n color: var(--components-breadcrumb-text);\n font-size: var(--font-size-sm);\n font-style: normal;\n font-weight: 500;\n line-height: var(--line-height-sm);\n}\n\n@mixin link-styles() {\n display: inline-flex;\n align-self: center;\n color: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n line-height: inherit;\n text-decoration: none;\n @include focus.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n &:hover {\n text-decoration: underline;\n color: var(--components-breadcrumb-text-hover);\n }\n}\n\n@mixin button-styles() {\n height: 20px;\n @include focus.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n &:hover {\n text-decoration: underline;\n color: var(--components-breadcrumb-text-hover);\n }\n}\n\n@mixin separator-styles() {\n display: inline-flex;\n padding-left: var(--breadcrumb-padding-y);\n}\n\n@mixin list-styles() {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-1-5);\n padding: var(--spacing-1);\n\n a,\n button {\n @include link-styles();\n }\n}\n\nnv-breadcrumb {\n @include root-styles();\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n\n ul {\n @include list-styles();\n }\n & > a,\n & > button {\n @include link-styles();\n }\n span[data-scope=\"separator\"] {\n @include separator-styles();\n }\n}\n","import { Component, Prop, Host, h, Element, forceUpdate } from '@stencil/core';\nimport clsx from 'clsx';\n\n/*\n @slot default - Pass an icon, a link, or text to render the breadcrumb content.\n /\n@Component({\n tag: 'nv-breadcrumb',\n styleUrl: 'nv-breadcrumb.scss',\n shadow: false,\n})\nexport class NvBreadcrumb {\n @Element() el: HTMLNvBreadcrumbElement;\n private popoverTrigger!: Element;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs\n * in a dropdown. Use default for a single item. When passing multiple items\n * as collapsed, make sure to wrap you links in list tags\n /\n @Prop({ reflect: true })\n readonly type: 'collapsed' \| 'default' = 'default';\n\n /\n Add an optional tooltip to provide extra information about the breadcrumb.\n /\n @Prop({ reflect: true })\n readonly tooltip: string;\n\n /\n Use this to highlight the breadcrumb as the current page in your\n * navigation. It also makes the page clearer to screen readers with\n * aria-current=\"location\".\n /\n @Prop({ reflect: true })\n readonly current: boolean;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentDidLoad() {\n // Force a re-render to pass the popoverTrigger ref to the popovers\n if (this.type === 'collapsed') forceUpdate(this);\n }\n\n componentWillLoad() {\n if (this.type === 'default' && this.tooltip) {\n this.popoverTrigger = Array.from(this.el.children).find(\n child => child.getAttribute('slot') === null,\n );\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n role=\"listitem\"\n aria-current={this.current ? 'location' : undefined}\n class={clsx({ 'visually-hidden': this.current })}\n >\n {this.type === 'collapsed' ? (\n <button ref={el => (this.popoverTrigger = el)}>...</button>\n ) : (\n <slot></slot>\n )}\n {this.tooltip && (\n <nv-tooltip\n message={this.tooltip}\n triggerElement={this.popoverTrigger}\n placement=\"top\"\n ></nv-tooltip>\n )}\n {this.type === 'collapsed' && (\n <nv-popover\n triggerMode=\"click\"\n groupName=\"breadcrumbs\"\n triggerElement={this.popoverTrigger}\n >\n <ul slot=\"content\">\n <slot></slot>\n </ul>\n </nv-popover>\n )}\n <span data-scope=\"separator\">/</span>\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-breadcrumb.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,qgEAAqgE,CAAC;AAC9hE,2BAAe,eAAe;;MCUjBA,cAAY;IALzB;;;;;;;;;;QAkBW,SAAI,GAA4B,SAAS,CAAC;KAyEpD;;;;IArDC,gBAAgB;;QAEd,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAClD;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAC3C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CACrD,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAC7C,CAAC;SACH;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,SAAS,EACnD,KAAK,EAAE,IAAI,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,IAE/C,IAAI,CAAC,IAAI,KAAK,WAAW,IACxB,cAAQ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,UAAc,KAE3D,eAAa,CACd,EACA,IAAI,CAAC,OAAO,KACX,mEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAC,KAAK,GACH,CACf,EACA,IAAI,CAAC,IAAI,KAAK,WAAW,KACxB,mEACE,WAAW,EAAC,OAAO,EACnB,SAAS,EAAC,aAAa,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,IAEnC,2DAAI,IAAI,EAAC,SAAS,IAChB,8DAAa,CACV,CACM,CACd,EACD,2EAAiB,WAAW,QAAS,CAChC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvBreadcrumb"],"sources":["src/components/nv-breadcrumb/nv-breadcrumb.scss?tag=nv-breadcrumb","src/components/nv-breadcrumb/nv-breadcrumb.tsx"],"sourcesContent":["@use \"../../styles/focus-ring\" as focus;\n@use \"../../styles/utils\" as utils;\n\n@mixin root-styles() {\n display: flex;\n align-items: center;\n color: var(--components-breadcrumb-text);\n font-size: var(--font-size-sm);\n font-style: normal;\n font-weight: 500;\n line-height: var(--line-height-sm);\n}\n\n@mixin link-styles() {\n display: inline-flex;\n align-self: center;\n color: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n line-height: inherit;\n text-decoration: none;\n @include focus.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n &:hover {\n text-decoration: underline;\n color: var(--components-breadcrumb-text-hover);\n }\n}\n\n@mixin button-styles() {\n height: 20px;\n @include focus.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n &:hover {\n text-decoration: underline;\n color: var(--components-breadcrumb-text-hover);\n }\n}\n\n@mixin separator-styles() {\n display: inline-flex;\n padding-left: var(--breadcrumb-padding-y);\n}\n\n@mixin list-styles() {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-1-5);\n padding: var(--spacing-1);\n\n a,\n button {\n @include link-styles();\n }\n}\n\nnv-breadcrumb {\n @include root-styles();\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n\n ul {\n @include list-styles();\n }\n & > a,\n & > button {\n @include link-styles();\n }\n span[data-scope=\"separator\"] {\n @include separator-styles();\n }\n}\n","import { Component, Prop, Host, h, Element, forceUpdate } from '@stencil/core';\nimport clsx from 'clsx';\n\n/*\n @slot default - Pass an icon, a link, or text to render the breadcrumb content.\n /\n@Component({\n tag: 'nv-breadcrumb',\n styleUrl: 'nv-breadcrumb.scss',\n shadow: false,\n})\nexport class NvBreadcrumb {\n @Element() el: HTMLNvBreadcrumbElement;\n private popoverTrigger!: Element;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs\n * in a dropdown. Use default for a single item. When passing multiple items\n * as collapsed, make sure to wrap you links in list tags\n /\n @Prop({ reflect: true })\n readonly type: 'collapsed' \| 'default' = 'default';\n\n /\n Add an optional tooltip to provide extra information about the breadcrumb.\n /\n @Prop({ reflect: true })\n readonly tooltip: string;\n\n /\n Use this to highlight the breadcrumb as the current page in your\n * navigation. It also makes the page clearer to screen readers with\n * aria-current=\"location\".\n /\n @Prop({ reflect: true })\n readonly current: boolean;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentDidLoad() {\n // Force a re-render to pass the popoverTrigger ref to the popovers\n if (this.type === 'collapsed') forceUpdate(this);\n }\n\n componentWillLoad() {\n if (this.type === 'default' && this.tooltip) {\n this.popoverTrigger = Array.from(this.el.children).find(\n child => child.getAttribute('slot') === null,\n );\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n role=\"listitem\"\n aria-current={this.current ? 'location' : undefined}\n class={clsx({ 'visually-hidden': this.current })}\n >\n {this.type === 'collapsed' ? (\n <button ref={el => (this.popoverTrigger = el)}>...</button>\n ) : (\n <slot></slot>\n )}\n {this.tooltip && (\n <nv-tooltip\n message={this.tooltip}\n triggerElement={this.popoverTrigger}\n placement=\"top\"\n ></nv-tooltip>\n )}\n {this.type === 'collapsed' && (\n <nv-popover\n triggerMode=\"click\"\n groupName=\"breadcrumbs\"\n triggerElement={this.popoverTrigger}\n >\n <ul slot=\"content\">\n <slot></slot>\n </ul>\n </nv-popover>\n )}\n <span data-scope=\"separator\">/</span>\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-button.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NvButton$1, d as defineCustomElement$1 } from './p-5d5668f0.js';
+import { N as NvButton$1, d as defineCustomElement$1 } from './p-cf06032d.js';
 const NvButton = NvButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-buttongroup.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface NvButtongroup extends Components.NvButtongroup, HTMLElement {}
+export const NvButtongroup: {
+    prototype: NvButtongroup;
+    new (): NvButtongroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-buttongroup.js ADDED Viewed

@@ -0,0 +1,221 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-aff3ed68.js';
+/**
+ * Utility functions for nv-buttongroup.
+ */
+/**
+ * Recursively finds the first button or link element within a container
+ * @param {HTMLElement} element - The HTML element to search within
+ * @returns {HTMLElement | null} The first button or link element found, or null if none exists
+ */
+function findFirstButtonOrLink(element) {
+    // Check if the element itself is a button or link
+    const tagName = element.tagName.toLowerCase();
+    if (tagName === 'nv-button' ||
+        tagName === 'nv-iconbutton' ||
+        tagName === 'a') {
+        return element;
+    }
+    // Recursively search through children
+    for (const child of Array.from(element.children)) {
+        const found = findFirstButtonOrLink(child);
+        if (found) {
+            return found;
+        }
+    }
+    return null;
+}
+/**
+ * Forwards the buttongroup properties to all child elements
+ * @param {HTMLElement} containerElement - The container element containing the buttons
+ * @param {object} props - The properties to forward to children
+ * @param {string} props.size - The size property to apply
+ * @param {string} props.emphasis - The emphasis property to apply
+ * @param {boolean} props.fluid - Whether the buttons should be fluid
+ */
+function forwardPropsToChildren(containerElement, props) {
+    const children = Array.from(containerElement.children);
+    const buttonElements = [];
+    // Find the first button or link in each direct child
+    children.forEach(child => {
+        const buttonOrLink = findFirstButtonOrLink(child);
+        if (buttonOrLink) {
+            buttonElements.push(buttonOrLink);
+        }
+    });
+    buttonElements.forEach(element => {
+        element.classList.remove('first', 'last', 'group-item');
+    });
+    // Apply properties and positional classes to found elements
+    buttonElements.forEach((element, index) => {
+        const isFirst = index === 0;
+        const isLast = index === buttonElements.length - 1;
+        const tagName = element.tagName.toLowerCase();
+        // Add positional classes
+        if (isFirst) {
+            element.classList.add('first');
+        }
+        if (isLast) {
+            element.classList.add('last');
+        }
+        // Add group item classes
+        element.classList.add('group-item');
+        // Forward props to nv-button elements
+        if (tagName === 'nv-button' || tagName === 'nv-iconbutton') {
+            element.setAttribute('size', props.size);
+            element.setAttribute('emphasis', props.emphasis);
+            if (props.fluid) {
+                element.setAttribute('fluid', '');
+            }
+            else {
+                element.removeAttribute('fluid');
+            }
+        }
+        // Forward props to anchor elements by adding CSS classes
+        if (tagName === 'a') {
+            element.classList.add('nv-button');
+            element.classList.add(`size-${props.size}`);
+            element.classList.add(`emphasis-${props.emphasis}`);
+            if (props.fluid) {
+                element.classList.add('fluid');
+            }
+            else {
+                element.classList.remove('fluid');
+            }
+        }
+    });
+}
+const nvButtongroupCss = "nv-buttongroup{display:flex}nv-buttongroup[emphasis=high]{gap:1px}nv-buttongroup[emphasis=low] .group-item,nv-buttongroup[emphasis=low] .group-item:hover{border:1px solid var(--components-button-low-text)}nv-buttongroup[emphasis=lower] .group-item,nv-buttongroup[emphasis=lower] .group-item:hover{border:1px solid var(--components-button-lower-text)}nv-buttongroup:not([orientation=vertical]) .group-item:not(.last):not(.first){border-radius:0}nv-buttongroup:not([orientation=vertical]) .group-item.first{border-top-right-radius:0;border-bottom-right-radius:0}nv-buttongroup:not([orientation=vertical]) .group-item.last{border-top-left-radius:0;border-bottom-left-radius:0}nv-buttongroup:not([orientation=vertical])[emphasis=medium] .group-item:not(.last){border-right:none}nv-buttongroup:not([orientation=vertical])[emphasis=low] .group-item:not(.last){border-right:none}nv-buttongroup:not([orientation=vertical])[emphasis=low] .group-item:not(.first){border-left:none}nv-buttongroup:not([orientation=vertical])[emphasis=lower] .group-item:not(.last){border-right:none}nv-buttongroup:not([orientation=vertical])[emphasis=lower] .group-item:not(.first){border-left:none}nv-buttongroup[orientation=vertical]{flex-direction:column;align-items:stretch;width:fit-content}nv-buttongroup[orientation=vertical] .group-item{width:unset;display:flex}nv-buttongroup[orientation=vertical] .group-item:not(.last):not(.first){border-radius:0}nv-buttongroup[orientation=vertical] .group-item.first{border-bottom-left-radius:0;border-bottom-right-radius:0}nv-buttongroup[orientation=vertical] .group-item.last{border-top-left-radius:0;border-top-right-radius:0}nv-buttongroup[orientation=vertical][emphasis=medium] .group-item:not(.last){border-bottom:none}nv-buttongroup[orientation=vertical][emphasis=low] .group-item:not(.last){border-bottom:none}nv-buttongroup[orientation=vertical][emphasis=low] .group-item:not(.first){border-top:none}nv-buttongroup[orientation=vertical][emphasis=lower] .group-item:not(.last){border-bottom:none}nv-buttongroup[orientation=vertical][emphasis=lower] .group-item:not(.first){border-top:none}";
+const NvButtongroupStyle0 = nvButtongroupCss;
+const NvButtongroup$1 = /*@__PURE__*/ proxyCustomElement(class NvButtongroup extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Determines how large or small all the buttons appear, allowing for
+         * customization of the button's dimensions to fit different design
+         * specifications and user needs.
+         */
+        this.size = 'md';
+        /**
+         * Adjusts the emphasis of all the buttons to make it more or less visually
+         * prominent to users. Use this to draw attention to important actions or
+         * reduce focus on less critical ones
+         */
+        this.emphasis = 'medium';
+        /**
+         * Allows the button group to stretch and fill the entire width of its
+         * container.
+         */
+        this.fluid = false;
+        /**
+         * Determines the orientation of the button group. When enabled, the buttons
+         * are stacked vertically rather than aligned side by side.
+         */
+        this.orientation = 'horizontal';
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Forwards the buttongroup properties to all child elements
+         */
+        this.forwardPropsToChildren = () => {
+            forwardPropsToChildren(this.el, {
+                size: this.size,
+                emphasis: this.emphasis,
+                fluid: this.fluid,
+            });
+        };
+        /**
+         * Sets up the MutationObserver to watch for changes in child elements
+         */
+        this.setupMutationObserver = () => {
+            this.mutationObserver = new MutationObserver(mutations => {
+                mutations.forEach(mutation => {
+                    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+                        // Forward props to all children when changes occur
+                        this.forwardPropsToChildren();
+                    }
+                });
+            });
+            this.mutationObserver.observe(this.el, {
+                childList: true,
+                subtree: true,
+            });
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    onEmphasisChange() {
+        this.forwardPropsToChildren();
+    }
+    onSizeChange() {
+        this.forwardPropsToChildren();
+    }
+    onFluidChange() {
+        this.forwardPropsToChildren();
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.forwardPropsToChildren();
+        this.setupMutationObserver();
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region EVENTS
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'd0322897a0312e7b55b087e4abfc94fcaf9f7747' }, h("slot", { key: '70afccf10fe728482096d3fce42083e9931e06bd' })));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "emphasis": ["onEmphasisChange"],
+        "size": ["onSizeChange"],
+        "fluid": ["onFluidChange"]
+    }; }
+    static get style() { return NvButtongroupStyle0; }
+}, [4, "nv-buttongroup", {
+        "size": [513],
+        "emphasis": [513],
+        "fluid": [516],
+        "orientation": [513]
+    }, undefined, {
+        "emphasis": ["onEmphasisChange"],
+        "size": ["onSizeChange"],
+        "fluid": ["onFluidChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-buttongroup"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-buttongroup":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvButtongroup$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+const NvButtongroup = NvButtongroup$1;
+const defineCustomElement = defineCustomElement$1;
+export { NvButtongroup, defineCustomElement };
+//# sourceMappingURL=nv-buttongroup.js.map

package/dist/components/nv-buttongroup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"nv-buttongroup.js","mappings":"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","names":["NvButtongroup"],"sources":["src/components/nv-buttongroup/nv-buttongroup.utils.ts","src/components/nv-buttongroup/styles/nv-buttongroup.scss?tag=nv-buttongroup","src/components/nv-buttongroup/nv-buttongroup.tsx"],"sourcesContent":["/**\n * Utility functions for nv-buttongroup.\n */\n\n/**\n * Recursively finds the first button or link element within a container\n * @param {HTMLElement} element - The HTML element to search within\n * @returns {HTMLElement | null} The first button or link element found, or null if none exists\n */\nexport function findFirstButtonOrLink(\n element: HTMLElement,\n): HTMLElement | null {\n // Check if the element itself is a button or link\n const tagName = element.tagName.toLowerCase();\n if (\n tagName === 'nv-button' ||\n tagName === 'nv-iconbutton' ||\n tagName === 'a'\n ) {\n return element;\n }\n\n // Recursively search through children\n for (const child of Array.from(element.children) as HTMLElement[]) {\n const found = findFirstButtonOrLink(child);\n if (found) {\n return found;\n }\n }\n\n return null;\n}\n\n/**\n * Forwards the buttongroup properties to all child elements\n * @param {HTMLElement} containerElement - The container element containing the buttons\n * @param {object} props - The properties to forward to children\n * @param {string} props.size - The size property to apply\n * @param {string} props.emphasis - The emphasis property to apply\n * @param {boolean} props.fluid - Whether the buttons should be fluid\n */\nexport function forwardPropsToChildren(\n containerElement: HTMLElement,\n props: {\n /** The size property to apply */\n size: string;\n /** The emphasis property to apply */\n emphasis: string;\n /** Whether the buttons should be fluid */\n fluid: boolean;\n },\n): void {\n const children = Array.from(containerElement.children) as HTMLElement[];\n const buttonElements: HTMLElement[] = [];\n\n // Find the first button or link in each direct child\n children.forEach(child => {\n const buttonOrLink = findFirstButtonOrLink(child);\n if (buttonOrLink) {\n buttonElements.push(buttonOrLink);\n }\n });\n\n buttonElements.forEach(element => {\n element.classList.remove('first', 'last', 'group-item');\n });\n\n // Apply properties and positional classes to found elements\n buttonElements.forEach((element, index) => {\n const isFirst = index === 0;\n const isLast = index === buttonElements.length - 1;\n const tagName = element.tagName.toLowerCase();\n\n // Add positional classes\n if (isFirst) {\n element.classList.add('first');\n }\n if (isLast) {\n element.classList.add('last');\n }\n\n // Add group item classes\n element.classList.add('group-item');\n\n // Forward props to nv-button elements\n if (tagName === 'nv-button' || tagName === 'nv-iconbutton') {\n element.setAttribute('size', props.size);\n element.setAttribute('emphasis', props.emphasis);\n if (props.fluid) {\n element.setAttribute('fluid', '');\n } else {\n element.removeAttribute('fluid');\n }\n }\n\n // Forward props to anchor elements by adding CSS classes\n if (tagName === 'a') {\n element.classList.add('nv-button');\n element.classList.add(`size-${props.size}`);\n element.classList.add(`emphasis-${props.emphasis}`);\n if (props.fluid) {\n element.classList.add('fluid');\n } else {\n element.classList.remove('fluid');\n }\n }\n });\n}\n","@use \"./mixins\" as *;\n\nnv-buttongroup {\n @include root-styles();\n\n &[emphasis=\"high\"] {\n @include high-emphasis-styles();\n }\n &[emphasis=\"low\"] {\n @include low-emphasis-styles();\n }\n &[emphasis=\"lower\"] {\n @include lower-emphasis-styles();\n }\n\n &:not([orientation=\"vertical\"]) {\n @include border-radius-horizontal-styles();\n\n &[emphasis=\"medium\"] {\n @include medium-emphasis-horizontal-styles();\n }\n &[emphasis=\"low\"] {\n @include low-emphasis-horizontal-styles();\n }\n &[emphasis=\"lower\"] {\n @include lower-emphasis-horizontal-styles();\n }\n }\n\n &[orientation=\"vertical\"] {\n @include vertical-styles();\n @include border-radius-vertical-styles();\n\n &[emphasis=\"medium\"] {\n @include medium-emphasis-vertical-styles();\n }\n &[emphasis=\"low\"] {\n @include low-emphasis-vertical-styles();\n }\n &[emphasis=\"lower\"] {\n @include lower-emphasis-vertical-styles();\n }\n }\n}","import { Component, Host, h, Prop, Element, Watch } from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis } from '../../utils/constants';\nimport { forwardPropsToChildren } from './nv-buttongroup.utils';\n\n/**\n * @slot default - Child buttons or links.\n */\n@Component({\n tag: 'nv-buttongroup',\n styleUrl: 'styles/nv-buttongroup.scss',\n shadow: false,\n})\nexport class NvButtongroup {\n @Element() el: HTMLNvButtongroupElement;\n private mutationObserver: MutationObserver;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Determines how large or small all the buttons appear, allowing for\n * customization of the button's dimensions to fit different design\n * specifications and user needs.\n */\n @Prop({ reflect: true })\n readonly size: `${ButtonSize}` = 'md';\n\n /**\n * Adjusts the emphasis of all the buttons to make it more or less visually\n * prominent to users. Use this to draw attention to important actions or\n * reduce focus on less critical ones\n */\n @Prop({ reflect: true })\n readonly emphasis: `${ButtonEmphasis}` = 'medium';\n\n /**\n * Allows the button group to stretch and fill the entire width of its\n * container.\n */\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n /**\n * Determines the orientation of the button group. When enabled, the buttons\n * are stacked vertically rather than aligned side by side.\n */\n @Prop({ reflect: true })\n readonly orientation: 'vertical' | 'horizontal' = 'horizontal';\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Forwards the buttongroup properties to all child elements\n */\n private forwardPropsToChildren = (): void => {\n forwardPropsToChildren(this.el, {\n size: this.size,\n emphasis: this.emphasis,\n fluid: this.fluid,\n });\n };\n\n /**\n * Sets up the MutationObserver to watch for changes in child elements\n */\n private setupMutationObserver = (): void => {\n this.mutationObserver = new MutationObserver(mutations => {\n mutations.forEach(mutation => {\n if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {\n // Forward props to all children when changes occur\n this.forwardPropsToChildren();\n }\n });\n });\n\n this.mutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n });\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('emphasis')\n onEmphasisChange() {\n this.forwardPropsToChildren();\n }\n\n @Watch('size')\n onSizeChange() {\n this.forwardPropsToChildren();\n }\n\n @Watch('fluid')\n onFluidChange() {\n this.forwardPropsToChildren();\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.forwardPropsToChildren();\n this.setupMutationObserver();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region EVENTS\n //#endregion EVENTS\n /****************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n // #endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-calendar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NvCalendar$1, d as defineCustomElement$1 } from './p-d32b75ac.js';
+import { N as NvCalendar$1, d as defineCustomElement$1 } from './p-8aee1010.js';
 const NvCalendar = NvCalendar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-col.js CHANGED Viewed

@@ -27,7 +27,7 @@ const NvCol$1 = /*@__PURE__*/ proxyCustomElement(class NvCol extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'e258bc3e01d3bd35bf64f14241c70ae044fac132', class: clsx(this.getColSize()) }, h("slot", { key: 'd36caf0fde38eae6cd37b62fb4c02e3de6b7225e' })));
+        return (h(Host, { key: '4fe90a1d020de9e85d32a52ccb39c8b6d8c1fc25', class: clsx(this.getColSize()) }, h("slot", { key: '5a6ad624fd7c6251b2f555c0e3bc828c0e048761' })));
     }
     static get style() { return NvColStyle0; }
 }, [4, "nv-col", {

package/dist/components/nv-datagrid.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
 import { d as deepCopyElement, e as excludedProps } from './p-cb34aa4f.js';
-import { d as SortingPossibility } from './p-1f505531.js';
-import { d as defineCustomElement$3 } from './p-68ff562f.js';
-import { d as defineCustomElement$2 } from './p-6460318d.js';
+import { d as SortingPossibility } from './p-a3ddec4c.js';
+import { d as defineCustomElement$3 } from './p-0ffb4785.js';
+import { d as defineCustomElement$2 } from './p-a1fe0a5d.js';
 /**
    * table-core
@@ -3308,7 +3308,7 @@ function debounce(func, wait) {
     };
 }
-const nvDatagridCss = "nv-datagrid{--nv-datagrid-border-default:var(\n    --components-form-field-border-default\n  );--nv-datagrid-border-hover:var(--components-form-field-border-hover);--nv-datagrid-border-focus:var(--components-form-field-border-default);--nv-datagrid-background-default:var(\n    --components-form-field-background-default\n  );--nv-datagrid-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-datagrid-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-datagrid-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-datagrid-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-datagrid-outline-color:var(--color-focus-brand);display:block}nv-datagrid .hidden{display:none}nv-datagrid table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-datagrid th{text-align:left;border-bottom:1px solid var(--components-datagrid-header-border);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-header-text)}nv-datagrid td{border-bottom:1px solid var(--components-datagrid-body-border);height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-md);font-weight:400;color:var(--components-datagrid-body-text);white-space:nowrap;text-overflow:ellipsis}nv-datagrid tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}nv-datagrid .cursor-pointer{cursor:pointer}nv-datagrid .select-none{-webkit-user-select:none;user-select:none}nv-datagrid .search-container{display:flex}nv-datagrid .checkbox-container{position:relative;color:var(--nv-datagrid-color-checked)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-datagrid-color-disabled)}nv-datagrid .checkbox-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-datagrid-border-default);background:var(--nv-datagrid-background-default)}nv-datagrid .checkbox-container input[type=checkbox]:hover{border-color:var(--nv-datagrid-border-hover)}nv-datagrid .checkbox-container input[type=checkbox]:focus{border-color:var(--nv-datagrid-border-focus)}nv-datagrid .checkbox-container input[type=checkbox]:focus,nv-datagrid .checkbox-container input[type=checkbox]:focus-within{outline:none}nv-datagrid .checkbox-container input[type=checkbox]:focus-visible,nv-datagrid .checkbox-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-datagrid-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-datagrid .checkbox-container input[type=checkbox]:checked,nv-datagrid .checkbox-container input[type=checkbox]:indeterminate{background:var(--nv-datagrid-background-checked);border-color:var(--nv-datagrid-background-checked)}nv-datagrid .checkbox-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-datagrid-background-disabled);border-color:var(--nv-datagrid-border-default)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-datagrid .checkbox-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}";
+const nvDatagridCss = "nv-datagrid{--nv-datagrid-border-default:var(\n    --components-form-field-border-default\n  );--nv-datagrid-border-hover:var(--components-form-field-border-hover);--nv-datagrid-border-focus:var(--components-form-field-border-default);--nv-datagrid-background-default:var(\n    --components-form-field-background-default\n  );--nv-datagrid-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-datagrid-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-datagrid-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-datagrid-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-datagrid-outline-color:var(--color-focus-brand);display:block}nv-datagrid .hidden{display:none}nv-datagrid table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-datagrid th{text-align:left;border-bottom:1px solid var(--components-datagrid-header-border);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-header-text)}nv-datagrid td{border-bottom:1px solid var(--components-datagrid-body-border);height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-md);font-weight:400;color:var(--components-datagrid-body-text);white-space:nowrap;text-overflow:ellipsis}nv-datagrid tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}nv-datagrid .cursor-pointer{cursor:pointer}nv-datagrid .select-none{-webkit-user-select:none;user-select:none}nv-datagrid .search-container{display:flex}nv-datagrid .checkbox-container{position:relative;color:var(--nv-datagrid-color-checked)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-datagrid-color-disabled)}nv-datagrid .checkbox-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-datagrid-border-default);background:var(--nv-datagrid-background-default)}nv-datagrid .checkbox-container input[type=checkbox]:hover{border-color:var(--nv-datagrid-border-hover)}nv-datagrid .checkbox-container input[type=checkbox]:focus{border-color:var(--nv-datagrid-border-focus)}nv-datagrid .checkbox-container input[type=checkbox]:focus,nv-datagrid .checkbox-container input[type=checkbox]:focus-within{outline:none}nv-datagrid .checkbox-container input[type=checkbox]:focus-visible,nv-datagrid .checkbox-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-datagrid-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-datagrid .checkbox-container input[type=checkbox]:checked,nv-datagrid .checkbox-container input[type=checkbox]:indeterminate{background:var(--nv-datagrid-background-checked);border-color:var(--nv-datagrid-background-checked)}nv-datagrid .checkbox-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-datagrid-background-disabled);border-color:var(--nv-datagrid-border-default)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-datagrid .checkbox-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}";
 const NvDatagridStyle0 = nvDatagridCss;
 const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H {
@@ -4321,7 +4321,7 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : (_c = (_b = this.table) === null || _b === void 0 ? void 0 : _b.getRowModel()) === null || _c === void 0 ? void 0 : _c.rows;
-        return (h(Host, { key: 'b149279b85a3138e5be62b2f431a82fe5056b996' }, h("div", { key: '84ffd6a613a7e51539f0bc7e5ddff16a1769af5a', class: "hidden" }, h("slot", { key: 'cabafd2aab117816742972bd4eb6e7122c333ee9' })), h("slot", { key: '17a26ba154ddc2dea82f7576878107ede55a2043', name: "before" }), this.enableGlobalFilter && this.table && (h("div", { key: '822bb793cad6266810571dbb2c087c9e2b68958d', class: `search-container justify-${this.globalFilterPosition}` }, h("nv-fieldtext", { key: 'b9fd668a09b602ded195e4d10b79ae3d06c9a0f6', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("div", null, h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", null, this.parsedColumns.length > 0 && headerGroups
+        return (h(Host, { key: '12113da221c66835cbd3c9c6f84d386b01a6cd3d' }, h("div", { key: '81e429e22f928758c413e295d431b9b5e989304f', class: "hidden" }, h("slot", { key: '12a21e3793f14ae1b47df812bf6d4c4d0d6c02f3' })), h("slot", { key: '372beaeea9fec7014a372961c6fabfae485c4cdc', name: "before" }), this.enableGlobalFilter && this.table && (h("div", { key: 'ca2589c327c23d4e4155d716f7d92c463ff36ab9', class: `search-container justify-${this.globalFilterPosition}` }, h("nv-fieldtext", { key: '749336787db4601d30d9b96d3f0db7f1cffe545f', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("div", null, h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", null, this.parsedColumns.length > 0 && headerGroups
             ? headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(headerGroup => (h("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
                 return this.getHeaderCell(header);
             }))))
@@ -4332,7 +4332,7 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
                 return (h("td", { key: cell.id, "data-row-id": rowId }, this.flexRender(cell.column.columnDef.cell, cell.getContext())));
             })));
         }))), this.table && this.enableRowSelection ? (h("tfoot", null, h("tr", null, h("td", { colSpan: 20 }, this.enableRowSelection && this.table ? (h("div", null, this.rowSelectionState &&
-            Object.keys(this.rowSelectionState).length > 0 ? (h("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', ((_e = (_d = this.table.getPreFilteredRowModel()) === null || _d === void 0 ? void 0 : _d.rows) === null || _e === void 0 ? void 0 : _e.length) || 0, ' ', "Total Rows Selected")) : (h("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), h("slot", { key: 'f509745423857527f2983c5cce1289441cc1f7c7', name: "after" })));
+            Object.keys(this.rowSelectionState).length > 0 ? (h("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', ((_e = (_d = this.table.getPreFilteredRowModel()) === null || _d === void 0 ? void 0 : _d.rows) === null || _e === void 0 ? void 0 : _e.length) || 0, ' ', "Total Rows Selected")) : (h("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), h("slot", { key: 'd7dbad31543cb111f4137fd1a0430f9a2803bfdd', name: "after" })));
     }
     get el() { return this; }
     static get watchers() { return {