@nova-design-system/nova-webcomponents 3.9.0 → 3.10.0

package/dist/collection/components/nv-buttongroup/nv-buttongroup.js

@@ -0,0 +1,217 @@
+import { Host, h } from "@stencil/core";
+import { forwardPropsToChildren } from "./nv-buttongroup.utils";
+/**
+ * @slot default - Child buttons or links.
+ */
+export class NvButtongroup {
+    constructor() {
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Determines how large or small all the buttons appear, allowing for
+         * customization of the button's dimensions to fit different design
+         * specifications and user needs.
+         */
+        this.size = 'md';
+        /**
+         * Adjusts the emphasis of all the buttons 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 = 'medium';
+        /**
+         * Allows the button group to stretch and fill the entire width of its
+         * container.
+         */
+        this.fluid = false;
+        /**
+         * Determines the orientation of the button group. When enabled, the buttons
+         * are stacked vertically rather than aligned side by side.
+         */
+        this.orientation = 'horizontal';
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Forwards the buttongroup properties to all child elements
+         */
+        this.forwardPropsToChildren = () => {
+            forwardPropsToChildren(this.el, {
+                size: this.size,
+                emphasis: this.emphasis,
+                fluid: this.fluid,
+            });
+        };
+        /**
+         * 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) {
+                        // Forward props to all children when changes occur
+                        this.forwardPropsToChildren();
+                    }
+                });
+            });
+            this.mutationObserver.observe(this.el, {
+                childList: true,
+                subtree: true,
+            });
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    onEmphasisChange() {
+        this.forwardPropsToChildren();
+    }
+    onSizeChange() {
+        this.forwardPropsToChildren();
+    }
+    onFluidChange() {
+        this.forwardPropsToChildren();
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.forwardPropsToChildren();
+        this.setupMutationObserver();
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region EVENTS
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'd0322897a0312e7b55b087e4abfc94fcaf9f7747' }, h("slot", { key: '70afccf10fe728482096d3fce42083e9931e06bd' })));
+    }
+    static get is() { return "nv-buttongroup"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles/nv-buttongroup.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles/nv-buttongroup.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${ButtonSize}`",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+                    "references": {
+                        "ButtonSize": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::ButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines how large or small all the buttons appear, allowing for\ncustomization of the button's dimensions to fit different design\nspecifications and user needs."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'md'"
+            },
+            "emphasis": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${ButtonEmphasis}`",
+                    "resolved": "\"high\" | \"low\" | \"lower\" | \"medium\"",
+                    "references": {
+                        "ButtonEmphasis": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::ButtonEmphasis"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adjusts the emphasis of all the buttons to make it more or less visually\nprominent to users. Use this to draw attention to important actions or\nreduce focus on less critical ones"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "emphasis",
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "fluid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the button group to stretch and fill the entire width of its\ncontainer."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "fluid",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the orientation of the button group. When enabled, the buttons\nare stacked vertically rather than aligned side by side."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "orientation",
+                "reflect": true,
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "emphasis",
+                "methodName": "onEmphasisChange"
+            }, {
+                "propName": "size",
+                "methodName": "onSizeChange"
+            }, {
+                "propName": "fluid",
+                "methodName": "onFluidChange"
+            }];
+    }
+}
+//# sourceMappingURL=nv-buttongroup.js.map

package/dist/collection/components/nv-buttongroup/nv-buttongroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-buttongroup.js","sourceRoot":"","sources":["../../../src/components/nv-buttongroup/nv-buttongroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE;;GAEG;AAMH,MAAM,OAAO,aAAa;IAL1B;QASE,8EAA8E;QAC9E,oBAAoB;QAEpB;;;;WAIG;QAEM,SAAI,GAAoB,IAAI,CAAC;QAEtC;;;;WAIG;QAEM,aAAQ,GAAwB,QAAQ,CAAC;QAElD;;;WAGG;QAEM,UAAK,GAAY,KAAK,CAAC;QAEhC;;;WAGG;QAEM,gBAAW,GAA8B,YAAY,CAAC;QAE/D,uBAAuB;QACvB,8EAA8E;QAC9E,iBAAiB;QAEjB;;WAEG;QACK,2BAAsB,GAAG,GAAS,EAAE;YAC1C,sBAAsB,CAAC,IAAI,CAAC,EAAE,EAAE;gBAC9B,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;WAEG;QACK,0BAAqB,GAAG,GAAS,EAAE;YACzC,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;gBACvD,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;oBAC3B,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,IAAI,QAAQ,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;wBACpE,mDAAmD;wBACnD,IAAI,CAAC,sBAAsB,EAAE,CAAC;oBAChC,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;gBACrC,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;QACL,CAAC,CAAC;KAkDH;IAhDC,oBAAoB;IACpB,8EAA8E;IAC9E,kBAAkB;IAGlB,gBAAgB;QACd,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,CAAC;IAED,qBAAqB;IACrB,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;QACrC,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,gBAAgB;IAChB,mBAAmB;IACnB,8EAA8E;IAC9E,gBAAgB;IAChB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Element, Watch } from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis } from '../../utils/constants';\nimport { forwardPropsToChildren } from './nv-buttongroup.utils';\n\n/**\n * @slot default - Child buttons or links.\n */\n@Component({\n  tag: 'nv-buttongroup',\n  styleUrl: 'styles/nv-buttongroup.scss',\n  shadow: false,\n})\nexport class NvButtongroup {\n  @Element() el: HTMLNvButtongroupElement;\n  private mutationObserver: MutationObserver;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small all the buttons appear, 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 emphasis of all the buttons to make it more or less visually\n   * prominent to users. Use this to draw attention to important actions or\n   * reduce focus on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'medium';\n\n  /**\n   * Allows the button group to stretch and fill the entire width of its\n   * container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  /**\n   * Determines the orientation of the button group. When enabled, the buttons\n   * are stacked vertically rather than aligned side by side.\n   */\n  @Prop({ reflect: true })\n  readonly orientation: 'vertical' | 'horizontal' = 'horizontal';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Forwards the buttongroup properties to all child elements\n   */\n  private forwardPropsToChildren = (): void => {\n    forwardPropsToChildren(this.el, {\n      size: this.size,\n      emphasis: this.emphasis,\n      fluid: this.fluid,\n    });\n  };\n\n  /**\n   * Sets up the MutationObserver to watch for changes in child elements\n   */\n  private setupMutationObserver = (): void => {\n    this.mutationObserver = new MutationObserver(mutations => {\n      mutations.forEach(mutation => {\n        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {\n          // Forward props to all children when changes occur\n          this.forwardPropsToChildren();\n        }\n      });\n    });\n\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('emphasis')\n  onEmphasisChange() {\n    this.forwardPropsToChildren();\n  }\n\n  @Watch('size')\n  onSizeChange() {\n    this.forwardPropsToChildren();\n  }\n\n  @Watch('fluid')\n  onFluidChange() {\n    this.forwardPropsToChildren();\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.forwardPropsToChildren();\n    this.setupMutationObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"]}

package/dist/collection/components/nv-buttongroup/nv-buttongroup.utils.js

@@ -0,0 +1,86 @@
+/**
+ * Utility functions for nv-buttongroup.
+ */
+/**
+ * Recursively finds the first button or link element within a container
+ * @param {HTMLElement} element - The HTML element to search within
+ * @returns {HTMLElement | null} The first button or link element found, or null if none exists
+ */
+export function findFirstButtonOrLink(element) {
+    // Check if the element itself is a button or link
+    const tagName = element.tagName.toLowerCase();
+    if (tagName === 'nv-button' ||
+        tagName === 'nv-iconbutton' ||
+        tagName === 'a') {
+        return element;
+    }
+    // Recursively search through children
+    for (const child of Array.from(element.children)) {
+        const found = findFirstButtonOrLink(child);
+        if (found) {
+            return found;
+        }
+    }
+    return null;
+}
+/**
+ * Forwards the buttongroup properties to all child elements
+ * @param {HTMLElement} containerElement - The container element containing the buttons
+ * @param {object} props - The properties to forward to children
+ * @param {string} props.size - The size property to apply
+ * @param {string} props.emphasis - The emphasis property to apply
+ * @param {boolean} props.fluid - Whether the buttons should be fluid
+ */
+export function forwardPropsToChildren(containerElement, props) {
+    const children = Array.from(containerElement.children);
+    const buttonElements = [];
+    // Find the first button or link in each direct child
+    children.forEach(child => {
+        const buttonOrLink = findFirstButtonOrLink(child);
+        if (buttonOrLink) {
+            buttonElements.push(buttonOrLink);
+        }
+    });
+    buttonElements.forEach(element => {
+        element.classList.remove('first', 'last', 'group-item');
+    });
+    // Apply properties and positional classes to found elements
+    buttonElements.forEach((element, index) => {
+        const isFirst = index === 0;
+        const isLast = index === buttonElements.length - 1;
+        const tagName = element.tagName.toLowerCase();
+        // Add positional classes
+        if (isFirst) {
+            element.classList.add('first');
+        }
+        if (isLast) {
+            element.classList.add('last');
+        }
+        // Add group item classes
+        element.classList.add('group-item');
+        // Forward props to nv-button elements
+        if (tagName === 'nv-button' || tagName === 'nv-iconbutton') {
+            element.setAttribute('size', props.size);
+            element.setAttribute('emphasis', props.emphasis);
+            if (props.fluid) {
+                element.setAttribute('fluid', '');
+            }
+            else {
+                element.removeAttribute('fluid');
+            }
+        }
+        // Forward props to anchor elements by adding CSS classes
+        if (tagName === 'a') {
+            element.classList.add('nv-button');
+            element.classList.add(`size-${props.size}`);
+            element.classList.add(`emphasis-${props.emphasis}`);
+            if (props.fluid) {
+                element.classList.add('fluid');
+            }
+            else {
+                element.classList.remove('fluid');
+            }
+        }
+    });
+}
+//# sourceMappingURL=nv-buttongroup.utils.js.map

package/dist/collection/components/nv-buttongroup/nv-buttongroup.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-buttongroup.utils.js","sourceRoot":"","sources":["../../../src/components/nv-buttongroup/nv-buttongroup.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Utility functions for nv-buttongroup.\n */\n\n/**\n * Recursively finds the first button or link element within a container\n * @param {HTMLElement} element - The HTML element to search within\n * @returns {HTMLElement | null} The first button or link element found, or null if none exists\n */\nexport function findFirstButtonOrLink(\n  element: HTMLElement,\n): HTMLElement | null {\n  // Check if the element itself is a button or link\n  const tagName = element.tagName.toLowerCase();\n  if (\n    tagName === 'nv-button' ||\n    tagName === 'nv-iconbutton' ||\n    tagName === 'a'\n  ) {\n    return element;\n  }\n\n  // Recursively search through children\n  for (const child of Array.from(element.children) as HTMLElement[]) {\n    const found = findFirstButtonOrLink(child);\n    if (found) {\n      return found;\n    }\n  }\n\n  return null;\n}\n\n/**\n * Forwards the buttongroup properties to all child elements\n * @param {HTMLElement} containerElement - The container element containing the buttons\n * @param {object} props - The properties to forward to children\n * @param {string} props.size - The size property to apply\n * @param {string} props.emphasis - The emphasis property to apply\n * @param {boolean} props.fluid - Whether the buttons should be fluid\n */\nexport function forwardPropsToChildren(\n  containerElement: HTMLElement,\n  props: {\n    /** The size property to apply */\n    size: string;\n    /** The emphasis property to apply */\n    emphasis: string;\n    /** Whether the buttons should be fluid */\n    fluid: boolean;\n  },\n): void {\n  const children = Array.from(containerElement.children) as HTMLElement[];\n  const buttonElements: HTMLElement[] = [];\n\n  // Find the first button or link in each direct child\n  children.forEach(child => {\n    const buttonOrLink = findFirstButtonOrLink(child);\n    if (buttonOrLink) {\n      buttonElements.push(buttonOrLink);\n    }\n  });\n\n  buttonElements.forEach(element => {\n    element.classList.remove('first', 'last', 'group-item');\n  });\n\n  // Apply properties and positional classes to found elements\n  buttonElements.forEach((element, index) => {\n    const isFirst = index === 0;\n    const isLast = index === buttonElements.length - 1;\n    const tagName = element.tagName.toLowerCase();\n\n    // Add positional classes\n    if (isFirst) {\n      element.classList.add('first');\n    }\n    if (isLast) {\n      element.classList.add('last');\n    }\n\n    // Add group item classes\n    element.classList.add('group-item');\n\n    // Forward props to nv-button elements\n    if (tagName === 'nv-button' || tagName === 'nv-iconbutton') {\n      element.setAttribute('size', props.size);\n      element.setAttribute('emphasis', props.emphasis);\n      if (props.fluid) {\n        element.setAttribute('fluid', '');\n      } else {\n        element.removeAttribute('fluid');\n      }\n    }\n\n    // Forward props to anchor elements by adding CSS classes\n    if (tagName === 'a') {\n      element.classList.add('nv-button');\n      element.classList.add(`size-${props.size}`);\n      element.classList.add(`emphasis-${props.emphasis}`);\n      if (props.fluid) {\n        element.classList.add('fluid');\n      } else {\n        element.classList.remove('fluid');\n      }\n    }\n  });\n}\n"]}

package/dist/collection/components/nv-buttongroup/styles/nv-buttongroup.css

@@ -0,0 +1,73 @@
+nv-buttongroup {
+  display: flex;
+}
+nv-buttongroup[emphasis=high] {
+  gap: 1px;
+}
+nv-buttongroup[emphasis=low] .group-item, nv-buttongroup[emphasis=low] .group-item:hover {
+  border: 1px solid var(--components-button-low-text);
+}
+nv-buttongroup[emphasis=lower] .group-item, nv-buttongroup[emphasis=lower] .group-item:hover {
+  border: 1px solid var(--components-button-lower-text);
+}
+nv-buttongroup:not([orientation=vertical]) .group-item:not(.last):not(.first) {
+  border-radius: 0;
+}
+nv-buttongroup:not([orientation=vertical]) .group-item.first {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+nv-buttongroup:not([orientation=vertical]) .group-item.last {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+nv-buttongroup:not([orientation=vertical])[emphasis=medium] .group-item:not(.last) {
+  border-right: none;
+}
+nv-buttongroup:not([orientation=vertical])[emphasis=low] .group-item:not(.last) {
+  border-right: none;
+}
+nv-buttongroup:not([orientation=vertical])[emphasis=low] .group-item:not(.first) {
+  border-left: none;
+}
+nv-buttongroup:not([orientation=vertical])[emphasis=lower] .group-item:not(.last) {
+  border-right: none;
+}
+nv-buttongroup:not([orientation=vertical])[emphasis=lower] .group-item:not(.first) {
+  border-left: none;
+}
+nv-buttongroup[orientation=vertical] {
+  flex-direction: column;
+  align-items: stretch;
+  width: fit-content;
+}
+nv-buttongroup[orientation=vertical] .group-item {
+  width: unset;
+  display: flex;
+}
+nv-buttongroup[orientation=vertical] .group-item:not(.last):not(.first) {
+  border-radius: 0;
+}
+nv-buttongroup[orientation=vertical] .group-item.first {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+nv-buttongroup[orientation=vertical] .group-item.last {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+nv-buttongroup[orientation=vertical][emphasis=medium] .group-item:not(.last) {
+  border-bottom: none;
+}
+nv-buttongroup[orientation=vertical][emphasis=low] .group-item:not(.last) {
+  border-bottom: none;
+}
+nv-buttongroup[orientation=vertical][emphasis=low] .group-item:not(.first) {
+  border-top: none;
+}
+nv-buttongroup[orientation=vertical][emphasis=lower] .group-item:not(.last) {
+  border-bottom: none;
+}
+nv-buttongroup[orientation=vertical][emphasis=lower] .group-item:not(.first) {
+  border-top: none;
+}