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

package/dist/native/p-464bb197.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["findFirstButtonOrLink","element","tagName","toLowerCase","child","Array","from","children","found","forwardPropsToChildren","containerElement","props","buttonElements","forEach","buttonOrLink","push","classList","remove","index","isFirst","isLast","length","add","setAttribute","size","emphasis","fluid","removeAttribute","nvButtongroupCss","NvButtongroupStyle0","NvButtongroup","constructor","hostRef","this","orientation","el","setupMutationObserver","mutationObserver","MutationObserver","mutations","mutation","type","addedNodes","observe","childList","subtree","onEmphasisChange","onSizeChange","onFluidChange","componentWillLoad","disconnectedCallback","disconnect","render","h","Host","key"],"sources":["src/components/nv-buttongroup/nv-buttongroup.utils.ts","src/components/nv-buttongroup/styles/nv-buttongroup.scss?tag=nv-buttongroup","src/components/nv-buttongroup/nv-buttongroup.tsx"],"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","@use \"./mixins\" as *;\n\nnv-buttongroup {\n  @include root-styles();\n\n  &[emphasis=\"high\"] {\n    @include high-emphasis-styles();\n  }\n  &[emphasis=\"low\"] {\n    @include low-emphasis-styles();\n  }\n  &[emphasis=\"lower\"] {\n    @include lower-emphasis-styles();\n  }\n\n  &:not([orientation=\"vertical\"]) {\n    @include border-radius-horizontal-styles();\n\n    &[emphasis=\"medium\"] {\n      @include medium-emphasis-horizontal-styles();\n    }\n    &[emphasis=\"low\"] {\n      @include low-emphasis-horizontal-styles();\n    }\n    &[emphasis=\"lower\"] {\n      @include lower-emphasis-horizontal-styles();\n    }\n  }\n\n  &[orientation=\"vertical\"] {\n    @include vertical-styles();\n    @include border-radius-vertical-styles();\n\n    &[emphasis=\"medium\"] {\n      @include medium-emphasis-vertical-styles();\n    }\n    &[emphasis=\"low\"] {\n      @include low-emphasis-vertical-styles();\n    }\n    &[emphasis=\"lower\"] {\n      @include lower-emphasis-vertical-styles();\n    }\n  }\n}","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"],"mappings":"kEASgBA,EACdC,GAGA,MAAMC,EAAUD,EAAQC,QAAQC,cAChC,GACED,IAAY,aACZA,IAAY,iBACZA,IAAY,IACZ,CACA,OAAOD,C,CAIT,IAAK,MAAMG,KAASC,MAAMC,KAAKL,EAAQM,UAA4B,CACjE,MAAMC,EAAQR,EAAsBI,GACpC,GAAII,EAAO,CACT,OAAOA,C,EAIX,OAAO,IACT,C,SAUgBC,EACdC,EACAC,GASA,MAAMJ,EAAWF,MAAMC,KAAKI,EAAiBH,UAC7C,MAAMK,EAAgC,GAGtCL,EAASM,SAAQT,IACf,MAAMU,EAAed,EAAsBI,GAC3C,GAAIU,EAAc,CAChBF,EAAeG,KAAKD,E,KAIxBF,EAAeC,SAAQZ,IACrBA,EAAQe,UAAUC,OAAO,QAAS,OAAQ,aAAa,IAIzDL,EAAeC,SAAQ,CAACZ,EAASiB,KAC/B,MAAMC,EAAUD,IAAU,EAC1B,MAAME,EAASF,IAAUN,EAAeS,OAAS,EACjD,MAAMnB,EAAUD,EAAQC,QAAQC,cAGhC,GAAIgB,EAAS,CACXlB,EAAQe,UAAUM,IAAI,Q,CAExB,GAAIF,EAAQ,CACVnB,EAAQe,UAAUM,IAAI,O,CAIxBrB,EAAQe,UAAUM,IAAI,cAGtB,GAAIpB,IAAY,aAAeA,IAAY,gBAAiB,CAC1DD,EAAQsB,aAAa,OAAQZ,EAAMa,MACnCvB,EAAQsB,aAAa,WAAYZ,EAAMc,UACvC,GAAId,EAAMe,MAAO,CACfzB,EAAQsB,aAAa,QAAS,G,KACzB,CACLtB,EAAQ0B,gBAAgB,Q,EAK5B,GAAIzB,IAAY,IAAK,CACnBD,EAAQe,UAAUM,IAAI,aACtBrB,EAAQe,UAAUM,IAAI,QAAQX,EAAMa,QACpCvB,EAAQe,UAAUM,IAAI,YAAYX,EAAMc,YACxC,GAAId,EAAMe,MAAO,CACfzB,EAAQe,UAAUM,IAAI,Q,KACjB,CACLrB,EAAQe,UAAUC,OAAO,Q,KAIjC,CC3GA,MAAMW,EAAmB,qkEACzB,MAAAC,EAAeD,E,MCYFE,EAAa,MAL1B,WAAAC,CAAAC,G,UAkBWC,KAAAT,KAAwB,KAQxBS,KAAAR,SAAgC,SAOhCQ,KAAAP,MAAiB,MAOjBO,KAAAC,YAAyC,aAS1CD,KAAAxB,uBAAyB,KAC/BA,EAAuBwB,KAAKE,GAAI,CAC9BX,KAAMS,KAAKT,KACXC,SAAUQ,KAAKR,SACfC,MAAOO,KAAKP,OACZ,EAMIO,KAAAG,sBAAwB,KAC9BH,KAAKI,iBAAmB,IAAIC,kBAAiBC,IAC3CA,EAAU1B,SAAQ2B,IAChB,GAAIA,EAASC,OAAS,aAAeD,EAASE,WAAWrB,OAAS,EAAG,CAEnEY,KAAKxB,wB,IAEP,IAGJwB,KAAKI,iBAAiBM,QAAQV,KAAKE,GAAI,CACrCS,UAAW,KACXC,QAAS,MACT,C,CAQJ,gBAAAC,GACEb,KAAKxB,wB,CAIP,YAAAsC,GACEd,KAAKxB,wB,CAIP,aAAAuC,GACEf,KAAKxB,wB,CAOP,iBAAAwC,GACEhB,KAAKxB,yBACLwB,KAAKG,uB,CAGP,oBAAAc,GACE,GAAIjB,KAAKI,iBAAkB,CACzBJ,KAAKI,iBAAiBc,Y,EAU1B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/native/{p-916acbd3.entry.js → p-49504fd6.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as e,h as t,H as a,g as r}from"./p-d0a33e64.js";const s="nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";const i=s;const n=class{constructor(t){o(this,t);this.openChanged=e(this,"openChanged",7);this.placement="bottom";this.enterDelay=0}componentWillLoad(){if(!this.triggerElement)this.triggerElement=Array.from(this.el.children).find((o=>o.getAttribute("slot")===null))}render(){return t(a,{key:"ced39f0ebd3ee8eba520e6d6241728e95031dafc"},t("slot",{key:"2b65cb626604a29e1924e7eb2bbb4e937c1a9e9c"}),t("nv-popover",{key:"d4c91e52da651c1545b6d7af98c740e08eeaffbf",triggerMode:"hover",hasArrow:true,placement:this.placement,triggerElement:this.triggerElement,groupName:"tooltip",enterDelay:this.enterDelay},t("p",{key:"45805ecf6ffee80f4f81acce2d921ad66585bf2b",slot:"content"},this.message),t("slot",{key:"e6a7e80c35c3a87627a50b271c86783fab791338",name:"content"})))}get el(){return r(this)}};n.style=i;export{n as nv_tooltip};
-//# sourceMappingURL=p-916acbd3.entry.js.map
+import{r as o,c as t,h as e,H as a,g as r}from"./p-d0a33e64.js";const s="nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";const d=s;const i=class{constructor(e){o(this,e);this.openChanged=t(this,"openChanged",7);this.placement="bottom";this.enterDelay=0}componentWillLoad(){if(!this.triggerElement)this.triggerElement=Array.from(this.el.children).find((o=>o.getAttribute("slot")===null))}render(){return e(a,{key:"d4ee448b0dddf4229d3d845d86758a1e794c35e8"},e("slot",{key:"5d24c99b18925e44a8dedd868922227339638e73"}),e("nv-popover",{key:"4ee6f08994042689a628c238905484b1aa9de555",triggerMode:"hover",hasArrow:true,placement:this.placement,triggerElement:this.triggerElement,groupName:"tooltip",enterDelay:this.enterDelay},e("p",{key:"e8ac1f3f739f3b12172884e298494dede993b888",slot:"content"},this.message),e("slot",{key:"96c2e3f5d9b72f5311ebe89e8ebe18274b2bfb13",name:"content"})))}get el(){return r(this)}};i.style=d;export{i as nv_tooltip};
+//# sourceMappingURL=p-49504fd6.entry.js.map