@nova-design-system/nova-webcomponents 3.24.0 → 3.25.0

package/dist/components/nv-togglebuttongroup.js

@@ -1,200 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C63Xpg9a.js';
-
-const nvTogglebuttongroupCss = "nv-togglebuttongroup{display:flex;gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);width:fit-content;padding:var(--togglegroup-lg-gap)}nv-togglebuttongroup[emphasis=high]{border:1px solid var(--components-togglegroup-high-border)}nv-togglebuttongroup[emphasis=low]{border:1px solid var(--components-togglegroup-low-border)}nv-togglebuttongroup[size=xs]{padding:calc(var(--togglegroup-xs-padding) - 1px);gap:var(--togglegroup-xs-gap);border-radius:var(--togglegroup-xs-radius);height:var(--togglegroup-xs-height)}nv-togglebuttongroup[size=sm]{padding:calc(var(--togglegroup-sm-padding) - 1px);gap:var(--togglegroup-sm-gap);border-radius:var(--togglegroup-sm-radius);height:var(--togglegroup-sm-height)}nv-togglebuttongroup[size=md]{padding:calc(var(--togglegroup-md-padding) - 1px);gap:var(--togglegroup-md-gap);border-radius:var(--togglegroup-md-radius);height:var(--togglegroup-md-height)}nv-togglebuttongroup[size=lg]{padding:calc(var(--togglegroup-lg-padding) - 1px);gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);height:var(--togglegroup-lg-height)}";
-
-const NvTogglebuttongroup$1 = /*@__PURE__*/ proxyCustomElement(class NvTogglebuttongroup extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.valueChanged = createEvent(this, "valueChanged", 3);
-        /**
-         * Activates single-selection mode so only one button can be active at a time.
-         */
-        this.exclusive = false;
-        /**
-         * Ensures at least one toggle stays selected at all times.
-         */
-        this.enforceValue = false;
-        /**
-         * Make it more or less visually prominent to users.
-         */
-        this.emphasis = 'high';
-        /**
-         * Determines how large or small the togglebutton appears, allowing for
-         * customization of the togglebutton's dimensions to fit different design
-         * specifications and user needs.
-         */
-        this.size = 'md';
-        //#endregion PROPERTIES
-        /****************************************************************************/
-        //#region METHODS
-        /**
-         * Sets the active state of all toggle buttons depending on the value of the
-         * group.
-         */
-        this.setActiveToggleButtons = () => {
-            this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {
-                const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);
-                if (!btn)
-                    return;
-                btn.active = (this.value ?? []).includes(btn.value);
-            });
-        };
-        /**
-         * Sets the emphasis of all toggle buttons to the same value.
-         */
-        this.setEmphasisToggleButtons = () => {
-            this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {
-                const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);
-                if (!btn)
-                    return;
-                btn.emphasis = this.emphasis;
-            });
-        };
-        /**
-         * Sets the size of all toggle buttons to the same value.
-         */
-        this.setSizeToggleButtons = () => {
-            this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {
-                const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);
-                if (!btn)
-                    return;
-                btn.size = this.size;
-            });
-        };
-        /**
-         * Sets up the MutationObserver to watch for changes in child elements
-         */
-        this.setupMutationObserver = () => {
-            this.mutationObserver = new MutationObserver(mutations => {
-                mutations.forEach(mutation => {
-                    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
-                        this.setEmphasisToggleButtons();
-                        this.setSizeToggleButtons();
-                    }
-                });
-            });
-            this.mutationObserver.observe(this.el, {
-                childList: true,
-                subtree: true,
-            });
-        };
-    }
-    /**
-     * Narrow Type used locally to interact with nv-togglebutton child elements.
-     * @param {Element} element - The element to check.
-     * @returns {(HTMLElement & {
-     *   active: boolean;
-     *   value: string;
-     *   emphasis: `${ToggleButtonEmphasis}`;
-     *   size: `${ToggleButtonSize}`;
-     * }) | null} The element as a toggle button, or null if it is not a toggle button.
-     */
-    static asToggleButton(element) {
-        return element instanceof H
-            ? element
-            : null;
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region WATCHERS
-    onValueChanged(newValue) {
-        this.setActiveToggleButtons();
-        this.valueChanged.emit(newValue);
-    }
-    onEmphasisChanged() {
-        this.setEmphasisToggleButtons();
-    }
-    onSizeChanged() {
-        this.setSizeToggleButtons();
-    }
-    /* eslint-disable nova/native-event-listener */
-    onToggled(event) {
-        event.stopPropagation();
-        const valueSet = new Set(this.value);
-        if (this.exclusive && this.enforceValue) {
-            this.value = [event.detail.value];
-            return;
-        }
-        if (this.exclusive) {
-            if (valueSet.has(event.detail.value)) {
-                this.value = [];
-            }
-            else {
-                this.value = [event.detail.value];
-            }
-            return;
-        }
-        toggle: if (event.detail.active) {
-            if (this.enforceValue && valueSet.size === 1)
-                break toggle;
-            valueSet.delete(event.detail.value);
-        }
-        else {
-            valueSet.add(event.detail.value);
-        }
-        this.value = [...valueSet];
-    }
-    /* eslint-enable nova/native-event-listener */
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        this.setActiveToggleButtons();
-        this.setEmphasisToggleButtons();
-        this.setSizeToggleButtons();
-        this.setupMutationObserver();
-    }
-    disconnectedCallback() {
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-        }
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (h(Host, { key: '2d4f46a06045c84018b0a5c296b2eb19c2803d7a' }, h("slot", { key: '4f387071fe030057df13c6b3ff5e6f480fcd339b' })));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "value": ["onValueChanged"],
-        "emphasis": ["onEmphasisChanged"],
-        "size": ["onSizeChanged"]
-    }; }
-    static get style() { return nvTogglebuttongroupCss; }
-}, [260, "nv-togglebuttongroup", {
-        "value": [1040],
-        "exclusive": [516],
-        "enforceValue": [516, "enforce-value"],
-        "emphasis": [513],
-        "size": [513]
-    }, [[0, "toggled", "onToggled"]], {
-        "value": ["onValueChanged"],
-        "emphasis": ["onEmphasisChanged"],
-        "size": ["onSizeChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nv-togglebuttongroup"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nv-togglebuttongroup":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NvTogglebuttongroup$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const NvTogglebuttongroup = NvTogglebuttongroup$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { NvTogglebuttongroup, defineCustomElement };
-//# sourceMappingURL=nv-togglebuttongroup.js.map
-
-//# sourceMappingURL=nv-togglebuttongroup.js.map
+import{t,p as g,H as e,c as o,h as s,d as i}from"./p-iXsbKJzR.js";const a=g(class t extends e{constructor(g){super(),!1!==g&&this.__registerHost(),this.valueChanged=o(this,"valueChanged",3),this.exclusive=!1,this.enforceValue=!1,this.emphasis="high",this.size="md",this.setActiveToggleButtons=()=>{this.el.querySelectorAll("nv-togglebutton").forEach((g=>{const e=t.asToggleButton(g);e&&(e.active=(this.value??[]).includes(e.value))}))},this.setEmphasisToggleButtons=()=>{this.el.querySelectorAll("nv-togglebutton").forEach((g=>{const e=t.asToggleButton(g);e&&(e.emphasis=this.emphasis)}))},this.setSizeToggleButtons=()=>{this.el.querySelectorAll("nv-togglebutton").forEach((g=>{const e=t.asToggleButton(g);e&&(e.size=this.size)}))},this.setupMutationObserver=()=>{this.mutationObserver=new MutationObserver((t=>{t.forEach((t=>{"childList"===t.type&&t.addedNodes.length>0&&(this.setEmphasisToggleButtons(),this.setSizeToggleButtons())}))})),this.mutationObserver.observe(this.el,{childList:!0,subtree:!0})}}static asToggleButton(t){return t instanceof e?t:null}onValueChanged(t){this.setActiveToggleButtons(),this.valueChanged.emit(t)}onEmphasisChanged(){this.setEmphasisToggleButtons()}onSizeChanged(){this.setSizeToggleButtons()}onToggled(t){t.stopPropagation();const g=new Set(this.value);if(this.exclusive&&this.enforceValue)this.value=[t.detail.value];else if(this.exclusive)this.value=g.has(t.detail.value)?[]:[t.detail.value];else{t:if(t.detail.active){if(this.enforceValue&&1===g.size)break t;g.delete(t.detail.value)}else g.add(t.detail.value);this.value=[...g]}}componentWillLoad(){this.setActiveToggleButtons(),this.setEmphasisToggleButtons(),this.setSizeToggleButtons(),this.setupMutationObserver()}disconnectedCallback(){this.mutationObserver&&this.mutationObserver.disconnect()}render(){return s(i,{key:"98d0fd8820da9b6a5911330a0396b66a911352f2"},s("slot",{key:"aa202371d4d63d127d69a6a199451f3c97a65c86"}))}get el(){return this}static get watchers(){return{value:[{onValueChanged:0}],emphasis:[{onEmphasisChanged:0}],size:[{onSizeChanged:0}]}}static get style(){return"nv-togglebuttongroup{display:flex;gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);width:fit-content;padding:var(--togglegroup-lg-gap)}nv-togglebuttongroup[emphasis=high]{border:1px solid var(--components-togglegroup-high-border)}nv-togglebuttongroup[emphasis=low]{border:1px solid var(--components-togglegroup-low-border)}nv-togglebuttongroup[size=xs]{padding:calc(var(--togglegroup-xs-padding) - 1px);gap:var(--togglegroup-xs-gap);border-radius:var(--togglegroup-xs-radius);height:var(--togglegroup-xs-height)}nv-togglebuttongroup[size=sm]{padding:calc(var(--togglegroup-sm-padding) - 1px);gap:var(--togglegroup-sm-gap);border-radius:var(--togglegroup-sm-radius);height:var(--togglegroup-sm-height)}nv-togglebuttongroup[size=md]{padding:calc(var(--togglegroup-md-padding) - 1px);gap:var(--togglegroup-md-gap);border-radius:var(--togglegroup-md-radius);height:var(--togglegroup-md-height)}nv-togglebuttongroup[size=lg]{padding:calc(var(--togglegroup-lg-padding) - 1px);gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);height:var(--togglegroup-lg-height)}"}},[260,"nv-togglebuttongroup",{value:[1040],exclusive:[516],enforceValue:[516,"enforce-value"],emphasis:[513],size:[513]},[[0,"toggled","onToggled"]],{value:[{onValueChanged:0}],emphasis:[{onEmphasisChanged:0}],size:[{onSizeChanged:0}]}]);function r(){"undefined"!=typeof customElements&&["nv-togglebuttongroup"].forEach((g=>{"nv-togglebuttongroup"===g&&(customElements.get(t(g))||customElements.define(t(g),a))}))}r();const n=a,h=r;export{n as NvTogglebuttongroup,h as defineCustomElement}

package/dist/components/nv-tooltip.js

@@ -1,9 +1 @@
-import { N as NvTooltip$1, d as defineCustomElement$1 } from './p-BVOv1zgq.js';
-
-const NvTooltip = NvTooltip$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { NvTooltip, defineCustomElement };
-//# sourceMappingURL=nv-tooltip.js.map
-
-//# sourceMappingURL=nv-tooltip.js.map
+import{N as o,d as p}from"./p-ChRIFm7p.js";const s=o,m=p;export{s as NvTooltip,m as defineCustomElement}