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

package/dist/cjs/nv-button.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-button.entry.cjs.js","sources":["src/components/nv-button/styles/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\n// Make sure to update nv-button class in the tailwind-components.scss file when\n// you add new styles or change the structure here.\nnv-button {\n  @include root-styles();\n\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $emphases {\n    &[emphasis=\"#{$emphasis}\"] {\n      @include emphasis-styles($emphasis);\n\n      &[active]:not([active=\"false\"]) {\n        @include active-styles($emphasis);\n      }\n\n      &[danger]:not([danger=\"false\"]) {\n        @include danger-styles($emphasis);\n      }\n    }\n  }\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include fluid-styles();\n  }\n\n  &[loading]:not([loading=\"false\"]) {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n}\n","import {\n  Component,\n  Listen,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n  tag: 'nv-button',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvButtonElement;\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   * Use this prop to highlight the button when it represents the current page\n   * or active selection. This helps users understand their navigation context.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Applies styling that visually indicates the button represents a dangerous\n   * action.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\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.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ reflect: true, mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Allows the button to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\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 form associated with the button in case the (submit) button is not a child of a form.\n   * Matches the native HTML button 'form' attribute behavior.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  /**\n   * Use this to make the button skip-able when users navigate with the keyboard.\n   * The button remains clickable but won’t be reached via the Tab key.\n   */\n  @Prop({ reflect: true })\n  readonly disableTabindex: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles button click events, managing form actions and disabled states.\n   * Prevents default behavior when button is disabled or loading, and\n   * processes form submissions/resets when appropriate.\n   * @param {Event} event - The click event.\n   */\n  private handleButtonClick = (event: Event): void => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (\n      this.type !== ButtonType.Button &&\n      (this.form || this.internals?.form)\n    ) {\n      this.processFormAction();\n    } else if (this.form && this.type === ButtonType.Button) {\n      console.warn(\n        'Button has a form id but is not of type submit or reset so no form action will be processed.',\n        `Button:`,\n        this.el,\n      );\n    }\n  };\n\n  /**\n   * Processes form-related actions by finding the associated form element\n   * and triggering the appropriate action (submit/reset) based on button type.\n   * Falls back to ElementInternals form if no explicit form ID is provided.\n   */\n  private processFormAction = (): void => {\n    const formElement = this.form\n      ? (document.getElementById(this.form) as HTMLFormElement)\n      : this.internals?.form;\n\n    if (!formElement) {\n      console.warn(\n        'No form element found.',\n        `Form ID: ${this.form || 'Not provided'}`,\n        `Internals form:`,\n        this.internals?.form,\n      );\n      return;\n    }\n\n    switch (this.type) {\n      case ButtonType.Submit:\n        formElement.requestSubmit();\n        break;\n      case ButtonType.Reset:\n        formElement.reset();\n        break;\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  //#endregion EVENTS\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        tabindex={this.disableTabindex ? -1 : 0}\n        onClick={this.handleButtonClick}\n      >\n        {this.loading && (\n          <nv-loader\n            size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n          ></nv-loader>\n        )}\n\n        <slot name=\"leading-icon\"></slot>\n        <slot></slot>\n        <slot name=\"trailing-icon\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"names":["ButtonType","h","Host","ButtonSize"],"mappings":"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"}
+{"version":3,"file":"nv-button.entry.cjs.js","sources":["src/components/nv-button/styles/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\n// Make sure to update nv-button class in the tailwind-components.scss file when\n// you add new styles or change the structure here.\nnv-button {\n  @include root-styles();\n\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $emphases {\n    &[emphasis=\"#{$emphasis}\"] {\n      @include emphasis-styles($emphasis);\n\n      &[active]:not([active=\"false\"]) {\n        @include active-styles($emphasis);\n      }\n\n      &[danger]:not([danger=\"false\"]) {\n        @include danger-styles($emphasis);\n      }\n    }\n  }\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include fluid-styles();\n  }\n\n  &[loading]:not([loading=\"false\"]) {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n}\n","import {\n  Component,\n  Listen,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n  tag: 'nv-button',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvButtonElement;\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   * Use this prop to highlight the button when it represents the current page\n   * or active selection. This helps users understand their navigation context.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Applies styling that visually indicates the button represents a dangerous\n   * action.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\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.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ reflect: true, mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Allows the button to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\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 form associated with the button in case the (submit) button is not a child of a form.\n   * Matches the native HTML button 'form' attribute behavior.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  /**\n   * Use this to make the button skip-able when users navigate with the keyboard.\n   * The button remains clickable but won’t be reached via the Tab key.\n   */\n  @Prop({ reflect: true })\n  readonly disableTabindex: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles button click events, managing form actions and disabled states.\n   * Prevents default behavior when button is disabled or loading, and\n   * processes form submissions/resets when appropriate.\n   * @param {Event} event - The click event.\n   */\n  private handleButtonClick = (event: Event): void => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (\n      this.type !== ButtonType.Button &&\n      (this.form || this.internals?.form)\n    ) {\n      this.processFormAction();\n    } else if (this.form && this.type === ButtonType.Button) {\n      console.warn(\n        'Button has a form id but is not of type submit or reset so no form action will be processed.',\n        `Button:`,\n        this.el,\n      );\n    }\n  };\n\n  /**\n   * Processes form-related actions by finding the associated form element\n   * and triggering the appropriate action (submit/reset) based on button type.\n   * Falls back to ElementInternals form if no explicit form ID is provided.\n   */\n  private processFormAction = (): void => {\n    const formElement = this.form\n      ? (document.getElementById(this.form) as HTMLFormElement)\n      : this.internals?.form;\n\n    if (!formElement) {\n      console.warn(\n        'No form element found.',\n        `Form ID: ${this.form || 'Not provided'}`,\n        `Internals form:`,\n        this.internals?.form,\n      );\n      return;\n    }\n\n    switch (this.type) {\n      case ButtonType.Submit:\n        formElement.requestSubmit();\n        break;\n      case ButtonType.Reset:\n        formElement.reset();\n        break;\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  //#endregion EVENTS\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        tabindex={this.disableTabindex ? -1 : 0}\n        onClick={this.handleButtonClick}\n      >\n        {this.loading && (\n          <nv-loader\n            size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n          ></nv-loader>\n        )}\n\n        <slot name=\"leading-icon\"></slot>\n        <slot></slot>\n        <slot name=\"trailing-icon\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"names":["ButtonType","h","Host","ButtonSize"],"mappings":"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"}

package/dist/cjs/nv-calendar.cjs.entry.js

@@ -408,8 +408,7 @@ const WeekNumbers = props => {
         return () => handleWeekClick(week);
     };
     return (index.h("div", { class: "week-numbers" }, index.h("div", { class: "week-header" }, localizedWeekText), weeks.map((week, weekIndex) => {
-        var _a;
-        const firstDayWithDate = ((_a = week.find(d => d.date)) === null || _a === void 0 ? void 0 : _a.date) || new Date();
+        const firstDayWithDate = week.find(d => d.date)?.date || new Date();
         const weekNumber = getWeekNumber(firstDayWithDate);
         const isClickable = selectionType === 'range';
         return (index.h("div", { class: `week-number ${isClickable ? 'clickable' : ''}`, onClick: createWeekHandler(week), key: `week-${weekIndex}`, role: isClickable ? 'button' : undefined, tabindex: isClickable ? 0 : undefined }, weekNumber));
@@ -640,7 +639,7 @@ const NvCalendar = class {
                 }
                 else {
                     // Handle malformed dates gracefully - reset state
-                    console.warn(`Invalid date range format: ${values === null || values === void 0 ? void 0 : values[0]}, ${values === null || values === void 0 ? void 0 : values[1]}`);
+                    console.warn(`Invalid date range format: ${values?.[0]}, ${values?.[1]}`);
                     this.startDate = null;
                     this.endDate = null;
                     if (!this.showActions) {
@@ -918,26 +917,17 @@ const NvCalendar = class {
         this.handleMonthChange = (event, calendarOffset = 0) => {
             const select = event.target;
             const selectedMonth = parseInt(select.value, 10);
-            const newDate = new Date(this.currentDate);
-            // Date for the calendar being changed
-            const targetCalendarDate = new Date(newDate.toUTCString());
+            // Calculate the current displayed year for this specific calendar
+            const targetCalendarDate = new Date(this.currentDate);
+            targetCalendarDate.setUTCDate(1);
             targetCalendarDate.setUTCMonth(targetCalendarDate.getUTCMonth() + calendarOffset);
-            const currentMonth = targetCalendarDate.getUTCMonth();
-            let monthDiff = selectedMonth - currentMonth;
-            // Smartly adjust for year change
-            if (monthDiff > 6) {
-                // e.g. from Jan to Dec, go back 1 month
-                monthDiff -= 12;
-            }
-            if (monthDiff < -6) {
-                // e.g. from Dec to Jan, go forward 1 month
-                monthDiff += 12;
-            }
-            // Apply the diff to the original `currentDate`
-            const finalDate = new Date(this.currentDate);
-            // Avoid day-of-month rollover when moving to shorter months.
-            finalDate.setUTCDate(1);
-            finalDate.setUTCMonth(finalDate.getUTCMonth() + monthDiff);
+            const currentYear = targetCalendarDate.getUTCFullYear();
+            // Create a new date with the selected month, keeping the SAME year
+            // This ensures the year never changes when selecting a month
+            const newTargetDate = new Date(Date.UTC(currentYear, selectedMonth, 1));
+            // Calculate what currentDate should be by subtracting the offset
+            const finalDate = new Date(newTargetDate);
+            finalDate.setUTCMonth(finalDate.getUTCMonth() - calendarOffset);
             this.currentDate = finalDate;
         };
         /**
@@ -1416,8 +1406,8 @@ const NvCalendar = class {
      * @slot default - Child content of the component.
      */
     render() {
-        return (index.h(index.Host, { key: '9a2df275a214bedb084034e2936cd12ba2024300' }, index.h("div", { key: '400094ae82785980d16040b659e9a1b04d8c0de8', class: "datepicker-root" }, index.h("div", { key: '9e38e04428b64b4185555491c970a09326beceb8', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, index.h("div", { key: '29e6968fad93c8d822beabf37bdd7840cd90eb62', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
-            this.hasActions) && (index.h("div", { key: '4a49e27c472dff679cd8e6ea1db3fcd16e164522', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), index.h("slot", { key: '4482d2bbd341cacd8b1c529d3be054e8a33fd515' })));
+        return (index.h(index.Host, { key: '18793334c6b01685f8c42acb0709bb3b35a1d466' }, index.h("div", { key: '2fa622b5027d4fc94732e0826fac044056e8bca1', class: "datepicker-root" }, index.h("div", { key: '4c88d823b5a720d3529bc199014b5e498ba1a701', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, index.h("div", { key: 'e6be82fb79db589171e4db2beb640fb005dd603f', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
+            this.hasActions) && (index.h("div", { key: '5991593c0ae9128c3dfea099db2864a37105c9a4', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), index.h("slot", { key: '5e92296fdc3732ea7f241a5ce381e0234330e7a3' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {