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

@nova-design-system/nova-webcomponents 3.15.0 → 3.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (536) hide show

package/dist/esm/nv-accordion.entry.js.map CHANGED Viewed

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

package/dist/esm/nv-alert.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a1936cd0.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-dc2723f3.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 import { F as FeedbackColors } from './constants-69bafca2.js';
 import { u as useCollapse } from './collapse.animation-6e0b08df.js';
@@ -6,7 +6,7 @@ import { u as useFade } from './fade.animation-9b939939.js';
 import './style-value-types.es-f5d10b79.js';
 import { t as timeline } from './timeline.animation-79215cd4.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-right:calc(var(--alert-padding) + var(--spacing-5) + var(--spacing-1));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:var(--font-family-default), var(--font-family-fallback), 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-right:calc(var(--alert-padding) + var(--spacing-5) + var(--spacing-1));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 = class {

package/dist/esm/nv-alert.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-alert.entry.js","mappings":"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","names":[],"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-right: calc(var(--alert-padding) + var(--spacing-5) + var(--spacing-1));\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';\nimport { type IconName } from '../nv-icon/nv-icons';\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() el: 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 = (): IconName => {\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.el, { duration: 150 });\n const { collapse, expand } = useCollapse(this.el, { duration: 250 });\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.el.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.el.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.entry.js","mappings":"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","names":[],"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: var(--font-family-default), var(--font-family-fallback), sans-serif;\n}\n\n@mixin content-styles() {\n display: flex;\n padding: var(--alert-padding);\n padding-right: calc(var(--alert-padding) + var(--spacing-5) + var(--spacing-1));\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';\nimport { type IconName } from '../nv-icon/nv-icons';\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() el: 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 = (): IconName => {\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.el, { duration: 150 });\n const { collapse, expand } = useCollapse(this.el, { duration: 250 });\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.el.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.el.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/esm/nv-avatar.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host } from './index-a1936cd0.js';
+import { r as registerInstance, h, H as Host } from './index-dc2723f3.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 import { S as SemanticSizes } from './constants-69bafca2.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 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:var(--font-family-default), var(--font-family-fallback), 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;
 const NvAvatar = class {

package/dist/esm/nv-avatar.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-avatar.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,~~y7FAAy7F~~,CAAC;~~AAC98F~~,uBAAe,WAAW;;MCYb,QAAQ;IALrB;;;;;QA8GE,SAAI,GAAuB,IAAI,CAAC;;;;;QAOvB,UAAK,GAAW,GAAG,CAAC;KAuC9B;IAjGC,mBAAmB;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;SACtC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;SACjC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,MAAM,CAAC;SAClC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;SACjC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;SACtC;QACD,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;SAC3B;QACD,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;SACrB;KACF;;;;;;;;;IA+CO,YAAY,CAAC,QAAgB;QACnC,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACxC;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC,gBACpD,IAAI,CAAC,GAAG,IAEnB,IAAI,CAAC,GAAG,IACP,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,IACnC,IAAI,CAAC,QAAQ,IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,KAEhC,YAAM,IAAI,EAAC,MAAM,IACf,eAAS,IAAI,EAAC,MAAM,GAAG,CAClB,CACR,CACI,EACP;KACH;;;;;;","names":[],"sources":["src/components/nv-avatar/nv-avatar.scss?tag=nv-avatar","src/components/nv-avatar/nv-avatar.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/styles/mixins\" as icon;\n\n/* Variants /\n$avatar-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$avatar-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/ Define maps for size-related variables /\n$avatar-size: (\n \"xs\": var(--avatar-xs-size),\n \"sm\": var(--avatar-sm-size),\n \"md\": var(--avatar-md-size),\n \"lg\": var(--avatar-lg-size),\n \"xl\": var(--avatar-xl-size)\n);\n\n$avatar-font-size: (\n \"xs\": var(--avatar-xs-font-size),\n \"sm\": var(--avatar-sm-font-size),\n \"md\": var(--avatar-md-font-size),\n \"lg\": var(--avatar-lg-font-size),\n \"xl\": var(--avatar-xl-font-size)\n);\n\n/ Define maps for color-related variables /\n$avatar-color-background: (\n \"1\": var(--components-avatar-background-1),\n \"2\": var(--components-avatar-background-2),\n \"3\": var(--components-avatar-background-3),\n \"4\": var(--components-avatar-background-4),\n \"5\": var(--components-avatar-background-5),\n \"6\": var(--components-avatar-background-6),\n \"7\": var(--components-avatar-background-7),\n \"8\": var(--components-avatar-background-8),\n \"9\": var(--components-avatar-background-9),\n \"10\": var(--components-avatar-background-10)\n);\n\n$avatar-color-content: (\n \"1\": var(--components-avatar-content-1),\n \"2\": var(--components-avatar-content-2),\n \"3\": var(--components-avatar-content-3),\n \"4\": var(--components-avatar-content-4),\n \"5\": var(--components-avatar-content-5),\n \"6\": var(--components-avatar-content-6),\n \"7\": var(--components-avatar-content-7),\n \"8\": var(--components-avatar-content-8),\n \"9\": var(--components-avatar-content-9),\n \"10\": var(--components-avatar-content-10)\n);\n\n@mixin avatar-base-styles() {\n align-items: center !important;\n background-color: var(--components-avatar-background-1);\n border-radius: var(--radius-rounded-full) !important;\n display: flex !important;\n flex-shrink: 0 !important;\n font-family: ~~\"TT~~ ~~Norms Pro\"~~, sans-serif;\n font-style: normal;\n font-weight: var(--font-weight-medium-emphasis);\n justify-content: center !important;\n leading-trim: both;\n line-height: 1 !important;\n text-align: center;\n text-edge: cap;\n text-transform: uppercase;\n}\n\n@mixin avatar-color($avatar-number) {\n background-color: map.get($avatar-color-background, $avatar-number);\n color: map.get($avatar-color-content, $avatar-number);\n}\n\n@mixin avatar-image-styles() {\n height: 100%;\n width: 100%;\n object-fit: cover;\n object-position: center;\n border-radius: 50%;\n}\n\n@mixin avatar-size-styles($size) {\n width: map.get($avatar-size, $size);\n height: map.get($avatar-size, $size);\n font-size: map.get($avatar-font-size, $size);\n line-height: map.get($avatar-font-size, $size);\n\n nv-icon > svg {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$size-variants, $size), size),\n map.get(map.get(icon.$size-variants, $size), stroke)\n );\n }\n}\n\nnv-avatar {\n @include avatar-base-styles();\n\n @each $color in $avatar-colors {\n &.avatar-color-#{$color} {\n @include avatar-color($color);\n }\n }\n\n img {\n @include avatar-image-styles();\n }\n\n @each $size in $avatar-sizes {\n &.avatar-#{$size} {\n @include avatar-size-styles($size);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes } from '../../utils/constants';\n\n/\n @slot icon - if you want to add an icon to the avatar, use this slot with an svg or nv-icon\n /\n@Component({\n tag: 'nv-avatar',\n styleUrl: 'nv-avatar.scss',\n shadow: false,\n})\nexport class NvAvatar {\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Set size to ExtraSmall to the avatar.\n * @deprecated use size instead.\n /\n @Prop({ reflect: true })\n readonly xsmall: boolean;\n\n /\n Set size to Small to the avatar.\n * @deprecated use size instead.\n /\n @Prop({ reflect: true })\n readonly small: boolean;\n\n /\n Set size to Medium to the avatar.\n * @deprecated use size instead.\n /\n @Prop({ reflect: true })\n readonly medium: boolean;\n\n /\n Set size to Large to the avatar.\n * @deprecated use size instead.\n /\n @Prop({ reflect: true })\n readonly large: boolean;\n\n /\n Set size to ExtraLarge to the avatar.\n * @deprecated use size instead.\n /\n @Prop({ reflect: true })\n readonly xlarge: boolean;\n\n /\n Set initials to the avatar.\n * @deprecated use initials instead.\n /\n\n @Prop({ reflect: true })\n readonly text: string;\n\n /\n Set src to the avatar.\n * @deprecated use src instead.\n /\n @Prop({ reflect: true })\n readonly url: string;\n\n componentWillRender() {\n if (this.xsmall) {\n this.size = SemanticSizes.ExtraSmall;\n }\n if (this.small) {\n this.size = SemanticSizes.Small;\n }\n if (this.medium) {\n this.size = SemanticSizes.Medium;\n }\n if (this.large) {\n this.size = SemanticSizes.Large;\n }\n if (this.xlarge) {\n this.size = SemanticSizes.ExtraLarge;\n }\n if (this.text) {\n this.initials = this.text;\n }\n if (this.url) {\n this.src = this.url;\n }\n }\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * If and image is provided, add an alt tag to describe it.\n /\n @Prop({ reflect: true })\n readonly alt: string;\n\n /\n Will insert an image into the avatar.\n /\n @Prop({ reflect: true, mutable: true })\n src: string;\n\n /\n Initials of the avatar. Usually use two letters\n * When filled with the src parameter, the text will not be rendered.\n /\n @Prop({ reflect: true, mutable: true })\n initials: string;\n\n /\n Define the size of the avatar. You can use t-shirt sizes.\n /\n @Prop({ reflect: true, mutable: true })\n size: `${SemanticSizes}` = 'md';\n\n /\n You can apply different colors on the Avatar.\n * Use a string number between 1 and 10.\n /\n @Prop({ reflect: true })\n readonly color: string = '1';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Makes sure the initials are trimmed to 2 letters.\n * @param {string} initials - The initials to be trimmed.\n * @returns {string} The trimmed initials.\n /\n private trimInitials(initials: string): string {\n return initials.trim().substring(0, 2);\n }\n\n //#endregion METHODS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`avatar-${this.size}`, `avatar-color-${this.color}`)}\n aria-label={this.alt}\n >\n {this.src ? (\n <img src={this.src} alt={this.alt} />\n ) : this.initials ? (\n this.trimInitials(this.initials)\n ) : (\n <slot name=\"icon\">\n <nv-icon name=\"user\" />\n </slot>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-avatar.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,g+FAAg+F,CAAC;AACr/F,uBAAe,WAAW;;MCYb,QAAQ;IALrB;;;;;QA8GE,SAAI,GAAuB,IAAI,CAAC;;;;;QAOvB,UAAK,GAAW,GAAG,CAAC;KAuC9B;IAjGC,mBAAmB;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;SACtC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;SACjC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,MAAM,CAAC;SAClC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;SACjC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;SACtC;QACD,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;SAC3B;QACD,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;SACrB;KACF;;;;;;;;;IA+CO,YAAY,CAAC,QAAgB;QACnC,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACxC;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC,gBACpD,IAAI,CAAC,GAAG,IAEnB,IAAI,CAAC,GAAG,IACP,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,IACnC,IAAI,CAAC,QAAQ,IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,KAEhC,YAAM,IAAI,EAAC,MAAM,IACf,eAAS,IAAI,EAAC,MAAM,GAAG,CAClB,CACR,CACI,EACP;KACH;;;;;;","names":[],"sources":["src/components/nv-avatar/nv-avatar.scss?tag=nv-avatar","src/components/nv-avatar/nv-avatar.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/styles/mixins\" as icon;\n\n/* Variants /\n$avatar-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$avatar-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/ Define maps for size-related variables /\n$avatar-size: (\n \"xs\": var(--avatar-xs-size),\n \"sm\": var(--avatar-sm-size),\n \"md\": var(--avatar-md-size),\n \"lg\": var(--avatar-lg-size),\n \"xl\": var(--avatar-xl-size)\n);\n\n$avatar-font-size: (\n \"xs\": var(--avatar-xs-font-size),\n \"sm\": var(--avatar-sm-font-size),\n \"md\": var(--avatar-md-font-size),\n \"lg\": var(--avatar-lg-font-size),\n \"xl\": var(--avatar-xl-font-size)\n);\n\n/ Define maps for color-related variables /\n$avatar-color-background: (\n \"1\": var(--components-avatar-background-1),\n \"2\": var(--components-avatar-background-2),\n \"3\": var(--components-avatar-background-3),\n \"4\": var(--components-avatar-background-4),\n \"5\": var(--components-avatar-background-5),\n \"6\": var(--components-avatar-background-6),\n \"7\": var(--components-avatar-background-7),\n \"8\": var(--components-avatar-background-8),\n \"9\": var(--components-avatar-background-9),\n \"10\": var(--components-avatar-background-10)\n);\n\n$avatar-color-content: (\n \"1\": var(--components-avatar-content-1),\n \"2\": var(--components-avatar-content-2),\n \"3\": var(--components-avatar-content-3),\n \"4\": var(--components-avatar-content-4),\n \"5\": var(--components-avatar-content-5),\n \"6\": var(--components-avatar-content-6),\n \"7\": var(--components-avatar-content-7),\n \"8\": var(--components-avatar-content-8),\n \"9\": var(--components-avatar-content-9),\n \"10\": var(--components-avatar-content-10)\n);\n\n@mixin avatar-base-styles() {\n align-items: center !important;\n background-color: var(--components-avatar-background-1);\n border-radius: var(--radius-rounded-full) !important;\n display: flex !important;\n flex-shrink: 0 !important;\n font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n font-style: normal;\n font-weight: var(--font-weight-medium-emphasis);\n justify-content: center !important;\n leading-trim: both;\n line-height: 1 !important;\n text-align: center;\n text-edge: cap;\n text-transform: uppercase;\n}\n\n@mixin avatar-color($avatar-number) {\n background-color: map.get($avatar-color-background, $avatar-number);\n color: map.get($avatar-color-content, $avatar-number);\n}\n\n@mixin avatar-image-styles() {\n height: 100%;\n width: 100%;\n object-fit: cover;\n object-position: center;\n border-radius: 50%;\n}\n\n@mixin avatar-size-styles($size) {\n width: map.get($avatar-size, $size);\n height: map.get($avatar-size, $size);\n font-size: map.get($avatar-font-size, $size);\n line-height: map.get($avatar-font-size, $size);\n\n nv-icon > svg {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$size-variants, $size), size),\n map.get(map.get(icon.$size-variants, $size), stroke)\n );\n }\n}\n\nnv-avatar {\n @include avatar-base-styles();\n\n @each $color in $avatar-colors {\n &.avatar-color-#{$color} {\n @include avatar-color($color);\n }\n }\n\n img {\n @include avatar-image-styles();\n }\n\n @each $size in $avatar-sizes {\n &.avatar-#{$size} {\n @include avatar-size-styles($size);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes } from '../../utils/constants';\n\n/\n @slot icon - if you want to add an icon to the avatar, use this slot with an svg or nv-icon\n /\n@Component({\n tag: 'nv-avatar',\n styleUrl: 'nv-avatar.scss',\n shadow: false,\n})\nexport class NvAvatar {\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Set size to ExtraSmall to the avatar.\n * @deprecated use size instead.\n /\n @Prop({ reflect: true })\n readonly xsmall: boolean;\n\n /\n Set size to Small to the avatar.\n * @deprecated use size instead.\n /\n @Prop({ reflect: true })\n readonly small: boolean;\n\n /\n Set size to Medium to the avatar.\n * @deprecated use size instead.\n /\n @Prop({ reflect: true })\n readonly medium: boolean;\n\n /\n Set size to Large to the avatar.\n * @deprecated use size instead.\n /\n @Prop({ reflect: true })\n readonly large: boolean;\n\n /\n Set size to ExtraLarge to the avatar.\n * @deprecated use size instead.\n /\n @Prop({ reflect: true })\n readonly xlarge: boolean;\n\n /\n Set initials to the avatar.\n * @deprecated use initials instead.\n /\n\n @Prop({ reflect: true })\n readonly text: string;\n\n /\n Set src to the avatar.\n * @deprecated use src instead.\n /\n @Prop({ reflect: true })\n readonly url: string;\n\n componentWillRender() {\n if (this.xsmall) {\n this.size = SemanticSizes.ExtraSmall;\n }\n if (this.small) {\n this.size = SemanticSizes.Small;\n }\n if (this.medium) {\n this.size = SemanticSizes.Medium;\n }\n if (this.large) {\n this.size = SemanticSizes.Large;\n }\n if (this.xlarge) {\n this.size = SemanticSizes.ExtraLarge;\n }\n if (this.text) {\n this.initials = this.text;\n }\n if (this.url) {\n this.src = this.url;\n }\n }\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * If and image is provided, add an alt tag to describe it.\n /\n @Prop({ reflect: true })\n readonly alt: string;\n\n /\n Will insert an image into the avatar.\n /\n @Prop({ reflect: true, mutable: true })\n src: string;\n\n /\n Initials of the avatar. Usually use two letters\n * When filled with the src parameter, the text will not be rendered.\n /\n @Prop({ reflect: true, mutable: true })\n initials: string;\n\n /\n Define the size of the avatar. You can use t-shirt sizes.\n /\n @Prop({ reflect: true, mutable: true })\n size: `${SemanticSizes}` = 'md';\n\n /\n You can apply different colors on the Avatar.\n * Use a string number between 1 and 10.\n /\n @Prop({ reflect: true })\n readonly color: string = '1';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Makes sure the initials are trimmed to 2 letters.\n * @param {string} initials - The initials to be trimmed.\n * @returns {string} The trimmed initials.\n /\n private trimInitials(initials: string): string {\n return initials.trim().substring(0, 2);\n }\n\n //#endregion METHODS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`avatar-${this.size}`, `avatar-color-${this.color}`)}\n aria-label={this.alt}\n >\n {this.src ? (\n <img src={this.src} alt={this.alt} />\n ) : this.initials ? (\n this.trimInitials(this.initials)\n ) : (\n <slot name=\"icon\">\n <nv-icon name=\"user\" />\n </slot>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/esm/nv-badge_2.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a1936cd0.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-dc2723f3.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 import { u as useCollapse } from './collapse.animation-6e0b08df.js';
 import { u as useFade } from './fade.animation-9b939939.js';

package/dist/esm/nv-breadcrumb.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-a1936cd0.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-dc2723f3.js';
 import { c as clsx } from './clsx-297c1ffe.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:var(--font-weight-medium-emphasis);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 NvBreadcrumbStyle0 = nvBreadcrumbCss;
 const NvBreadcrumb = class {

package/dist/esm/nv-breadcrumb.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-breadcrumb.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,~~6+DAA6+D~~,CAAC;~~AACtgE~~,2BAAe,eAAe;;MCUjB,YAAY;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":[],"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.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,4gEAA4gE,CAAC;AACriE,2BAAe,eAAe;;MCUjB,YAAY;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":[],"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: var(--font-weight-medium-emphasis);\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/esm/nv-breadcrumbs.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-a1936cd0.js';
+import { r as registerInstance, h, H as Host } from './index-dc2723f3.js';
 const nvBreadcrumbsCss = "nv-breadcrumbs{display:block}nv-breadcrumbs>ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--breadcrumb-padding-y)}nv-breadcrumbs nv-breadcrumb:last-child [data-scope=separator],nv-breadcrumbs nv-breadcrumb:last-child [slot=separator]{display:none}";
 const NvBreadcrumbsStyle0 = nvBreadcrumbsCss;

package/dist/esm/nv-button.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a1936cd0.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-dc2723f3.js';
 import { b as ButtonType, B as ButtonSize } from './constants-69bafca2.js';
-const nvButtonCss = "nv-button{text-decoration:none;display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:\"TT Norms Pro\", sans-serif;transition:background-color 150ms ease-out;user-select:none;cursor:pointer;height:fit-content;width:fit-content}nv-button[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-button[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-button[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-button[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-button[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-button[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-button[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-button[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-button[emphasis=high]{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high]:hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high]:active{background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=high][active]:not([active=false]){background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high][danger]:not([danger=false]){background:var(--components-button-destructive-high-background);border:1px solid transparent;color:var(--components-button-destructive-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):hover{background:var(--components-button-destructive-high-background-hover);border:1px solid transparent;color:var(--components-button-destructive-high-text-hover)}nv-button[emphasis=high][danger]:not([danger=false]):focus,nv-button[emphasis=high][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=high][danger]:not([danger=false]):focus-visible,nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium]:hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium]:active{background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[emphasis=medium]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=medium][active]:not([active=false]){background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium][danger]:not([danger=false]){background:var(--components-button-destructive-medium-background);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):hover{background:var(--components-button-destructive-medium-background-hover);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text-hover)}nv-button[emphasis=medium][danger]:not([danger=false]):focus,nv-button[emphasis=medium][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible,nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=low][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low][danger]:not([danger=false]){background:var(--components-button-destructive-low-background);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):hover{background:var(--components-button-destructive-low-background-hover);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text-hover)}nv-button[emphasis=low][danger]:not([danger=false]):focus,nv-button[emphasis=low][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=low][danger]:not([danger=false]):focus-visible,nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[emphasis=lower]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=lower][active]:not([active=false]){background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower][danger]:not([danger=false]){background:var(--components-button-destructive-lower-background);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):hover{background:var(--components-button-destructive-lower-background-hover);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text-hover)}nv-button[emphasis=lower][danger]:not([danger=false]):focus,nv-button[emphasis=lower][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible,nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[fluid]:not([fluid=false]){width:100%}nv-button[loading]:not([loading=false]) [slot=leading-icon]{display:none}";
+const nvButtonCss = "nv-button{text-decoration:none;display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;transition:background-color 150ms ease-out;user-select:none;cursor:pointer;height:fit-content;width:fit-content}nv-button[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-button[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-button[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-button[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-button[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-button[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-button[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-button[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-button[emphasis=high]{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high]:hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high]:active{background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=high][active]:not([active=false]){background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high][danger]:not([danger=false]){background:var(--components-button-destructive-high-background);border:1px solid transparent;color:var(--components-button-destructive-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):hover{background:var(--components-button-destructive-high-background-hover);border:1px solid transparent;color:var(--components-button-destructive-high-text-hover)}nv-button[emphasis=high][danger]:not([danger=false]):focus,nv-button[emphasis=high][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=high][danger]:not([danger=false]):focus-visible,nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium]:hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium]:active{background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[emphasis=medium]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=medium][active]:not([active=false]){background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium][danger]:not([danger=false]){background:var(--components-button-destructive-medium-background);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):hover{background:var(--components-button-destructive-medium-background-hover);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text-hover)}nv-button[emphasis=medium][danger]:not([danger=false]):focus,nv-button[emphasis=medium][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible,nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=low][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low][danger]:not([danger=false]){background:var(--components-button-destructive-low-background);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):hover{background:var(--components-button-destructive-low-background-hover);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text-hover)}nv-button[emphasis=low][danger]:not([danger=false]):focus,nv-button[emphasis=low][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=low][danger]:not([danger=false]):focus-visible,nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[emphasis=lower]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=lower][active]:not([active=false]){background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower][danger]:not([danger=false]){background:var(--components-button-destructive-lower-background);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):hover{background:var(--components-button-destructive-lower-background-hover);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text-hover)}nv-button[emphasis=lower][danger]:not([danger=false]):focus,nv-button[emphasis=lower][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible,nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[fluid]:not([fluid=false]){width:100%}nv-button[loading]:not([loading=false]) [slot=leading-icon]{display:none}";
 const NvButtonStyle0 = nvButtonCss;
 const NvButton = class {

package/dist/esm/nv-button.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-button.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,~~y1TAAy1T~~,CAAC;~~AAC92T~~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","names":[],"sources":["src/components/nv-button/styles/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"./mixins\" as ;\n\n// Make sure to update nv-button class in the tailwind-components.scss file when\n// you add new styles or change the structure here.\nnv-button {\n @include root-styles();\n\n @each $size in $sizes {\n &[size=\"#{$size}\"] {\n @include size-styles($size);\n }\n }\n\n @each $emphasis in $emphases {\n &[emphasis=\"#{$emphasis}\"] {\n @include emphasis-styles($emphasis);\n\n &[active]:not([active=\"false\"]) {\n @include active-styles($emphasis);\n }\n\n &[danger]:not([danger=\"false\"]) {\n @include danger-styles($emphasis);\n }\n }\n }\n\n &[fluid]:not([fluid=\"false\"]) {\n @include fluid-styles();\n }\n\n &[loading]:not([loading=\"false\"]) {\n [slot=\"leading-icon\"] {\n display: none;\n }\n }\n}\n","import {\n Component,\n Listen,\n Host,\n h,\n Prop,\n AttachInternals,\n Element,\n Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/\n @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n /\n@Component({\n tag: 'nv-button',\n shadow: false,\n formAssociated: true,\n styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n @AttachInternals() internals: ElementInternals;\n @Element() el: HTMLNvButtonElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Determines how large or small the button appears, 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 button's emphasis to make it more or less visually prominent\n * to users. Use this to draw attention to important actions or reduce focus\n * on less critical ones\n /\n @Prop({ reflect: true })\n readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n /\n Use this prop to highlight the button when it represents the current page\n * or active selection. This helps users understand their navigation context.\n /\n @Prop({ reflect: true })\n readonly active: boolean = false;\n\n /\n Applies styling that visually indicates the button represents a dangerous\n * action.\n /\n @Prop({ reflect: true })\n readonly danger: boolean = false;\n\n /\n Set this to true to show a spinner on the button, letting users know that\n * their action is being processed. It helps improve user experience by\n * indicating ongoing activities.\n /\n @Prop({ reflect: true, mutable: true })\n loading: boolean = false;\n\n /\n Disables the button, preventing user interaction.\n /\n @Prop({ reflect: true, mutable: true })\n disabled: boolean = false;\n\n /\n Allows the button to stretch and fill the entire width of its container.\n /\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n /\n Sets the button type to control its function in forms. Use 'submit' to send\n * form data, 'reset' to clear the form, or 'button' for a standard button\n * that doesn't interact with form submission by default.\n /\n @Prop({ reflect: true })\n readonly type: `${ButtonType}` = 'button';\n\n /\n Sets the form associated with the button in case the (submit) button is not a child of a form.\n * Matches the native HTML button 'form' attribute behavior.\n /\n @Prop({ reflect: true })\n readonly form: string;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles button click events, managing form actions and disabled states.\n * Prevents default behavior when button is disabled or loading, and\n * processes form submissions/resets when appropriate.\n * @param {Event} event - The click event.\n /\n private handleButtonClick = (event: Event): void => {\n if (this.loading \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (\n this.type !== ButtonType.Button &&\n (this.form \|\| this.internals?.form)\n ) {\n this.processFormAction();\n } else if (this.form && this.type === ButtonType.Button) {\n console.warn(\n 'Button has a form id but is not of type submit or reset so no form action will be processed.',\n `Button:`,\n this.el,\n );\n }\n };\n\n /\n Processes form-related actions by finding the associated form element\n * and triggering the appropriate action (submit/reset) based on button type.\n * Falls back to ElementInternals form if no explicit form ID is provided.\n /\n private processFormAction = (): void => {\n const formElement = this.form\n ? (document.getElementById(this.form) as HTMLFormElement)\n : this.internals?.form;\n\n if (!formElement) {\n console.warn(\n 'No form element found.',\n `Form ID: ${this.form \|\| 'Not provided'}`,\n `Internals form:`,\n this.internals?.form,\n );\n return;\n }\n\n switch (this.type) {\n case ButtonType.Submit:\n formElement.requestSubmit();\n break;\n case ButtonType.Reset:\n formElement.reset();\n break;\n }\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.el.click();\n }\n }\n\n @Listen('touchstart', { passive: false })\n handleTouchStart(event: TouchEvent) {\n if (event.touches.length > 1) return;\n event.preventDefault();\n this.el.click();\n }\n\n //#endregion EVENTS\n /************************************************************************/\n //#region WATCHERS\n\n @Watch('loading')\n handleLoadingChange(loading: boolean) {\n this.loading = loading;\n this.disabled = loading;\n }\n\n @Watch('disabled')\n handleDisabledChange(disabled: boolean) {\n if (this.loading) {\n this.disabled = this.loading;\n } else {\n this.disabled = disabled;\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.loading) {\n this.disabled = this.loading;\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\n {this.loading && (\n <nv-loader\n size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n ></nv-loader>\n )}\n\n <slot name=\"leading-icon\"></slot>\n <slot></slot>\n <slot name=\"trailing-icon\"></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-button.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,g4TAAg4T,CAAC;AACr5T,uBAAe,WAAW;;MCuBb,QAAQ;IANrB;;;;;;;;;;;;;;;;QAmBW,SAAI,GAAoB,IAAI,CAAC;;;;;;QAQ7B,aAAQ,GAAwB,MAAM,CAAC;;;;;QAOvC,WAAM,GAAY,KAAK,CAAC;;;;;QAOxB,WAAM,GAAY,KAAK,CAAC;;;;;;QAQjC,YAAO,GAAY,KAAK,CAAC;;;;QAMzB,aAAQ,GAAY,KAAK,CAAC;;;;QAMjB,UAAK,GAAY,KAAK,CAAC;;;;;;QAQvB,SAAI,GAAoB,QAAQ,CAAC;;;;;;;;;;QAmBlC,sBAAiB,GAAG,CAAC,KAAY;;YACvC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IACE,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM;iBAC9B,IAAI,CAAC,IAAI,KAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CAAA,CAAC,EACnC;gBACA,IAAI,CAAC,iBAAiB,EAAE,CAAC;aAC1B;iBAAM,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM,EAAE;gBACvD,OAAO,CAAC,IAAI,CACV,8FAA8F,EAC9F,SAAS,EACT,IAAI,CAAC,EAAE,CACR,CAAC;aACH;SACF,CAAC;;;;;;QAOM,sBAAiB,GAAG;;YAC1B,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI;kBACxB,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAqB;kBACvD,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CAAC;YAEzB,IAAI,CAAC,WAAW,EAAE;gBAChB,OAAO,CAAC,IAAI,CACV,wBAAwB,EACxB,YAAY,IAAI,CAAC,IAAI,IAAI,cAAc,EAAE,EACzC,iBAAiB,EACjB,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CACrB,CAAC;gBACF,OAAO;aACR;YAED,QAAQ,IAAI,CAAC,IAAI;gBACf,KAAK,UAAU,CAAC,MAAM;oBACpB,WAAW,CAAC,aAAa,EAAE,CAAC;oBAC5B,MAAM;gBACR,KAAK,UAAU,CAAC,KAAK;oBACnB,WAAW,CAAC,KAAK,EAAE,CAAC;oBACpB,MAAM;aACT;SACF,CAAC;KAuEH;;;;IAhEC,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;SACjB;KACF;IAGD,gBAAgB,CAAC,KAAiB;QAChC,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO;QACrC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;KACjB;;;;IAOD,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;KACzB;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;SAC9B;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B;KACF;;;;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;SAC9B;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAC7D,IAAI,CAAC,OAAO,KACX,kEACE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,GACvC,CACd,EAED,6DAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,8DAAa,EACb,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC7B,EACP;KACH;;;;;;;;;;;;","names":[],"sources":["src/components/nv-button/styles/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"./mixins\" as ;\n\n// Make sure to update nv-button class in the tailwind-components.scss file when\n// you add new styles or change the structure here.\nnv-button {\n @include root-styles();\n\n @each $size in $sizes {\n &[size=\"#{$size}\"] {\n @include size-styles($size);\n }\n }\n\n @each $emphasis in $emphases {\n &[emphasis=\"#{$emphasis}\"] {\n @include emphasis-styles($emphasis);\n\n &[active]:not([active=\"false\"]) {\n @include active-styles($emphasis);\n }\n\n &[danger]:not([danger=\"false\"]) {\n @include danger-styles($emphasis);\n }\n }\n }\n\n &[fluid]:not([fluid=\"false\"]) {\n @include fluid-styles();\n }\n\n &[loading]:not([loading=\"false\"]) {\n [slot=\"leading-icon\"] {\n display: none;\n }\n }\n}\n","import {\n Component,\n Listen,\n Host,\n h,\n Prop,\n AttachInternals,\n Element,\n Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/\n @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n /\n@Component({\n tag: 'nv-button',\n shadow: false,\n formAssociated: true,\n styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n @AttachInternals() internals: ElementInternals;\n @Element() el: HTMLNvButtonElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Determines how large or small the button appears, 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 button's emphasis to make it more or less visually prominent\n * to users. Use this to draw attention to important actions or reduce focus\n * on less critical ones\n /\n @Prop({ reflect: true })\n readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n /\n Use this prop to highlight the button when it represents the current page\n * or active selection. This helps users understand their navigation context.\n /\n @Prop({ reflect: true })\n readonly active: boolean = false;\n\n /\n Applies styling that visually indicates the button represents a dangerous\n * action.\n /\n @Prop({ reflect: true })\n readonly danger: boolean = false;\n\n /\n Set this to true to show a spinner on the button, letting users know that\n * their action is being processed. It helps improve user experience by\n * indicating ongoing activities.\n /\n @Prop({ reflect: true, mutable: true })\n loading: boolean = false;\n\n /\n Disables the button, preventing user interaction.\n /\n @Prop({ reflect: true, mutable: true })\n disabled: boolean = false;\n\n /\n Allows the button to stretch and fill the entire width of its container.\n /\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n /\n Sets the button type to control its function in forms. Use 'submit' to send\n * form data, 'reset' to clear the form, or 'button' for a standard button\n * that doesn't interact with form submission by default.\n /\n @Prop({ reflect: true })\n readonly type: `${ButtonType}` = 'button';\n\n /\n Sets the form associated with the button in case the (submit) button is not a child of a form.\n * Matches the native HTML button 'form' attribute behavior.\n /\n @Prop({ reflect: true })\n readonly form: string;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles button click events, managing form actions and disabled states.\n * Prevents default behavior when button is disabled or loading, and\n * processes form submissions/resets when appropriate.\n * @param {Event} event - The click event.\n /\n private handleButtonClick = (event: Event): void => {\n if (this.loading \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (\n this.type !== ButtonType.Button &&\n (this.form \|\| this.internals?.form)\n ) {\n this.processFormAction();\n } else if (this.form && this.type === ButtonType.Button) {\n console.warn(\n 'Button has a form id but is not of type submit or reset so no form action will be processed.',\n `Button:`,\n this.el,\n );\n }\n };\n\n /\n Processes form-related actions by finding the associated form element\n * and triggering the appropriate action (submit/reset) based on button type.\n * Falls back to ElementInternals form if no explicit form ID is provided.\n /\n private processFormAction = (): void => {\n const formElement = this.form\n ? (document.getElementById(this.form) as HTMLFormElement)\n : this.internals?.form;\n\n if (!formElement) {\n console.warn(\n 'No form element found.',\n `Form ID: ${this.form \|\| 'Not provided'}`,\n `Internals form:`,\n this.internals?.form,\n );\n return;\n }\n\n switch (this.type) {\n case ButtonType.Submit:\n formElement.requestSubmit();\n break;\n case ButtonType.Reset:\n formElement.reset();\n break;\n }\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.el.click();\n }\n }\n\n @Listen('touchstart', { passive: false })\n handleTouchStart(event: TouchEvent) {\n if (event.touches.length > 1) return;\n event.preventDefault();\n this.el.click();\n }\n\n //#endregion EVENTS\n /************************************************************************/\n //#region WATCHERS\n\n @Watch('loading')\n handleLoadingChange(loading: boolean) {\n this.loading = loading;\n this.disabled = loading;\n }\n\n @Watch('disabled')\n handleDisabledChange(disabled: boolean) {\n if (this.loading) {\n this.disabled = this.loading;\n } else {\n this.disabled = disabled;\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.loading) {\n this.disabled = this.loading;\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\n {this.loading && (\n <nv-loader\n size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n ></nv-loader>\n )}\n\n <slot name=\"leading-icon\"></slot>\n <slot></slot>\n <slot name=\"trailing-icon\"></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/esm/nv-buttongroup.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a1936cd0.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-dc2723f3.js';
 /**
  * Utility functions for nv-buttongroup.

package/dist/esm/nv-calendar.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-a1936cd0.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-dc2723f3.js';
 import { C as CUSTOM_DAY_NAMES, i as CUSTOM_MONTH_NAMES, W as WEEK_ABBREVIATIONS } from './constants-69bafca2.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-1789f0cf.js';

package/dist/esm/nv-col.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-a1936cd0.js';
+import { r as registerInstance, h, H as Host } from './index-dc2723f3.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 const nvColCss = "nv-col{display:block;flex:1 1 0%;padding-left:calc(var(--spacing-4) / 2);padding-right:calc(var(--spacing-4) / 2)}nv-col[class*=w-]{flex:none}nv-col.w-1\\/12{width:calc(100% * 1 / 12)}nv-col.w-2\\/12{width:calc(100% * 2 / 12)}nv-col.w-3\\/12{width:calc(100% * 3 / 12)}nv-col.w-4\\/12{width:calc(100% * 4 / 12)}nv-col.w-5\\/12{width:calc(100% * 5 / 12)}nv-col.w-6\\/12{width:calc(100% * 6 / 12)}nv-col.w-7\\/12{width:calc(100% * 7 / 12)}nv-col.w-8\\/12{width:calc(100% * 8 / 12)}nv-col.w-9\\/12{width:calc(100% * 9 / 12)}nv-col.w-10\\/12{width:calc(100% * 10 / 12)}nv-col.w-11\\/12{width:calc(100% * 11 / 12)}nv-col.w-12\\/12{width:calc(100% * 12 / 12)}";