npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.0.0-beta.31 → 3.0.0-beta.34 - Mend

@nova-design-system/nova-webcomponents 3.0.0-beta.31 → 3.0.0-beta.34

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 (452) hide show

package/dist/cjs/nv-iconbutton.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-72b8a9ad.js');
+const index = require('./index-ddc37f87.js');
 const clsx = require('./clsx-fc789adc.js');
 const nvIconbuttonCss = "nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:500;font-family:\"TT Norms Pro\", sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:var(--button-xs-icon-button-padding);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-iconbutton.size-sm{padding:var(--button-sm-icon-button-padding);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-iconbutton.size-md{padding:var(--button-md-icon-button-padding);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-iconbutton.size-lg{padding:var(--button-lg-icon-button-padding);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-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.emphasis-high:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.emphasis-low:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}";
@@ -70,7 +70,7 @@ const NvIconbutton = class {
          */
         this.handleClick = (event) => {
             var _a, _b, _c, _d;
-            if (this.loading || this.disabled) {
+            if (this.disabled) {
                 event.preventDefault();
                 return;
             }
@@ -109,7 +109,7 @@ const NvIconbutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '7d785e95270a8ebcf303a345a887005774295ee6', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: '028836989901ce6f625f325d368c661b31477e62', size: this.size }), !this.loading && index.h("nv-icon", { key: '5184638cc9dd4550c65eca5b2492806e5e77e43e', name: this.name, size: this.size }), index.h("slot", { key: '36ab315cb2ac6741c4debb5bfa84eb2e05e3abc8' })));
+        return (index.h(index.Host, { key: 'abbd417169f29ce6616909c79b2f4162943791d8', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: 'd933f2ada3fd2b01361f3508af9201dcde9d3f56', size: this.size }), !this.loading && index.h("nv-icon", { key: 'a60298b06f4ea8b4837ad8a46c2ad0adc411fc75', name: this.name, size: this.size }), index.h("slot", { key: 'b19a111bb5304ac176eb834a661b2324f12b57e7' })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-iconbutton.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-iconbutton.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,8nJAA8nJ,CAAC;AACvpJ,2BAAe,eAAe;;MCuBjB,YAAY;IAPzB;;;;;;;;;;;;;;;;QAoBW,SAAI,GAAoB,IAAI,CAAC;;;;;;QAQ7B,aAAQ,GAAwB,MAAM,CAAC;;;;;;;;QAUhD,YAAO,GAAY,KAAK,CAAC;;;;QAMzB,aAAQ,GAAY,KAAK,CAAC;;;;;QAOjB,WAAM,GAAY,KAAK,CAAC;;;;;;QAgBxB,SAAI,GAAoB,QAAQ,CAAC;;;;QAMjC,UAAK,GAAyB,QAAQ,CAAC;;;;;;;;;;QAYxC,gBAAW,GAAG,CAAC,KAAY;;YACjC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAC1B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,aAAa,EAAE,CAAC;aACvC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;gBACzB,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,KAAK,EAAE,CAAC;aAC/B;SACF,CAAC;KA6DH;;;;IAtDC,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,QACEA,QAACC,UAAI,qDACH,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAC,GAAG,EACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,EAC1C,KAAK,EAAEC,SAAI,CACT,MAAM,EACN,QAAQ,IAAI,CAAC,IAAI,EAAE,EACnB,YAAY,IAAI,CAAC,QAAQ,EAAE,EAC3B,IAAI,CAAC,OAAO,IAAI,SAAS,EACzB,SAAS,IAAI,CAAC,KAAK,EAAE,CACtB,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,OAAO,IAAIF,wEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc,EAExD,CAAC,IAAI,CAAC,OAAO,IAAIA,sEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EAE/DA,oEAAa,CACR,EACP;KACH;;;;;;;;;;;;","names":["h","Host","clsx"],"sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants /\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/ Define maps for size-related variables /\n$button-icon-button-padding: (\n \"xs\": var(--button-xs-icon-button-padding),\n \"sm\": var(--button-sm-icon-button-padding),\n \"md\": var(--button-md-icon-button-padding),\n \"lg\": var(--button-lg-icon-button-padding)\n);\n\n$button-gap: (\n \"xs\": var(--button-xs-gap),\n \"sm\": var(--button-sm-gap),\n \"md\": var(--button-md-gap),\n \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n \"xs\": var(--button-xs-border-radius),\n \"sm\": var(--button-sm-border-radius),\n \"md\": var(--button-md-border-radius),\n \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n \"xs\": var(--button-xs-line-height),\n \"sm\": var(--button-sm-line-height),\n \"md\": var(--button-md-line-height),\n \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n \"xs\": var(--button-xs-font-size),\n \"sm\": var(--button-sm-font-size),\n \"md\": var(--button-md-font-size),\n \"lg\": var(--button-lg-font-size)\n);\n\n/ Define maps for emphasis-related variables /\n$components-button-background: (\n \"high\": var(--components-button-high-background),\n \"medium\": var(--components-button-medium-background),\n \"low\": var(--components-button-low-background),\n \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n \"high\": var(--components-button-high-border),\n \"medium\": var(--components-button-medium-border),\n \"low\": var(--components-button-low-border),\n \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n \"high\": var(--components-button-high-text),\n \"medium\": var(--components-button-medium-text),\n \"low\": var(--components-button-low-text),\n \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n \"high\": var(--components-button-high-background-hover),\n \"medium\": var(--components-button-medium-background-hover),\n \"low\": var(--components-button-low-background-hover),\n \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n \"high\": var(--components-button-high-text-hover),\n \"medium\": var(--components-button-medium-text-hover),\n \"low\": var(--components-button-low-text-hover),\n \"lower\": var(--components-button-lower-text-hover)\n);\n\n$components-button-icon: (\n \"high\": var(--components-button-high-icon),\n \"medium\": var(--components-button-medium-icon),\n \"low\": var(--components-button-low-icon),\n \"lower\": var(--components-button-lower-icon)\n);\n\n@mixin root-styles() {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n font-style: normal;\n font-weight: 500;\n font-family: \"TT Norms Pro\", sans-serif;\n transition: background-color 150ms ease-out;\n height: fit-content;\n width: fit-content;\n}\n\n@mixin size-styles($size) {\n padding: map.get($button-icon-button-padding, $size);\n gap: map.get($button-gap, $size);\n border-radius: map.get($button-border-radius, $size);\n line-height: map.get($button-line-height, $size);\n font-size: map.get($button-font-size, $size);\n}\n\n@mixin emphasis-styles($emphasis) {\n background: map.get($components-button-background, $emphasis);\n border: 1px solid map.get($components-button-border, $emphasis);\n color: map.get($components-button-text, $emphasis);\n\n &:hover {\n background: map.get($components-button-background-hover, $emphasis);\n color: map.get($components-button-text-hover, $emphasis);\n }\n\n @include focus-ring();\n\n &:disabled {\n background: map.get($components-button-background, $emphasis);\n color: map.get($components-button-text, $emphasis);\n opacity: 0.5;\n cursor: not-allowed;\n box-shadow: none;\n }\n\n & nv-icon > svg {\n color: map.get($components-button-icon, $emphasis);\n }\n}\n\nnv-iconbutton {\n &.root {\n @include root-styles();\n }\n\n @each $size in $button-sizes {\n &.size-#{$size} {\n @include size-styles($size);\n }\n }\n\n @each $emphasis in $button-emphasis {\n &.emphasis-#{$emphasis} {\n @include emphasis-styles($emphasis);\n }\n }\n\n &.loading {\n [slot=\"leading-icon\"] {\n display: none;\n }\n }\n\n &.shape-rounded {\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n AttachInternals,\n Element,\n Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/\n @slot default - Content of the button.\n /\n@Component({\n tag: 'nv-iconbutton',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-iconbutton.scss',\n scoped: false,\n})\nexport class NvIconbutton {\n @AttachInternals() internals: ElementInternals;\n @Element() el: HTMLNvIconbuttonElement;\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 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. The icon is not displayed when the button\n * is loading. Also, the button is disabled. If you want to disable the\n * button, it is not possible. It is automatically disabled when loading.\n /\n @Prop({ reflect: true, mutable: true })\n loading: boolean = false;\n\n /\n Disables the button, preventing user interaction.\n /\n @Prop({ mutable: true, reflect: true })\n disabled: boolean = false;\n\n /\n Makes the button look active when it’s within a compatible component\n * like a button group.\n /\n @Prop({ reflect: true })\n readonly active: boolean = false;\n\n /\n Choose the icon you want to display. This also sets the aria-label for\n * improved accessibility, helping users who rely on screen readers.\n * The icon is not displayed when the button is loading.\n /\n @Prop({ reflect: true })\n readonly name: `${IconName}` \| string;\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 shape of the button. Choose between square and rounded.\n /\n @Prop({ reflect: true })\n readonly shape: 'square' \| 'rounded' = 'square';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles form-related actions when the button is clicked.\n * - Submits the form if the button type is 'submit'.\n * - Resets the form if the button type is 'reset'.\n * @param {Event} event - The click event.\n /\n private handleClick = (event: Event) => {\n if (this.loading \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (this.type === 'submit') {\n this.internals?.form?.requestSubmit();\n }\n if (this.type === 'reset') {\n this.internals?.form?.reset();\n }\n };\n\n //#endregion METHODS\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\n role=\"button\"\n type={this.type}\n tabindex=\"0\"\n disabled={this.disabled ? true : undefined}\n class={clsx(\n 'root',\n `size-${this.size}`,\n `emphasis-${this.emphasis}`,\n this.loading && 'loading',\n `shape-${this.shape}`,\n )}\n onClick={this.handleClick}\n >\n {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n <slot></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-iconbutton.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,8nJAA8nJ,CAAC;AACvpJ,2BAAe,eAAe;;MC4BjB,YAAY;IAPzB;;;;;;;;;;;;;;;;QAoBW,SAAI,GAAoB,IAAI,CAAC;;;;;;QAQ7B,aAAQ,GAAwB,MAAM,CAAC;;;;;;;;QAUhD,YAAO,GAAY,KAAK,CAAC;;;;QAMzB,aAAQ,GAAY,KAAK,CAAC;;;;;QAOjB,WAAM,GAAY,KAAK,CAAC;;;;;;QAgBxB,SAAI,GAAoB,QAAQ,CAAC;;;;QAMjC,UAAK,GAAyB,QAAQ,CAAC;;;;;;;;;;QAYxC,gBAAW,GAAG,CAAC,KAAY;;YACjC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAC1B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,aAAa,EAAE,CAAC;aACvC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;gBACzB,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,KAAK,EAAE,CAAC;aAC/B;SACF,CAAC;KA6DH;;;;IAtDC,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,QACEA,QAACC,UAAI,qDACH,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAC,GAAG,EACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,EAC1C,KAAK,EAAEC,SAAI,CACT,MAAM,EACN,QAAQ,IAAI,CAAC,IAAI,EAAE,EACnB,YAAY,IAAI,CAAC,QAAQ,EAAE,EAC3B,IAAI,CAAC,OAAO,IAAI,SAAS,EACzB,SAAS,IAAI,CAAC,KAAK,EAAE,CACtB,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,OAAO,IAAIF,wEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc,EAExD,CAAC,IAAI,CAAC,OAAO,IAAIA,sEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EAE/DA,oEAAa,CACR,EACP;KACH;;;;;;;;;;;;","names":["h","Host","clsx"],"sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants /\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/ Define maps for size-related variables /\n$button-icon-button-padding: (\n \"xs\": var(--button-xs-icon-button-padding),\n \"sm\": var(--button-sm-icon-button-padding),\n \"md\": var(--button-md-icon-button-padding),\n \"lg\": var(--button-lg-icon-button-padding)\n);\n\n$button-gap: (\n \"xs\": var(--button-xs-gap),\n \"sm\": var(--button-sm-gap),\n \"md\": var(--button-md-gap),\n \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n \"xs\": var(--button-xs-border-radius),\n \"sm\": var(--button-sm-border-radius),\n \"md\": var(--button-md-border-radius),\n \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n \"xs\": var(--button-xs-line-height),\n \"sm\": var(--button-sm-line-height),\n \"md\": var(--button-md-line-height),\n \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n \"xs\": var(--button-xs-font-size),\n \"sm\": var(--button-sm-font-size),\n \"md\": var(--button-md-font-size),\n \"lg\": var(--button-lg-font-size)\n);\n\n/ Define maps for emphasis-related variables /\n$components-button-background: (\n \"high\": var(--components-button-high-background),\n \"medium\": var(--components-button-medium-background),\n \"low\": var(--components-button-low-background),\n \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n \"high\": var(--components-button-high-border),\n \"medium\": var(--components-button-medium-border),\n \"low\": var(--components-button-low-border),\n \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n \"high\": var(--components-button-high-text),\n \"medium\": var(--components-button-medium-text),\n \"low\": var(--components-button-low-text),\n \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n \"high\": var(--components-button-high-background-hover),\n \"medium\": var(--components-button-medium-background-hover),\n \"low\": var(--components-button-low-background-hover),\n \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n \"high\": var(--components-button-high-text-hover),\n \"medium\": var(--components-button-medium-text-hover),\n \"low\": var(--components-button-low-text-hover),\n \"lower\": var(--components-button-lower-text-hover)\n);\n\n$components-button-icon: (\n \"high\": var(--components-button-high-icon),\n \"medium\": var(--components-button-medium-icon),\n \"low\": var(--components-button-low-icon),\n \"lower\": var(--components-button-lower-icon)\n);\n\n@mixin root-styles() {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n font-style: normal;\n font-weight: 500;\n font-family: \"TT Norms Pro\", sans-serif;\n transition: background-color 150ms ease-out;\n height: fit-content;\n width: fit-content;\n}\n\n@mixin size-styles($size) {\n padding: map.get($button-icon-button-padding, $size);\n gap: map.get($button-gap, $size);\n border-radius: map.get($button-border-radius, $size);\n line-height: map.get($button-line-height, $size);\n font-size: map.get($button-font-size, $size);\n}\n\n@mixin emphasis-styles($emphasis) {\n background: map.get($components-button-background, $emphasis);\n border: 1px solid map.get($components-button-border, $emphasis);\n color: map.get($components-button-text, $emphasis);\n\n &:hover {\n background: map.get($components-button-background-hover, $emphasis);\n color: map.get($components-button-text-hover, $emphasis);\n }\n\n @include focus-ring();\n\n &:disabled {\n background: map.get($components-button-background, $emphasis);\n color: map.get($components-button-text, $emphasis);\n opacity: 0.5;\n cursor: not-allowed;\n box-shadow: none;\n }\n\n & nv-icon > svg {\n color: map.get($components-button-icon, $emphasis);\n }\n}\n\nnv-iconbutton {\n &.root {\n @include root-styles();\n }\n\n @each $size in $button-sizes {\n &.size-#{$size} {\n @include size-styles($size);\n }\n }\n\n @each $emphasis in $button-emphasis {\n &.emphasis-#{$emphasis} {\n @include emphasis-styles($emphasis);\n }\n }\n\n &.loading {\n [slot=\"leading-icon\"] {\n display: none;\n }\n }\n\n &.shape-rounded {\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n AttachInternals,\n Element,\n Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n ButtonSize,\n ButtonEmphasis,\n ButtonType,\n IconButtonShape,\n} from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/\n @slot default - Content of the button.\n /\n@Component({\n tag: 'nv-iconbutton',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-iconbutton.scss',\n scoped: false,\n})\nexport class NvIconbutton {\n @AttachInternals() internals: ElementInternals;\n @Element() el: HTMLNvIconbuttonElement;\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 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. The icon is not displayed when the button\n * is loading. Also, the button is disabled. If you want to disable the\n * button, it is not possible. It is automatically disabled when loading.\n /\n @Prop({ reflect: true, mutable: true })\n loading: boolean = false;\n\n /\n Disables the button, preventing user interaction.\n /\n @Prop({ mutable: true, reflect: true })\n disabled: boolean = false;\n\n /\n Makes the button look active when it’s within a compatible component\n * like a button group.\n /\n @Prop({ reflect: true })\n readonly active: boolean = false;\n\n /\n Choose the icon you want to display. This also sets the aria-label for\n * improved accessibility, helping users who rely on screen readers.\n * The icon is not displayed when the button is loading.\n /\n @Prop({ reflect: true })\n readonly name: `${IconName}` \| string;\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 shape of the button. Choose between square and rounded.\n /\n @Prop({ reflect: true })\n readonly shape: `${IconButtonShape}` = 'square';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles form-related actions when the button is clicked.\n * - Submits the form if the button type is 'submit'.\n * - Resets the form if the button type is 'reset'.\n * @param {Event} event - The click event.\n /\n private handleClick = (event: Event) => {\n if (this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (this.type === 'submit') {\n this.internals?.form?.requestSubmit();\n }\n if (this.type === 'reset') {\n this.internals?.form?.reset();\n }\n };\n\n //#endregion METHODS\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\n role=\"button\"\n type={this.type}\n tabindex=\"0\"\n disabled={this.disabled ? true : undefined}\n class={clsx(\n 'root',\n `size-${this.size}`,\n `emphasis-${this.emphasis}`,\n this.loading && 'loading',\n `shape-${this.shape}`,\n )}\n onClick={this.handleClick}\n >\n {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n <slot></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/cjs/nv-loader.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-72b8a9ad.js');
+const index = require('./index-ddc37f87.js');
 const clsx = require('./clsx-fc789adc.js');
 const nvLoaderCss = "@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}nv-loader{display:inline-block;position:relative;aspect-ratio:1/1;border-radius:9999px;color:inherit}nv-loader.size-xs{width:var(--loader-size-xs);height:var(--loader-size-xs)}nv-loader.size-xs::before,nv-loader.size-xs::after{content:\" \";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xs::before{content:\" \";border:calc(var(--loader-size-xs) / 10) solid;opacity:0.3}nv-loader.size-xs::after{content:\" \";border-top:calc(var(--loader-size-xs) / 10) solid transparent;border-left:calc(var(--loader-size-xs) / 10) solid transparent;border-right:calc(var(--loader-size-xs) / 10) solid transparent;border-bottom:calc(var(--loader-size-xs) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-sm{width:var(--loader-size-sm);height:var(--loader-size-sm)}nv-loader.size-sm::before,nv-loader.size-sm::after{content:\" \";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-sm::before{content:\" \";border:calc(var(--loader-size-sm) / 10) solid;opacity:0.3}nv-loader.size-sm::after{content:\" \";border-top:calc(var(--loader-size-sm) / 10) solid transparent;border-left:calc(var(--loader-size-sm) / 10) solid transparent;border-right:calc(var(--loader-size-sm) / 10) solid transparent;border-bottom:calc(var(--loader-size-sm) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-md{width:var(--loader-size-md);height:var(--loader-size-md)}nv-loader.size-md::before,nv-loader.size-md::after{content:\" \";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-md::before{content:\" \";border:calc(var(--loader-size-md) / 10) solid;opacity:0.3}nv-loader.size-md::after{content:\" \";border-top:calc(var(--loader-size-md) / 10) solid transparent;border-left:calc(var(--loader-size-md) / 10) solid transparent;border-right:calc(var(--loader-size-md) / 10) solid transparent;border-bottom:calc(var(--loader-size-md) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-lg{width:var(--loader-size-lg);height:var(--loader-size-lg)}nv-loader.size-lg::before,nv-loader.size-lg::after{content:\" \";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-lg::before{content:\" \";border:calc(var(--loader-size-lg) / 10) solid;opacity:0.3}nv-loader.size-lg::after{content:\" \";border-top:calc(var(--loader-size-lg) / 10) solid transparent;border-left:calc(var(--loader-size-lg) / 10) solid transparent;border-right:calc(var(--loader-size-lg) / 10) solid transparent;border-bottom:calc(var(--loader-size-lg) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-xl{width:var(--loader-size-xl);height:var(--loader-size-xl)}nv-loader.size-xl::before,nv-loader.size-xl::after{content:\" \";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xl::before{content:\" \";border:calc(var(--loader-size-xl) / 10) solid;opacity:0.3}nv-loader.size-xl::after{content:\" \";border-top:calc(var(--loader-size-xl) / 10) solid transparent;border-left:calc(var(--loader-size-xl) / 10) solid transparent;border-right:calc(var(--loader-size-xl) / 10) solid transparent;border-bottom:calc(var(--loader-size-xl) / 10) solid;animation:rotation 1s linear infinite}nv-loader.color-brand::before{border-color:var(--components-loader-brand-background);opacity:1}nv-loader.color-brand::after{border-bottom-color:var(--components-loader-brand-foreground)}nv-loader.color-white::before{border-color:var(--components-loader-white-background);opacity:1}nv-loader.color-white::after{border-bottom-color:var(--components-loader-white-foreground)}";
@@ -25,7 +25,7 @@ const NvLoader = class {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (index.h(index.Host, { key: '9d70fed6bfe41c8e1a87bd7eb2d83a1bb6af69ab', class: clsx.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (index.h(index.Host, { key: '0fdf2ee8bad6bab413c729f7dfcf516f5fb46a35', class: clsx.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
 };
 NvLoader.style = NvLoaderStyle0;

package/dist/cjs/nv-menu.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-72b8a9ad.js');
+const index = require('./index-ddc37f87.js');
 const nvMenuCss = "nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-menu{display:inline-block;position:relative}nv-menu:has([fluid]:not([fluid=false])){display:block}nv-menu nv-popover{display:unset}nv-menu nv-popover [data-scope=popover]{background-color:transparent !important;padding:0 !important}nv-menu [slot=content]{padding:var(--menu-contextual-padding-y) var(--menu-contextual-padding-x);border-radius:var(--menu-contextual-radius);gap:var(--menu-contextual-gap-y);background-color:var(--components-menu-contextual-background);border-color:var(--components-menu-contextual-border);display:flex;flex-direction:column}nv-menu nv-menu[open]:not([open=false])>nv-menuitem{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menu hr{display:block;margin:var(--menu-contextual-divider-padding-top) var(--menu-contextual-divider-padding-x) var(--menu-contextual-divider-padding-bottom) var(--menu-contextual-divider-padding-x)}";
 const NvMenuStyle0 = nvMenuCss;
@@ -12,7 +12,6 @@ const NvMenu = class {
         index.registerInstance(this, hostRef);
         this.menuitemSelected = index.createEvent(this, "menuitemSelected", 7);
         this.isHandlingKeyDown = false;
-        this.isHandlingClick = false;
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -52,43 +51,18 @@ const NvMenu = class {
     async close() {
         this.open = false;
     }
-    handleMenuItemSelect(menuItem, event) {
-        // If the element is disabled, stop propagation
-        if (menuItem.hasAttribute('disabled')) {
-            event.stopPropagation();
+    handleMenuItemSelect(event) {
+        if (this.disableCloseOnSelect)
             return;
-        }
-        // Emit the menuitemSelected event for the selected item
-        const itemId = menuItem.id;
-        if (itemId) {
-            this.menuitemSelected.emit({ itemId });
-        }
-        // Prevent event propagation to avoid multiple triggers
-        event.stopPropagation();
-        if (!this.disableCloseOnSelect) {
-            this.open = false;
-        }
-    }
-    handleMenuClick(event) {
-        if (this.isHandlingClick) {
+        if (event.detail.hasSubmenu)
             return;
-        }
-        this.isHandlingClick = true;
-        const target = event.target;
-        const menuItem = target.closest('nv-menuitem');
-        if (menuItem &&
-            menuItem.tagName === 'NV-MENUITEM' &&
-            !menuItem.hasAttribute('has-submenu')) {
-            this.handleMenuItemSelect(menuItem, event);
-        }
-        this.isHandlingClick = false;
+        this.open = false;
     }
     handleKeydown(event) {
         if (!this.open)
             return;
-        if (this.isHandlingKeyDown) {
+        if (this.isHandlingKeyDown)
             return;
-        }
         this.isHandlingKeyDown = true;
         if (event.key === 'ArrowDown' ||
             event.key === 'ArrowUp' ||
@@ -103,17 +77,6 @@ const NvMenu = class {
             this.isHandlingKeyDown = false;
             return;
         }
-        if (event.key === 'Enter') {
-            const activeElement = document.activeElement;
-            if (activeElement &&
-                activeElement.tagName === 'NV-MENUITEM' &&
-                !activeElement.hasAttribute('has-submenu')) {
-                event.preventDefault();
-                this.handleMenuItemSelect(activeElement, event);
-            }
-            this.isHandlingKeyDown = false;
-            return;
-        }
         const menuContent = this.el.querySelector('[slot="content"]');
         const menuItems = Array.from(menuContent.childNodes).filter(item => { var _a; return (_a = item.matches) === null || _a === void 0 ? void 0 : _a.call(item, 'nv-menuitem, nv-menu'); });
         let currentIndex = menuItems.indexOf(document.activeElement);
@@ -197,7 +160,7 @@ const NvMenu = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '23fdff061d4aa8364590e2486c60b26684400a34' }, index.h("slot", { key: '50ff6d6a5b84ad83a9b9deefed42335e663c989d', name: "trigger" }), index.h("nv-popover", { key: 'ee15458289098254b7074452b2c25a32a7e82b3e', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, index.h("slot", { key: 'bccea8f6469c29bad2e764c6628b6a783890d10d', name: "content" }))));
+        return (index.h(index.Host, { key: '2916995a257343bb849c8e64938850e0167d5491' }, index.h("slot", { key: '012e521f58fd4b603f90c4eb6bef29c71e05586e', name: "trigger" }), index.h("nv-popover", { key: '187f89fd4dad78f8ebc99082ad936fced52b81d3', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, index.h("slot", { key: '3d94bcc4a617fd475f3e6057f10e25a3aae772fd', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/nv-menu.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-menu.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/nv-menu/nv-menu.scss?tag=nv-menu","src/components/nv-menu/nv-menu.tsx"],"sourcesContent":["@use \"../nv-menuitem/nv-menuitem\" as nv-menuitem;\n\n@mixin root-styles() {\n display: inline-block;\n position: relative;\n\n &:has([fluid]:not([fluid=\"false\"])) {\n display: block;\n }\n}\n\n@mixin content-styles() {\n padding: var(--menu-contextual-padding-y) \n var(--menu-contextual-padding-x);\n border-radius: var(--menu-contextual-radius);\n gap: var(--menu-contextual-gap-y);\n background-color: var(--components-menu-contextual-background);\n border-color: var(--components-menu-contextual-border);\n display: flex;\n flex-direction: column;\n}\n\n@mixin separator-styles() {\n display: block;\n margin: var(--menu-contextual-divider-padding-top) \n var(--menu-contextual-divider-padding-x) \n var(--menu-contextual-divider-padding-bottom) \n var(--menu-contextual-divider-padding-x) ;\n}\n\nnv-menu {\n @include root-styles();\n\n nv-popover {\n display: unset;\n \n [data-scope=popover]{\n background-color: transparent !important;\n padding: 0 !important;\n }\n }\n\n [slot=\"content\"] {\n @include content-styles();\n }\n\n nv-menu[open]:not([open=\"false\"]) {\n > nv-menuitem {\n @include nv-menuitem.focused-styles();\n }\n }\n\n hr {\n @include separator-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Listen,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport type { MenuitemSelectedEventDetail } from '../nv-menuitem/nv-menuitem';\n\n/*\n @slot trigger - Button to toggle the menu popover.\n * @slot content - Use an <ul></ul> tag for the slot, and place <nv-menuitem> elements inside.\n /\n@Component({\n tag: 'nv-menu',\n styleUrl: 'nv-menu.scss',\n shadow: false,\n})\nexport class NvMenu {\n @Element() el: HTMLNvMenuElement;\n private triggerElement!: HTMLElement;\n private popoverElement!: HTMLNvPopoverElement;\n private isHandlingKeyDown: boolean = false;\n private isHandlingClick: boolean = false;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Use this to toggle the initial visibility of the menu, by default the menu\n * is hidden.\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n Use this if the menu is nested inside another menu. This will prevent the\n * parent menu from closing when the child menu is opened.\n /\n @Prop()\n readonly nested: boolean = false;\n\n /\n Use this to disable the menu from closing automatically when a menu item is\n * selected.\n /\n @Prop()\n readonly disableCloseOnSelect: boolean = false;\n\n /\n Decides where the menu shows up next to the button it’s linked to (above,\n * below, to the sides). If there isn’t enough room, it will adjust its\n * position on the axis to fit on the screen, so users can always see it.\n /\n @Prop()\n readonly placement: Placement = this.nested ? 'right-start' : 'bottom-end';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Opens the menu.\n /\n @Method()\n async show() {\n this.open = true;\n }\n\n /\n Closes the menu.\n /\n @Method()\n async close() {\n this.open = false;\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted from nv-menuitem elements with the corresponding id when the menu\n * item is selected.\n /\n @Event()\n menuitemSelected: EventEmitter<MenuitemSelectedEventDetail>;\n\n private handleMenuItemSelect(menuItem: HTMLElement, event: Event) {\n // If the element is disabled, stop propagation\n if (menuItem.hasAttribute('disabled')) {\n event.stopPropagation();\n return;\n }\n\n // Emit the menuitemSelected event for the selected item\n const itemId = menuItem.id;\n if (itemId) {\n this.menuitemSelected.emit({ itemId });\n }\n\n // Prevent event propagation to avoid multiple triggers\n event.stopPropagation();\n\n if (!this.disableCloseOnSelect) {\n this.open = false;\n }\n }\n\n @Listen('click', { capture: true })\n handleMenuClick(event: MouseEvent) {\n if (this.isHandlingClick) {\n return;\n }\n this.isHandlingClick = true;\n\n const target = event.target as HTMLElement;\n const menuItem = target.closest('nv-menuitem');\n if (\n menuItem &&\n menuItem.tagName === 'NV-MENUITEM' &&\n !menuItem.hasAttribute('has-submenu')\n ) {\n this.handleMenuItemSelect(menuItem, event);\n }\n\n this.isHandlingClick = false;\n }\n\n @Listen('keydown', { passive: false })\n handleKeydown(event: KeyboardEvent) {\n if (!this.open) return;\n\n if (this.isHandlingKeyDown) {\n return;\n }\n this.isHandlingKeyDown = true;\n\n if (\n event.key === 'ArrowDown' \|\|\n event.key === 'ArrowUp' \|\|\n event.key === 'ArrowLeft' \|\|\n event.key === 'ArrowRight' \|\|\n event.key === 'Escape'\n ) {\n event.preventDefault();\n }\n\n if (event.key === 'Escape' && !this.nested) {\n this.close();\n this.triggerElement.focus();\n this.isHandlingKeyDown = false;\n return;\n }\n\n if (event.key === 'Enter') {\n const activeElement = document.activeElement as HTMLNvMenuitemElement;\n if (\n activeElement &&\n activeElement.tagName === 'NV-MENUITEM' &&\n !activeElement.hasAttribute('has-submenu')\n ) {\n event.preventDefault();\n this.handleMenuItemSelect(activeElement, event);\n }\n this.isHandlingKeyDown = false;\n return;\n }\n\n const menuContent = this.el.querySelector('[slot=\"content\"]');\n const menuItems = (\n Array.from(menuContent.childNodes) as Array<\n HTMLNvMenuitemElement \| HTMLNvMenuElement\n >\n ).filter(item => item.matches?.('nv-menuitem, nv-menu'));\n\n let currentIndex = menuItems.indexOf(\n document.activeElement as HTMLNvMenuitemElement,\n );\n if (currentIndex === -1)\n currentIndex = menuItems.indexOf(\n document.activeElement.parentElement as HTMLNvMenuitemElement,\n );\n if (\n currentIndex === -1 &&\n menuItems.find(item => item.matches('nv-menu[open]'))\n ) {\n this.isHandlingKeyDown = false;\n return;\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowUp') {\n menuItems.forEach(item => {\n if (item.matches('nv-menu')) (item as HTMLNvMenuElement).close();\n });\n }\n\n if (event.key === 'ArrowDown') {\n let nextIndex = (currentIndex + 1) % menuItems.length;\n while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {\n nextIndex = (nextIndex + 1) % menuItems.length;\n }\n const nextFocusable = menuItems[nextIndex];\n if (nextFocusable.matches('nv-menuitem')) nextFocusable.focus();\n else if (nextFocusable.matches('nv-menu'))\n nextFocusable.querySelector('nv-menuitem').focus();\n }\n\n if (event.key === 'ArrowUp') {\n let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;\n while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {\n prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;\n }\n const prevFocusable = menuItems[prevIndex];\n if (prevFocusable.matches('nv-menuitem')) prevFocusable.focus();\n else if (prevFocusable.matches('nv-menu'))\n prevFocusable.querySelector('nv-menuitem').focus();\n }\n\n if (event.key === 'ArrowRight') {\n const submenu = menuItems[currentIndex];\n if (!submenu.matches('nv-menu')) {\n this.isHandlingKeyDown = false;\n return;\n }\n\n (submenu as HTMLNvMenuElement).show();\n }\n\n if (event.key === 'ArrowLeft' && this.nested) {\n if (menuItems.find(item => item.matches('nv-menu[open]'))) {\n this.isHandlingKeyDown = false;\n return;\n }\n this.close();\n this.triggerElement.focus();\n }\n\n this.isHandlingKeyDown = false;\n }\n\n @Listen('openChanged')\n handleOpenChanged(event: CustomEvent<boolean>) {\n if (event.target === this.el.querySelector('nv-popover')) {\n this.open = event.detail;\n }\n\n const triggerHasFocus = this.triggerElement === document.activeElement;\n const triggerHasFocusVisible =\n this.triggerElement.matches(':focus-visible');\n\n if (triggerHasFocus && triggerHasFocusVisible) this.focusFirstItem();\n }\n\n private focusFirstItem() {\n const firstButton = this.popoverElement.querySelector('nv-menuitem');\n if (firstButton) {\n requestAnimationFrame(() => firstButton.focus());\n }\n }\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === 'trigger';\n }) as HTMLElement;\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\"></slot>\n\n <nv-popover\n ref={el => (this.popoverElement = el)}\n triggerMode=\"click\"\n triggerElement={this.triggerElement}\n placement={this.placement}\n nested={this.nested}\n open={this.open}\n >\n <slot name=\"content\"></slot>\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-menu.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/nv-menu/nv-menu.scss?tag=nv-menu","src/components/nv-menu/nv-menu.tsx"],"sourcesContent":["@use \"../nv-menuitem/nv-menuitem\" as nv-menuitem;\n\n@mixin root-styles() {\n display: inline-block;\n position: relative;\n\n &:has([fluid]:not([fluid=\"false\"])) {\n display: block;\n }\n}\n\n@mixin content-styles() {\n padding: var(--menu-contextual-padding-y) \n var(--menu-contextual-padding-x);\n border-radius: var(--menu-contextual-radius);\n gap: var(--menu-contextual-gap-y);\n background-color: var(--components-menu-contextual-background);\n border-color: var(--components-menu-contextual-border);\n display: flex;\n flex-direction: column;\n}\n\n@mixin separator-styles() {\n display: block;\n margin: var(--menu-contextual-divider-padding-top) \n var(--menu-contextual-divider-padding-x) \n var(--menu-contextual-divider-padding-bottom) \n var(--menu-contextual-divider-padding-x) ;\n}\n\nnv-menu {\n @include root-styles();\n\n nv-popover {\n display: unset;\n \n [data-scope=popover]{\n background-color: transparent !important;\n padding: 0 !important;\n }\n }\n\n [slot=\"content\"] {\n @include content-styles();\n }\n\n nv-menu[open]:not([open=\"false\"]) {\n > nv-menuitem {\n @include nv-menuitem.focused-styles();\n }\n }\n\n hr {\n @include separator-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Listen,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport type { MenuitemSelectedEventDetail } from '../nv-menuitem/nv-menuitem';\n\n/*\n @slot trigger - Button to toggle the menu popover.\n * @slot content - Use an <ul></ul> tag for the slot, and place <nv-menuitem> elements inside.\n /\n@Component({\n tag: 'nv-menu',\n styleUrl: 'nv-menu.scss',\n shadow: false,\n})\nexport class NvMenu {\n @Element() el: HTMLNvMenuElement;\n private triggerElement!: HTMLElement;\n private popoverElement!: HTMLNvPopoverElement;\n private isHandlingKeyDown: boolean = false;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Use this to toggle the initial visibility of the menu, by default the menu\n * is hidden.\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n Use this if the menu is nested inside another menu. This will prevent the\n * parent menu from closing when the child menu is opened.\n /\n @Prop()\n readonly nested: boolean = false;\n\n /\n Use this to disable the menu from closing automatically when a menu item is\n * selected.\n /\n @Prop()\n readonly disableCloseOnSelect: boolean = false;\n\n /\n Decides where the menu shows up next to the button it’s linked to (above,\n * below, to the sides). If there isn’t enough room, it will adjust its\n * position on the axis to fit on the screen, so users can always see it.\n /\n @Prop()\n readonly placement: Placement = this.nested ? 'right-start' : 'bottom-end';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Opens the menu.\n /\n @Method()\n async show() {\n this.open = true;\n }\n\n /\n Closes the menu.\n /\n @Method()\n async close() {\n this.open = false;\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted from nv-menuitem elements with the corresponding id and name when\n * selected (via click or keyboard). This event listener can be attached to\n * either the nv-menu or the nv-menuitem element.\n /\n @Event()\n menuitemSelected: EventEmitter<MenuitemSelectedEventDetail>;\n\n @Listen('menuitemSelected')\n handleMenuItemSelect(event: CustomEvent<MenuitemSelectedEventDetail>) {\n if (this.disableCloseOnSelect) return;\n if (event.detail.hasSubmenu) return;\n\n this.open = false;\n }\n\n @Listen('keydown', { passive: false })\n handleKeydown(event: KeyboardEvent) {\n if (!this.open) return;\n if (this.isHandlingKeyDown) return;\n\n this.isHandlingKeyDown = true;\n\n if (\n event.key === 'ArrowDown' \|\|\n event.key === 'ArrowUp' \|\|\n event.key === 'ArrowLeft' \|\|\n event.key === 'ArrowRight' \|\|\n event.key === 'Escape'\n ) {\n event.preventDefault();\n }\n\n if (event.key === 'Escape' && !this.nested) {\n this.close();\n this.triggerElement.focus();\n this.isHandlingKeyDown = false;\n return;\n }\n\n const menuContent = this.el.querySelector('[slot=\"content\"]');\n const menuItems = (\n Array.from(menuContent.childNodes) as Array<\n HTMLNvMenuitemElement \| HTMLNvMenuElement\n >\n ).filter(item => item.matches?.('nv-menuitem, nv-menu'));\n\n let currentIndex = menuItems.indexOf(\n document.activeElement as HTMLNvMenuitemElement,\n );\n if (currentIndex === -1)\n currentIndex = menuItems.indexOf(\n document.activeElement.parentElement as HTMLNvMenuitemElement,\n );\n if (\n currentIndex === -1 &&\n menuItems.find(item => item.matches('nv-menu[open]'))\n ) {\n this.isHandlingKeyDown = false;\n return;\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowUp') {\n menuItems.forEach(item => {\n if (item.matches('nv-menu')) (item as HTMLNvMenuElement).close();\n });\n }\n\n if (event.key === 'ArrowDown') {\n let nextIndex = (currentIndex + 1) % menuItems.length;\n while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {\n nextIndex = (nextIndex + 1) % menuItems.length;\n }\n const nextFocusable = menuItems[nextIndex];\n if (nextFocusable.matches('nv-menuitem')) nextFocusable.focus();\n else if (nextFocusable.matches('nv-menu'))\n nextFocusable.querySelector('nv-menuitem').focus();\n }\n\n if (event.key === 'ArrowUp') {\n let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;\n while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {\n prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;\n }\n const prevFocusable = menuItems[prevIndex];\n if (prevFocusable.matches('nv-menuitem')) prevFocusable.focus();\n else if (prevFocusable.matches('nv-menu'))\n prevFocusable.querySelector('nv-menuitem').focus();\n }\n\n if (event.key === 'ArrowRight') {\n const submenu = menuItems[currentIndex];\n if (!submenu.matches('nv-menu')) {\n this.isHandlingKeyDown = false;\n return;\n }\n\n (submenu as HTMLNvMenuElement).show();\n }\n\n if (event.key === 'ArrowLeft' && this.nested) {\n if (menuItems.find(item => item.matches('nv-menu[open]'))) {\n this.isHandlingKeyDown = false;\n return;\n }\n this.close();\n this.triggerElement.focus();\n }\n\n this.isHandlingKeyDown = false;\n }\n\n @Listen('openChanged')\n handleOpenChanged(event: CustomEvent<boolean>) {\n if (event.target === this.el.querySelector('nv-popover')) {\n this.open = event.detail;\n }\n\n const triggerHasFocus = this.triggerElement === document.activeElement;\n const triggerHasFocusVisible =\n this.triggerElement.matches(':focus-visible');\n\n if (triggerHasFocus && triggerHasFocusVisible) this.focusFirstItem();\n }\n\n private focusFirstItem() {\n const firstButton = this.popoverElement.querySelector('nv-menuitem');\n if (firstButton) {\n requestAnimationFrame(() => firstButton.focus());\n }\n }\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === 'trigger';\n }) as HTMLElement;\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\"></slot>\n\n <nv-popover\n ref={el => (this.popoverElement = el)}\n triggerMode=\"click\"\n triggerElement={this.triggerElement}\n placement={this.placement}\n nested={this.nested}\n open={this.open}\n >\n <slot name=\"content\"></slot>\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/cjs/nv-menuitem.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-72b8a9ad.js');
+const index = require('./index-ddc37f87.js');
 const nvMenuitemCss = "nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}";
 const NvMenuitemStyle0 = nvMenuitemCss;
@@ -10,6 +10,7 @@ const NvMenuitemStyle0 = nvMenuitemCss;
 const NvMenuitem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.menuitemSelected = index.createEvent(this, "menuitemSelected", 7);
         /**
          * Disables the item, preventing user interaction.
          */
@@ -19,11 +20,37 @@ const NvMenuitem = class {
          */
         this.hasSubmenu = false;
     }
-    //#endregion PROPERTIES
+    handleMenuItemSelect(event) {
+        // If the element is disabled, stop propagation
+        if (this.disabled) {
+            event.stopPropagation();
+            return;
+        }
+        this.menuitemSelected.emit({
+            id: this.el.id,
+            name: this.name,
+            hasSubmenu: this.hasSubmenu,
+        });
+    }
+    handleClick(event) {
+        this.handleMenuItemSelect(event);
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Enter') {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                activeElement.tagName === 'NV-MENUITEM' &&
+                !activeElement.hasAttribute('has-submenu')) {
+                event.preventDefault();
+                this.handleMenuItemSelect(event);
+            }
+        }
+    }
+    //#endregion EVENTS
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'c2d22d3d9da87cf9397d53bc1d04664f2b2fdaf6', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: '1e058e4ab0d0d8a38e832bbfecc89b68f308c5b3', name: this.icon }), index.h("span", { key: 'c2320e9145f09aa561103e594b8921aa067f50ac', "data-scope": "text" }, index.h("slot", { key: '4783773cfc252c76ff5e23a776cc81b3ddefaa08' })), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: '5ae203ed4236966e3f72e587d047f5d6e3a1ebbd' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: 'a92df958241abeb73584d780777afb5967a45753', name: "chevron-right" })));
+        return (index.h(index.Host, { key: 'a67dc0ea59f24f8e603b85fca99a95727559f749', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: '5f9b024b930199552cbcb25c20b8acb85cb49dc7', name: this.icon }), index.h("span", { key: '096c9c5ea2cc697c7eb4de9c43dff60e06751e89', "data-scope": "text" }, index.h("slot", { key: '87e3815be0751cf1bf4e31dacc3a1658c4d7fdf4' })), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: 'e0bfbf8cb85eab0b935b37963d52ff14c844db2b' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: '869adf3673781fb5d21ca493118bfc4e5b56d9c4', name: "chevron-right" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/nv-menuitem.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-menuitem.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,64BAA64B,CAAC;AACp6B,yBAAe,aAAa;;~~MCkBf~~,UAAU;IALvB~~;;;;;~~QAsBW,aAAQ,GAAY,KAAK,CAAC;;;;QAY1B,eAAU,GAAY,KAAK,CAAC;~~KAoBtC~~;;;;~~IAdC~~,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,IACvD,IAAI,CAAC,IAAI,IAAID,sEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAClDA,iFAAiB,MAAM,IACrBA,oEAAa,CACR,EACN,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAIA,oEAAM,IAAI,CAAC,QAAQ,CAAO,EAC/D,IAAI,CAAC,UAAU,IAAIA,sEAAS,IAAI,EAAC,eAAe,GAAW,CACvD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/nv-menuitem/nv-menuitem.scss?tag=nv-menuitem","src/components/nv-menuitem/nv-menuitem.tsx"],"sourcesContent":["@mixin root-styles() {\n display: flex;\n align-items: center;\n max-width: 300px;\n width: 100vw;\n font-size: var(--menu-contextual-item-font-size);\n font-weight: var(--menu-contextual-item-font-weight);\n color: var(--components-menu-contextual-item-content);\n border-radius: var(--menu-contextual-item-radius);\n gap: var(--menu-contextual-item-gap-x);\n padding: var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);\n transition: background-color 150ms ease-out;\n cursor: pointer;\n &:hover, &:focus, &:focus-within {\n @include focused-styles();\n }\n}\n\n@mixin focused-styles() {\n background-color: var(--components-menu-contextual-item-background-hover);\n color: var(--components-menu-contextual-item-content-hover);\n}\n\n@mixin disabled-styles() {\n cursor: unset;\n background-color: unset;\n color: var(--components-menu-contextual-item-content-disabled);\n}\n\n@mixin text-styles() {\n margin-right: auto;\n}\n\n@mixin shortcut-styles() {\n color: var(--components-menu-contextual-item-shortcut);\n}\n\nnv-menuitem {\n @include root-styles();\n\n kbd {\n @include shortcut-styles();\n }\n\n [data-scope=\"text\"] {\n @include text-styles();\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n @include disabled-styles();\n }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\n\nimport { IconName } from '../nv-icon/nv-icons';\n\nexport type MenuitemSelectedEventDetail = {\n /*\n The id of the menu item that was selected.\n /\n ~~itemId~~?: HTMLElement['id'];\n};\n\n/\n @slot default - The content to render, usually just text\n /\n@Component({\n tag: 'nv-menuitem',\n styleUrl: 'nv-menuitem.scss',\n shadow: false,\n})\nexport class NvMenuitem {\n @Element() el: HTMLNvMenuitemElement;\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Choose the icon you want to display. This also sets the aria-label for\n * improved accessibility, helping users who rely on screen readers.\n * The icon is not displayed when the button is loading.\n /\n @Prop({ reflect: true })\n readonly icon: `${IconName}`;\n\n /\n Disables the item, preventing user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Show a shortcut key for the action represented in the menu item.\n /\n @Prop({ reflect: true })\n readonly shortcut: string;\n\n /\n If the menu item has a submenu, the a caret icon will be displayed.\n /\n @Prop({ reflect: true })\n readonly hasSubmenu: boolean = false;\n\n //#endregion PROPERTIES\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"menuitem\" tabindex={this.disabled ? '-1' : '0'}>\n {this.icon && <nv-icon name={this.icon}></nv-icon>}\n <span data-scope=\"text\">\n <slot></slot>\n </span>\n {this.shortcut && !this.hasSubmenu && <kbd>{this.shortcut}</kbd>}\n {this.hasSubmenu && <nv-icon name=\"chevron-right\"></nv-icon>}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-menuitem.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,64BAA64B,CAAC;AACp6B,yBAAe,aAAa;;MCmCf,UAAU;IALvB;;;;;;QAsBW,aAAQ,GAAY,KAAK,CAAC;;;;QAY1B,eAAU,GAAY,KAAK,CAAC;KAyEtC;IApDS,oBAAoB,CAAC,KAAY;;QAEvC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;SACR;QAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;YACzB,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;YACd,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC,CAAC;KACJ;IAGD,WAAW,CAAC,KAAiB;QAC3B,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;KAClC;IAGD,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAsC,CAAC;YACtE,IACE,aAAa;gBACb,aAAa,CAAC,OAAO,KAAK,aAAa;gBACvC,CAAC,aAAa,CAAC,YAAY,CAAC,aAAa,CAAC,EAC1C;gBACA,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;aAClC;SACF;KACF;;;;IAMD,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,IACvD,IAAI,CAAC,IAAI,IAAID,sEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAClDA,iFAAiB,MAAM,IACrBA,oEAAa,CACR,EACN,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAIA,oEAAM,IAAI,CAAC,QAAQ,CAAO,EAC/D,IAAI,CAAC,UAAU,IAAIA,sEAAS,IAAI,EAAC,eAAe,GAAW,CACvD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/nv-menuitem/nv-menuitem.scss?tag=nv-menuitem","src/components/nv-menuitem/nv-menuitem.tsx"],"sourcesContent":["@mixin root-styles() {\n display: flex;\n align-items: center;\n max-width: 300px;\n width: 100vw;\n font-size: var(--menu-contextual-item-font-size);\n font-weight: var(--menu-contextual-item-font-weight);\n color: var(--components-menu-contextual-item-content);\n border-radius: var(--menu-contextual-item-radius);\n gap: var(--menu-contextual-item-gap-x);\n padding: var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);\n transition: background-color 150ms ease-out;\n cursor: pointer;\n &:hover, &:focus, &:focus-within {\n @include focused-styles();\n }\n}\n\n@mixin focused-styles() {\n background-color: var(--components-menu-contextual-item-background-hover);\n color: var(--components-menu-contextual-item-content-hover);\n}\n\n@mixin disabled-styles() {\n cursor: unset;\n background-color: unset;\n color: var(--components-menu-contextual-item-content-disabled);\n}\n\n@mixin text-styles() {\n margin-right: auto;\n}\n\n@mixin shortcut-styles() {\n color: var(--components-menu-contextual-item-shortcut);\n}\n\nnv-menuitem {\n @include root-styles();\n\n kbd {\n @include shortcut-styles();\n }\n\n [data-scope=\"text\"] {\n @include text-styles();\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n @include disabled-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\n\nimport { IconName } from '../nv-icon/nv-icons';\n\nexport type MenuitemSelectedEventDetail = {\n /*\n The id of the menu item that was selected.\n /\n id?: HTMLElement['id'];\n /\n The name of the menu item that was selected.\n /\n name?: string;\n /\n Indicates if the menu item has a nested submenu.\n /\n hasSubmenu?: boolean;\n};\n\n/\n @slot default - The content to render, usually just text\n /\n@Component({\n tag: 'nv-menuitem',\n styleUrl: 'nv-menuitem.scss',\n shadow: false,\n})\nexport class NvMenuitem {\n @Element() el: HTMLNvMenuitemElement;\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Choose the icon you want to display. This also sets the aria-label for\n * improved accessibility, helping users who rely on screen readers.\n * The icon is not displayed when the button is loading.\n /\n @Prop({ reflect: true })\n readonly icon: `${IconName}`;\n\n /\n Disables the item, preventing user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Show a shortcut key for the action represented in the menu item.\n /\n @Prop({ reflect: true })\n readonly shortcut: string;\n\n /\n If the menu item has a submenu, the a caret icon will be displayed.\n /\n @Prop({ reflect: true })\n readonly hasSubmenu: boolean = false;\n\n /\n Represents the identifier or name associated with the menu item. This value\n * will be emitted as part of the event data when the menu item is selected,\n * enabling event handlers to identify the chosen item.\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Fires when the menu item is selected (click or keypress). Will include the\n * id and name of the menu item.\n /\n @Event()\n menuitemSelected: EventEmitter<MenuitemSelectedEventDetail>;\n\n private handleMenuItemSelect(event: Event) {\n // If the element is disabled, stop propagation\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.menuitemSelected.emit({\n id: this.el.id,\n name: this.name,\n hasSubmenu: this.hasSubmenu,\n });\n }\n\n @Listen('click', { capture: true })\n handleClick(event: MouseEvent) {\n this.handleMenuItemSelect(event);\n }\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n const activeElement = document.activeElement as HTMLNvMenuitemElement;\n if (\n activeElement &&\n activeElement.tagName === 'NV-MENUITEM' &&\n !activeElement.hasAttribute('has-submenu')\n ) {\n event.preventDefault();\n this.handleMenuItemSelect(event);\n }\n }\n }\n\n //#endregion EVENTS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"menuitem\" tabindex={this.disabled ? '-1' : '0'}>\n {this.icon && <nv-icon name={this.icon}></nv-icon>}\n <span data-scope=\"text\">\n <slot></slot>\n </span>\n {this.shortcut && !this.hasSubmenu && <kbd>{this.shortcut}</kbd>}\n {this.hasSubmenu && <nv-icon name=\"chevron-right\"></nv-icon>}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/cjs/nv-popover.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-72b8a9ad.js');
+const index = require('./index-ddc37f87.js');
 const fade_animation = require('./fade.animation-0d33d198.js');
 const grow_animation = require('./grow.animation-46e7ae4b.js');
@@ -2072,6 +2072,7 @@ const NvPopover = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.openChanged = index.createEvent(this, "openChanged", 7);
+        this.eventsAttached = false;
         /**
          * Use this prop to toggle the visibility of the popover. Set to true to show
          * the popover and false to hide it.
@@ -2207,6 +2208,20 @@ const NvPopover = class {
     async toggle() {
         this.open = !this.open;
     }
+    /**
+     * Attaches event listeners to the trigger element, and makes sure this only
+     * happens once.
+     */
+    attachEventListeners() {
+        if (this.triggerElement && !this.eventsAttached) {
+            grow_animation.addEventListeners(this.closeEvents, document, this);
+            if (this.triggerMode === 'click')
+                grow_animation.addEventListeners(this.clickEvents, this.triggerElement, this);
+            if (this.triggerMode === 'hover')
+                grow_animation.addEventListeners(this.hoverEvents, this.triggerElement, this);
+            this.eventsAttached = true;
+        }
+    }
     /**
      * Calculates the position of the popover relative to the trigger.
      * @docs https://floating-ui.com/docs/computePosition
@@ -2320,6 +2335,9 @@ const NvPopover = class {
         if (!this.triggerElement)
             this.triggerElement = Array.from(this.el.children).find(child => child.getAttribute('slot') === 'trigger');
     }
+    componentWillUpdate() {
+        this.attachEventListeners();
+    }
     componentDidLoad() {
         // Initial inline style setup
         if (!this.open) {
@@ -2332,11 +2350,7 @@ const NvPopover = class {
             this.popoverElement.removeAttribute('hidden');
         }
         this.positionPopover();
-        grow_animation.addEventListeners(this.closeEvents, document, this);
-        if (this.triggerMode === 'click')
-            grow_animation.addEventListeners(this.clickEvents, this.triggerElement, this);
-        if (this.triggerMode === 'hover')
-            grow_animation.addEventListeners(this.hoverEvents, this.triggerElement, this);
+        this.attachEventListeners();
     }
     disconnectedCallback() {
         grow_animation.removeEventListeners(this.closeEvents, document, this);
@@ -2349,7 +2363,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'ec0fd394fe5d735afcc7077b32ef4c5717a36349' }, index.h("slot", { key: '7ed68d138ea990da3c1f245919245e5ad1978495', name: "trigger" }), index.h("div", { key: '15b681de4c00d96eb7eb32912429d48e849c426e', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: '8ac2cc5bba6be174cb3577fd885b13fea3a36071', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '57775b2726b6fdc1aa2798665d5971a68a6a5f12', name: "content" }))));
+        return (index.h(index.Host, { key: '17eff9af9c2b956bb09a5398f08c1bd6cc748d30' }, index.h("slot", { key: '4633c6f88fe81214a5b2b189c32b6c6ed71c7c0a', name: "trigger" }), index.h("div", { key: '792f7ad6fe7d7405e617e54819d90a76b82fc36c', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: '8acc19dd8728f2b164172eb53accfea4ac41e8b0', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: 'b0785e444dabddb50f7105aa958c81967ee27e5d', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {