@nova-design-system/nova-react 3.0.0-beta.42 → 3.0.0-beta.44

package/dist/cjs/nv-fielddropdownitem.entry-CuQqsz4f.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var index = require('./index-B_VOAJzk.js');
+require('react');
+
+const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";
+const NvFielddropdownitemStyle0 = nvFielddropdownitemCss;
+
+const NvFielddropdownitem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected");
+        this.composed = false;
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Disables the item, preventing any user interaction.
+         */
+        this.disabled = false;
+        /**
+         * Indicates if the item is selected.
+         */
+        this.selected = false;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleSelected = () => {
+            if (this.disabled)
+                return;
+            this.dropdownItemSelected.emit({
+                label: this.label,
+                value: this.value,
+            });
+        };
+    }
+    handleKeyDown(event) {
+        var _a, _b;
+        if (event.target !== this.el)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleSelected();
+            (_b = (_a = this.el
+                .closest('nv-fielddropdown')) === null || _a === void 0 ? void 0 : _a.querySelector("[data-scope='focusable']")) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        var _a;
+        this.composed = Boolean(this.el.children.length);
+        if (!this.value) {
+            const fallback = (_a = this.label) !== null && _a !== void 0 ? _a : this.el.textContent;
+            this.value = fallback.replace(/\W+/g, ''); // Remove non-word characters
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'acee05b9d46a503b8ca19acf9f96577f83686c38', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: '07eb6931adeb42c1bd9d83b58ef43d07eb0fd4df' }), !this.composed && (index.h("div", { key: '4a1c9d51f6d7e2ea3680ddd2294bc5a88c6a354b', class: "text-wrapper" }, index.h("span", { key: '6f13add04158044d4b3cd00b386ed0ed5cde87fc', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: '88bfab2accd9b3bb8a2bb8fbbc6bafab8712432e', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvFielddropdownitem.style = NvFielddropdownitemStyle0;
+
+exports.nv_fielddropdownitem = NvFielddropdownitem;

package/dist/cjs/nv-fielddropdownitem.entry-Dn2HJc1t.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var index = require('./index-CtI3SivD.js');
+require('react');
+
+const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";
+const NvFielddropdownitemStyle0 = nvFielddropdownitemCss;
+
+const NvFielddropdownitem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected");
+        this.composed = false;
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Disables the item, preventing any user interaction.
+         */
+        this.disabled = false;
+        /**
+         * Indicates if the item is selected.
+         */
+        this.selected = false;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleSelected = () => {
+            if (this.disabled)
+                return;
+            this.dropdownItemSelected.emit({
+                label: this.label,
+                value: this.value,
+            });
+        };
+    }
+    handleKeyDown(event) {
+        var _a, _b;
+        if (event.target !== this.el)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleSelected();
+            (_b = (_a = this.el
+                .closest('nv-fielddropdown')) === null || _a === void 0 ? void 0 : _a.querySelector("[data-scope='focusable']")) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        var _a;
+        this.composed = Boolean(this.el.children.length);
+        if (!this.value) {
+            const fallback = (_a = this.label) !== null && _a !== void 0 ? _a : this.el.textContent;
+            this.value = fallback.replace(/\W+/g, ''); // Remove non-word characters
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '228a213b0a8acb108676e412ed2aa8bcd3f2e88d', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: '4578676f2a58e9a3a3a5173ff4659ca8e65755df' }), !this.composed && (index.h("div", { key: 'a4f670296e56319007852726fd5fa3dca1ea3d04', class: "text-wrapper" }, index.h("span", { key: '2b69bca3ee6e1d7e8db57befdfb57bd27c096658', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: '869900dc55ef7e35550d9de1aea06478e90ba890', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvFielddropdownitem.style = NvFielddropdownitemStyle0;
+
+exports.nv_fielddropdownitem = NvFielddropdownitem;

package/dist/cjs/nv-fielddropdownitem.entry-HK2I5pUG.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var index = require('./index-CEWbQ5nh.js');
+require('react');
+
+const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";
+const NvFielddropdownitemStyle0 = nvFielddropdownitemCss;
+
+const NvFielddropdownitem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected");
+        this.composed = false;
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Disables the item, preventing any user interaction.
+         */
+        this.disabled = false;
+        /**
+         * Indicates if the item is selected.
+         */
+        this.selected = false;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleSelected = () => {
+            if (this.disabled)
+                return;
+            this.dropdownItemSelected.emit({
+                label: this.label,
+                value: this.value,
+            });
+        };
+    }
+    handleKeyDown(event) {
+        var _a, _b;
+        if (event.target !== this.el)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleSelected();
+            (_b = (_a = this.el
+                .closest('nv-fielddropdown')) === null || _a === void 0 ? void 0 : _a.querySelector("[data-scope='focusable']")) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        var _a;
+        this.composed = Boolean(this.el.children.length);
+        if (!this.value) {
+            const fallback = (_a = this.label) !== null && _a !== void 0 ? _a : this.el.textContent;
+            this.value = fallback.replace(/\W+/g, ''); // Remove non-word characters
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '228a213b0a8acb108676e412ed2aa8bcd3f2e88d', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: '4578676f2a58e9a3a3a5173ff4659ca8e65755df' }), !this.composed && (index.h("div", { key: 'a4f670296e56319007852726fd5fa3dca1ea3d04', class: "text-wrapper" }, index.h("span", { key: '2b69bca3ee6e1d7e8db57befdfb57bd27c096658', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: '869900dc55ef7e35550d9de1aea06478e90ba890', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvFielddropdownitem.style = NvFielddropdownitemStyle0;
+
+exports.nv_fielddropdownitem = NvFielddropdownitem;