npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.0.0-beta.29 → 3.0.0-beta.30 - Mend

@nova-design-system/nova-webcomponents 3.0.0-beta.29 → 3.0.0-beta.30

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

package/dist/esm/{nv-iconbutton.entry.js → nv-iconbutton_2.entry.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-b6f70e4a.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-e7b35c14.js';
 import { c as clsx } from './clsx-297c1ffe.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)}";
@@ -14,47 +14,6 @@ const NvIconbutton = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Determines how large or small the button appears, allowing for
-         * customization of the button's dimensions to fit different design
-         * specifications and user needs.
-         */
-        this.size = 'md';
-        /**
-         * Adjusts the button’s emphasis to make it more or less visually prominent
-         * to users. Use this to draw attention to important actions or reduce focus
-         * on less critical ones.
-         */
-        this.emphasis = 'high';
-        /**
-         * Set this to true to show a spinner on the button, letting users know that
-         * their action is being processed. It helps improve user experience by
-         * indicating ongoing activities. The icon is not displayed when the button
-         * is loading. Also, the button is disabled. If you want to disable the
-         * button, it is not possible. It is automatically disabled when loading.
-         */
-        this.loading = false;
-        /**
-         * Disables the button, preventing user interaction.
-         */
-        this.disabled = false;
-        /**
-         * Makes the button look active when it’s within a compatible component
-         * like a button group.
-         */
-        this.active = false;
-        /**
-         * Sets the button type to control its function in forms. Use 'submit' to send
-         * form data, 'reset' to clear the form, or 'button' for a standard button
-         * that doesn’t interact with form submission by default.
-         */
-        this.type = 'button';
-        /**
-         * Sets the shape of the button. Choose between square and rounded.
-         */
-        this.shape = 'square';
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region METHODS
@@ -77,6 +36,14 @@ const NvIconbutton = class {
                 (_d = (_c = this.internals) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.reset();
             }
         };
+        this.size = 'md';
+        this.emphasis = 'high';
+        this.loading = false;
+        this.disabled = false;
+        this.active = false;
+        this.name = undefined;
+        this.type = 'button';
+        this.shape = 'square';
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -105,7 +72,7 @@ const NvIconbutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '7d785e95270a8ebcf303a345a887005774295ee6', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: '028836989901ce6f625f325d368c661b31477e62', size: this.size }), !this.loading && h("nv-icon", { key: '5184638cc9dd4550c65eca5b2492806e5e77e43e', name: this.name, size: this.size }), h("slot", { key: '36ab315cb2ac6741c4debb5bfa84eb2e05e3abc8' })));
+        return (h(Host, { key: '5c4107ececbf6252efbf033882481c793aebfadb', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: 'd9ba86fb063f9bf3d6d6d95949222fcd4bf07da5', size: this.size }), !this.loading && h("nv-icon", { key: '4fc7acc39c5dbb5bb668445f6427a28f767d8a0b', name: this.name, size: this.size }), h("slot", { key: '21b8444e3e4f4d5f0f4b9b12f7edc2d6ec48ea80' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -116,6 +83,25 @@ const NvIconbutton = class {
 };
 NvIconbutton.style = NvIconbuttonStyle0;
-export { NvIconbutton as nv_iconbutton };
+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)}";
+const NvLoaderStyle0 = nvLoaderCss;
+const NvLoader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.size = 'md';
+        this.color = undefined;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region RENDER
+    /* <slot> empty to force rendering change */
+    render() {
+        return (h(Host, { key: '442187ad4ad5deaa2880a67c9fddf2b2e38d517d', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+    }
+};
+NvLoader.style = NvLoaderStyle0;
+export { NvIconbutton as nv_iconbutton, NvLoader as nv_loader };
-//# sourceMappingURL=nv-iconbutton.entry.js.map
+//# sourceMappingURL=nv-iconbutton_2.entry.js.map

package/dist/esm/nv-iconbutton_2.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

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

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b6f70e4a.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e7b35c14.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;
@@ -9,28 +9,9 @@ const NvMenu = class {
         this.menuitemSelected = createEvent(this, "menuitemSelected", 7);
         this.isHandlingKeyDown = false;
         this.isHandlingClick = false;
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Use this to toggle the initial visibility of the menu, by default the menu
-         * is hidden.
-         */
         this.open = false;
-        /**
-         * Use this if the menu is nested inside another menu. This will prevent the
-         * parent menu from closing when the child menu is opened.
-         */
         this.nested = false;
-        /**
-         * Use this to disable the menu from closing automatically when a menu item is
-         * selected.
-         */
         this.disableCloseOnSelect = false;
-        /**
-         * Decides where the menu shows up next to the button it’s linked to (above,
-         * below, to the sides). If there isn’t enough room, it will adjust its
-         * position on the axis to fit on the screen, so users can always see it.
-         */
         this.placement = this.nested ? 'right-start' : 'bottom-end';
     }
     //#endregion PROPERTIES
@@ -193,7 +174,7 @@ const NvMenu = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '23fdff061d4aa8364590e2486c60b26684400a34' }, h("slot", { key: '50ff6d6a5b84ad83a9b9deefed42335e663c989d', name: "trigger" }), h("nv-popover", { key: 'ee15458289098254b7074452b2c25a32a7e82b3e', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, h("slot", { key: 'bccea8f6469c29bad2e764c6628b6a783890d10d', name: "content" }))));
+        return (h(Host, { key: 'cc0abb7b96dd16348e420a0d8f3d827fdeba3ec0' }, h("slot", { key: '3240929357957f52cda4ab3ee04ef954db6f1425', name: "trigger" }), h("nv-popover", { key: '3fe10536df9e606fbc69cadc0ec4023c7ee3ae75', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, h("slot", { key: '66ea7310d3b2e27288fa440dbb96f56885c88964', name: "content" }))));
     }
     get el() { return getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"nv-menu.entry.js","mappings":"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","names":[],"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.js","mappings":"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","names":[],"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}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-b6f70e4a.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-e7b35c14.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;
@@ -6,13 +6,9 @@ const NvMenuitemStyle0 = nvMenuitemCss;
 const NvMenuitem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * Disables the item, preventing user interaction.
-         */
+        this.icon = undefined;
         this.disabled = false;
-        /**
-         * If the menu item has a submenu, the a caret icon will be displayed.
-         */
+        this.shortcut = undefined;
         this.hasSubmenu = false;
     }
     //#endregion PROPERTIES

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

	@@ -1 +1 @@
1	- {"file":"nv-menuitem.entry.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,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,IACvD,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAClD,2EAAiB,MAAM,IACrB,8DAAa,CACR,EACN,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,8DAAM,IAAI,CAAC,QAAQ,CAAO,EAC/D,IAAI,CAAC,UAAU,IAAI,gEAAS,IAAI,EAAC,eAAe,GAAW,CACvD,EACP;KACH;;;;;;;","names":[],"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.js","mappings":";;AAAA,MAAM,aAAa,GAAG,64BAA64B,CAAC;AACp6B,yBAAe,aAAa;;MCkBf,UAAU;;;;wBAiBQ,KAAK;;0BAYH,KAAK;;;;;IAMpC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,IACvD,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAClD,2EAAiB,MAAM,IACrB,8DAAa,CACR,EACN,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,8DAAM,IAAI,CAAC,QAAQ,CAAO,EAC/D,IAAI,CAAC,UAAU,IAAI,gEAAS,IAAI,EAAC,eAAe,GAAW,CACvD,EACP;KACH;;;;;;;","names":[],"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}

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

@@ -1,4 +1,4 @@
-import { d as getRenderingRef, f as forceUpdate, r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b6f70e4a.js';
+import { d as getRenderingRef, f as forceUpdate, r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e7b35c14.js';
 import { u as useFade } from './fade.animation-2a077983.js';
 import { u as useGrow, a as addEventListeners, r as removeEventListeners } from './grow.animation-88a8ee8f.js';
@@ -2068,53 +2068,6 @@ const NvPopover = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.openChanged = createEvent(this, "openChanged", 7);
-        /**
-         * Use this prop to toggle the visibility of the popover. Set to true to show
-         * the popover and false to hide it.
-         */
-        this.open = false;
-        /**
-         * Sets the interaction mode for triggering the popover. Options include:
-         * - `hover`: The popover is shown on trigger hover.
-         * - `click`: The popover toggles on trigger click.
-         * - `controlled`: The visibility is managed manually through methods or the
-         *   open prop.
-         */
-        this.triggerMode = 'click';
-        /**
-         * Defines where the popover appears relative to the trigger.
-         */
-        this.placement = 'bottom';
-        /**
-         * Adjust the gap between the popover and its trigger element by setting how
-         * many pixels they should be apart.
-         */
-        this.offset = 12;
-        /**
-         * Use this to decide if the popover should include a small arrow pointing to
-         * the trigger element, making the connection between them more clear.
-         */
-        this.hasArrow = false;
-        /**
-         * Disables the automatic flipping of the popover when the trigger element is
-         * out of the viewport. The popover will flip automatically by default.
-         */
-        this.disableFlip = false;
-        /**
-         * Sets how many pixels the popover should stay from the edge of the viewport.
-         */
-        this.shiftPadding = 16;
-        /**
-         * Use this to set a delay before the popover appears on hover. If the mouse
-         * leaves before this time, the popover won’t show. This only works when the
-         * trigger mode is set to `hover`.
-         */
-        this.enterDelay = 0;
-        /**
-         * Use this to set the popover to be nested inside another popover. This will
-         * prevent the parent popover from closing when the child popover is opened.
-         */
-        this.nested = false;
         this.handleClickOutside = (event) => {
             // This popover should close when the user clicks outside of it.
             if (this.el.contains(event.target))
@@ -2180,6 +2133,17 @@ const NvPopover = class {
         /****************************************************************************/
         //#region WATCHERS
         this.isAnimating = false;
+        this.triggerElement = undefined;
+        this.open = false;
+        this.triggerMode = 'click';
+        this.placement = 'bottom';
+        this.groupName = undefined;
+        this.offset = 12;
+        this.hasArrow = false;
+        this.disableFlip = false;
+        this.shiftPadding = 16;
+        this.enterDelay = 0;
+        this.nested = false;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -2345,7 +2309,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'ee70da5a68b34bf289f79b6d18ffac777f8d807f' }, h("slot", { key: '64bd478a06c4ccf9f656a9ea617bbe39d2ce78d8', name: "trigger" }), h("div", { key: '5d024ffd7c1e00f8f476164da19d231edafa96ec', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '63116e165f54dc018dfee0a8b56eeda96523f16f', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '6a7a400135aaea61ed5f1b0cb492ab962598ad16', name: "content" }))));
+        return (h(Host, { key: 'a09380cf6451740b99cbebca902cb02f44b458a2' }, h("slot", { key: '661c16225a71d26ab295b5efe139ebc507f9e261', name: "trigger" }), h("div", { key: '7dafdc5529822fb262bb52bf27a9353bf9040c05', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'ec295857667a455e2511d0a2848e9847f275dc21', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '17723fe92077d5b88c584a4202f4995ad7a7149a', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {