@nova-design-system/nova-react 3.0.0 → 3.2.0

package/dist/cjs/nv-fielddaterange.entry-DVB8Rwxk.js

@@ -1,355 +0,0 @@
-'use strict';
-
-var index = require('./index-Byv3Vmev.js');
-var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
-var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
-require('react');
-require('./_commonjsHelpers-1789f0cf-BJu3ubxk.js');
-
-const nvFielddaterangeCss = "nv-fielddaterange{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fielddaterange[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddaterange[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddaterange[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fielddaterange[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddaterange label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddaterange .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;flex:1;min-width:0;padding-right:32px}nv-fielddaterange .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddaterange .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddaterange .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddaterange .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fielddaterange .input-wrapper .input-container input:focus{outline:none}nv-fielddaterange .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .input-wrapper .input-container .toggle-calendar-icon{position:absolute;right:0;top:50%;transform:translateY(-50%)}nv-fielddaterange .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddaterange .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fielddaterange .range-inputs{display:flex;align-items:center;gap:8px;flex:1}nv-fielddaterange .range-inputs input{flex:1;border:none;outline:none;padding:0;font-size:var(--form-field-font-size);color:var(--components-form-field-content-text);background:transparent;min-width:0;text-align:center}nv-fielddaterange .range-inputs input::placeholder{color:var(--components-form-field-content-placeholder)}nv-fielddaterange .range-inputs input:disabled{cursor:not-allowed;color:var(--components-form-field-content-text);background-color:var(--components-form-field-background-disabled)}";
-const NvFielddaterangeStyle0 = nvFielddaterangeCss;
-
-const NvFielddaterange = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.dateRangeChange = index.createEvent(this, "dateRangeChange");
-        this.popoverId = v4A79185f4.v4();
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the start input element and the for attribute of the associated
-         * label. If no ID is provided, a random one will be automatically generated.
-         */
-        this.startInputId = v4A79185f4.v4();
-        /**
-         * Sets the ID for the end input element and the for attribute of the associated
-         * label. If no ID is provided, a random one will be automatically generated.
-         */
-        this.endInputId = v4A79185f4.v4();
-        /**
-         * Disables both input fields.
-         */
-        this.disabled = false;
-        /**
-         * Sets both input fields as read-only.
-         */
-        this.readonly = false;
-        /**
-         * Marks both input fields as required.
-         */
-        this.required = false;
-        /**
-         * Indicates an error state.
-         */
-        this.error = false;
-        /**
-         * Indicates a success state.
-         */
-        this.success = false;
-        /**
-         * Autofocus the start input when the component is mounted.
-         */
-        this.shouldAutoFocus = false;
-        /**
-         * The initial value of the date range (in string format).
-         */
-        this.value = '';
-        /**
-         * The current value of the start date in string format.
-         */
-        this.startValue = '';
-        /**
-         * The current value of the end date in string format.
-         */
-        this.endValue = '';
-        /**
-         * Controls the opening of the popover.
-         */
-        this.open = false;
-        /**
-         * First day of the week 0 = Sunday, 1 = Monday, etc.
-         * @default 1
-         */
-        this.firstDayOfWeek = 1;
-        /**
-         * Number of calendars to display
-         * @default 2
-         */
-        this.numberOfCalendars = 2;
-        /**
-         * Minimum date for selection ISO string format, ex: 2025-01-01
-         */
-        this.min = '';
-        /**
-         * Maximum date for selection ISO string format, ex: 2025-12-31
-         */
-        this.max = '';
-        /** Locale for date formatting
-         * @default 'en-BE'
-         */
-        this.locale = 'en-BE';
-        /** Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc.
-         * @default 'YYYY-MM-DD'
-         */
-        this.dateFormat = 'YYYY-MM-DD';
-        /**
-         * Footer placement
-         * @default 'bottom'
-         */
-        this.shortcutsPlacement = 'bottom';
-        /**
-         * Show action buttons
-         * @default false
-         */
-        this.showActions = false;
-        /**
-         * Custom actions to display in the footer
-         * JSON array of objects with the following properties:
-         * - label: string
-         * - onClick: function
-         * @default '[]'
-         */
-        this.shortcuts = '[]';
-        /**
-         * Show week numbers
-         * @default true
-         */
-        // eslint-disable-next-line @stencil-community/ban-default-true
-        this.showWeekNumbers = true;
-        /**
-         * Disabled dates ISO string array
-         * @default '[]'
-         */
-        this.disabledDates = '[]';
-        /**
-         * Closes the popover when a click is detected outside the component.
-         * @param {MouseEvent} event - The mouse event
-         */
-        this.handleClickOutside = (event) => {
-            if (this.open && this.el && !this.el.contains(event.target)) {
-                this.open = false;
-            }
-        };
-        /**
-         * Handles the input event on the start input element.
-         * @param {Event} event - The input event
-         */
-        this.handleStartInput = (event) => {
-            if (this.readonly || this.disabled) {
-                event.preventDefault();
-                return;
-            }
-            const input = event.target;
-            this.startValue = input.value;
-            this.dateRangeChange.emit({ start: input.value, end: this.endValue });
-        };
-        /**
-         * Handles the input event on the end input element.
-         * @param {Event} event - The input event
-         */
-        this.handleEndInput = (event) => {
-            if (this.readonly || this.disabled) {
-                event.preventDefault();
-                return;
-            }
-            const input = event.target;
-            this.endValue = input.value;
-            this.dateRangeChange.emit({ start: this.startValue, end: input.value });
-        };
-        /**
-         * Handles focus events on the input elements.
-         * @param {FocusEvent} event - The focus event
-         */
-        this.handleFocus = (event) => {
-            if (this.readonly || this.disabled) {
-                event.preventDefault();
-                event.target.blur();
-                return;
-            }
-            // Open the popover when an input is focused
-            this.open = true;
-        };
-        /**
-         * Toggles the opening/closing of the popover.
-         */
-        this.toggleCalendar = () => {
-            if (this.readonly || this.disabled) {
-                return;
-            }
-            this.open = !this.open;
-        };
-    }
-    //#endregion PROPERTIES
-    /****************************************************************************/
-    //#region METHODS
-    /**
-     * Converts the nv-calendar date format to the format expected by Inputmask.
-     * @param {string} format - The date format to convert
-     * @returns {string} The converted format for Inputmask
-     */
-    convertToInputmaskFormat(format) {
-        // Si le format n'est pas spécifié, utiliser le format par défaut YYYY-MM-DD
-        if (!format) {
-            return 'dd/mm/yyyy';
-        }
-        // Conversion des formats
-        const formatMap = {
-            'YYYY-MM-DD': 'yyyy-mm-dd',
-            'DD/MM/YYYY': 'dd/mm/yyyy',
-            'MM/DD/YYYY': 'mm/dd/yyyy',
-            'DD.MM.YYYY': 'dd.mm.yyyy',
-            'YYYYMMDD': 'yyyymmdd',
-        };
-        return formatMap[format] || 'dd/mm/yyyy';
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    connectedCallback() {
-        document.addEventListener('click', this.handleClickOutside);
-    }
-    componentWillLoad() {
-        if (this.value) {
-            try {
-                const range = JSON.parse(this.value);
-                this.startValue = range.start || '';
-                this.endValue = range.end || '';
-            }
-            catch (error) {
-                console.error('Invalid JSON for value:');
-                console.error(error);
-            }
-        }
-    }
-    componentDidLoad() {
-        const inputs = this.el.querySelectorAll('.input-wrapper input');
-        inputs.forEach((input) => {
-            const inputMask = new inputmaskEdcad3c1.Inputmask({
-                alias: 'datetime',
-                inputFormat: this.convertToInputmaskFormat(this.dateFormat),
-                placeholder: '_',
-                clearIncomplete: false,
-                showMaskOnHover: false,
-                showMaskOnFocus: false,
-                clearMaskOnLostFocus: false,
-                insertMode: true,
-                rightAlign: false,
-                oncomplete: function (e) {
-                    const input = e.target;
-                    const event = new CustomEvent('input', { bubbles: true });
-                    input.dispatchEvent(event);
-                },
-            });
-            inputMask.mask(input);
-            // Set the value after applying the mask
-            if (input.name === this.startName && this.startValue) {
-                requestAnimationFrame(() => {
-                    input.value = this.startValue;
-                    const event = new CustomEvent('input', { bubbles: true });
-                    input.dispatchEvent(event);
-                });
-            }
-            else if (input.name === this.endName && this.endValue) {
-                requestAnimationFrame(() => {
-                    input.value = this.endValue;
-                    const event = new CustomEvent('input', { bubbles: true });
-                    input.dispatchEvent(event);
-                });
-            }
-        });
-    }
-    componentDidRender() {
-        const inputs = this.el.querySelectorAll('.input-wrapper input');
-        inputs.forEach((input) => {
-            const value = input.name === this.startName
-                ? this.startValue
-                : this.endName
-                    ? this.endValue
-                    : '';
-            if (value) {
-                // Make sure the value is defined both as a property and attribute
-                requestAnimationFrame(() => {
-                    input.value = value;
-                    input.setAttribute('value', value);
-                });
-            }
-        });
-    }
-    disconnectedCallback() {
-        document.removeEventListener('click', this.handleClickOutside);
-    }
-    /**
-     * Handles the range date selection event from nv-calendar.
-     * @param {CustomEvent<DateRange>} event - The custom event
-     */
-    handleRangeDateChange(event) {
-        const { start, end } = event.detail || {};
-        // Check that both dates are defined
-        if (start && end) {
-            this.startValue = start;
-            this.endValue = end;
-            this.dateRangeChange.emit({
-                start: this.startValue,
-                end: this.endValue,
-            });
-            if (!this.showActions) {
-                this.open = false;
-            }
-        }
-    }
-    handleClosePopover() {
-        this.open = false;
-    }
-    handleApplyDateRange() {
-        this.open = false;
-    }
-    /**
-     * Handles keyboard events.
-     * @param {KeyboardEvent} event - The keyboard event
-     */
-    handleKeyDown(event) {
-        if (!this.open) {
-            if (event.key === 'ArrowDown') {
-                this.open = true;
-                event.preventDefault();
-                return;
-            }
-            return;
-        }
-        if (!this.popoverElement) {
-            console.warn('nv-fielddaterange -> Popover element is not defined');
-            return;
-        }
-    }
-    handleValueChange(newValue) {
-        try {
-            const range = JSON.parse(newValue);
-            this.startValue = range.start || '';
-            this.endValue = range.end || '';
-        }
-        catch (error) {
-            console.error('Invalid JSON for value:', error);
-        }
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: '965223047219ae767b07ccecb0a00580ea39c232' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '096d6a34148da30d61686024b5891e7e15cd92e2', htmlFor: this.startInputId }, index.h("slot", { key: 'ee6e84ef1927ad809e7dddb2f4ad5ef7380d0bca', name: "label" }, this.label))), index.h("nv-popover", { key: '1a0549e85ab73157b379fcbcee014a7d85be9752', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'd9fc4c8f379e3c1884867c87bcaa67b2da1c64ae', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '4189696f3e877c19d4c24b09377b2ab0ce9aa437', name: "before-input" }), index.h("div", { key: '98025c8fc29121c736deb3042e961ef0eb1442fe', class: "input-container" }, index.h("slot", { key: '897481f836e33fd70a7c3b083a4e9b3db87637f2', name: "leading-input" }), index.h("div", { key: '788df58693fafaf8c78645b81d1b09a828138ccf', class: "range-inputs" }, index.h("input", { key: '7966b844668ca4cb02ac34886b62ee24cb7b1399', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.shouldAutoFocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus }), index.h("svg", { key: '67c0b68f0fb32ce122f9d4e5b1240440f3b649d0', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal" }, index.h("path", { key: 'eb68f32a768c1c48b51a45ddba3f85357b8045e6', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: 'b8ccaf592dc2d36719a8418800a736b06d1c1775', d: "M18 9l3 3l-3 3" }), index.h("path", { key: 'c4b8d8e8ffad9a339abcde63a9a0feb2ddc771d3', d: "M15 12h6" }), index.h("path", { key: '7a28c7086d7085163ff8d885acd7434b4e5ea69a', d: "M6 9l-3 3l3 3" }), index.h("path", { key: '39917978c25b13a270f0852818b31868f2034832', d: "M3 12h6" })), index.h("input", { key: 'aaad42e407d1fe8e31a7e7c153e2d4cd35d8d2df', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus })), index.h("nv-iconbutton", { key: '04701e7bdf80a869f8a5f519141ac99c0077c20b', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: 'cf1a48dcd20b4e363a746c9f26ecae8085e8ebbd', name: "after-input" })), index.h("div", { key: 'a36a223b6d5edd30bb9a4590d059caede5412b6a', slot: "content" }, index.h("nv-calendar", { key: '1ff22f214d648c4bb35455cf477529251c436e2d', dateFormat: this.dateFormat, rangeValue: this.startValue && this.endValue
-                ? JSON.stringify({
-                    start: this.startValue,
-                    end: this.endValue,
-                })
-                : '', firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range" }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '780f82060de810eb394285f4799511d2223312a3', class: "description" }, index.h("slot", { key: '326cbf626387738b9997f3b4d452c50ea2b3d5b2', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '6043f611a60f14976b8572e975621fac57b18f89', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '129fe5bcd6c5bd9449242dc6b4f0e1c90ae31082' })));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "value": ["handleValueChange"]
-    }; }
-};
-NvFielddaterange.style = NvFielddaterangeStyle0;
-
-exports.nv_fielddaterange = NvFielddaterange;

package/dist/cjs/nv-fieldnumber.entry-DegbEHRL.js

@@ -1,126 +0,0 @@
-'use strict';
-
-var index = require('./index-Byv3Vmev.js');
-var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
-require('react');
-
-const nvFieldnumberCss = "nv-fieldnumber {\n  --nv-field-border-default: var(--components-form-field-border-default);\n  --nv-field-border-hover: var(--components-form-field-border-hover);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--components-form-field-border-default);\n  --nv-field-border-readonly: var(--components-form-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-brand);\n  --nv-field-background: var(--components-form-field-background-default);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--form-gap-y);\n  box-sizing: border-box;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n  --nv-field-border-default: var(--components-form-field-border-readonly);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n  --nv-field-border-default: var(--components-form-field-border-error);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-destructive);\n}\nnv-fieldnumber[success]:not([success=false]) {\n  --nv-field-border-default: var(--components-form-field-border-success);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after {\n  content: \"*\";\n  color: var(--components-form-text-required);\n  font-weight: 700;\n}\nnv-fieldnumber label {\n  display: flex;\n  align-items: center;\n  gap: var(--form-label-gap);\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default, 1);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n  container-type: inline-size;\n  container-name: field-number-input-container;\n  overflow: hidden;\n  position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n  border-color: var(--nv-field-border-hover);\n}\nnv-fieldnumber .input-wrapper .input-container:focus-within, nv-fieldnumber .input-wrapper .input-container:focus-within:hover, nv-fieldnumber .input-wrapper .input-container:focus, nv-fieldnumber .input-wrapper .input-container:focus:hover {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-readonly);\n  border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-disabled);\n  border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  padding: var(--form-field-padding-y) var(--form-field-padding-x);\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n  width: 100%;\n  appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n  outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n  overflow: hidden;\n  color: var(--components-form-field-content-placeholder);\n  text-overflow: ellipsis;\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n  appearance: none;\n  margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n  color: var(--nv-field-border-default);\n  margin-right: var(--form-field-gap);\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n  display: flex;\n  border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\n@container field-number-input-container (width < 150px) {\n  nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n    display: none;\n  }\n  nv-fieldnumber .input-wrapper .input-container .stepper {\n    display: none;\n  }\n}\nnv-fieldnumber .description {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n  color: var(--components-form-text-description-error);\n}";
-const NvFieldnumberStyle0 = nvFieldnumberCss;
-
-const NvFieldnumber = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.valueChanged = index.createEvent(this, "valueChanged");
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the input element and the for attribute of the associated
-         * label. If no ID is provided, a random one will be automatically generated
-         * to ensure unique identification, facilitating proper label association and
-         * accessibility.
-         */
-        this.inputId = v4A79185f4.v4();
-        /**
-         * The disabled prop lets you turn off the input field so that users can’t
-         * type in it. When disabled, the field is grayed out and won’t respond to#
-         * clicks or touches.
-         */
-        this.disabled = false;
-        /**
-         * Display the input field’s content without allowing users to change it.
-         * Users can still click on it, select, and copy the text, but they won’t be
-         * able to type or delete anything.
-         */
-        this.readonly = false;
-        /**
-         * Marks the input field as required, ensuring that the user must fill it out
-         * before submitting the form.
-         */
-        this.required = false;
-        /**
-         * Alters the input field’s appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Changes the input field’s appearance to indicate successful input or
-         * validation.
-         */
-        this.success = false;
-        /**
-         * Define the increment value for the input field. It determines how much the
-         * value will increase or decrease when the user clicks the stepper buttons.
-         */
-        this.step = 1;
-        /**
-         * Applies focus to the input field as soon as the component is mounted. This
-         * is equivalent to setting the native autofocus attribute on an <input>
-         * element.
-         */
-        this.autofocus = false;
-        //#endregion WATCHERS
-        /****************************************************************************/
-        //#region METHODS
-        this.handleInput = (event) => {
-            const input = event.target;
-            this.value = Number(input.value);
-        };
-        this.handleInputContainerClick = () => {
-            this.inputElement.focus();
-        };
-        this.handlePlus = () => {
-            this.inputElement.stepUp();
-            this.value = Number(this.inputElement.value);
-        };
-        this.handleMinus = () => {
-            this.inputElement.stepDown();
-            this.value = Number(this.inputElement.value);
-        };
-        // prevents text selection when clicking the buttons multiple times
-        this.preventSelection = (event) => {
-            event.preventDefault();
-        };
-        this.isMinValueReached = () => {
-            return this.min !== undefined && this.value <= this.min;
-        };
-        this.isMaxValueReached = () => {
-            return this.max !== undefined && this.value >= this.max;
-        };
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region WATCHERS
-    watchValueHandler(newValue) {
-        this.valueChanged.emit(newValue);
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillRender() {
-        if (this.message) {
-            this.description = this.message;
-        }
-        if (this.validation) {
-            this.errorDescription = this.validation;
-            this.error = true;
-        }
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: 'e054d1e05c0623bf3d5d78c2bafb6d096dbcbd08' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '0743432faff56e8256b2a30fab68ced0592bbf6a', htmlFor: this.inputId }, index.h("slot", { key: '709f68c3f4bf6ade475cd6afbee5c9912c782c43', name: "label" }, this.label))), index.h("div", { key: '5798b0faf23bc671aeda3273dcfff7c1d1ca4109', class: "input-wrapper" }, index.h("slot", { key: '47b9f0ef000d2d98e2e3ad1c1f4191ce91c69266', name: "before-input" }), index.h("div", { key: '082d2ab64b892cc994955b723d1ab342414061fb', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '34511207a7ebc1cc5fe8cc91d05f4fa549fda316', name: "leading-input" }), index.h("input", { key: '20f96b319b6e7528d738bdc31152649575409dd1', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (index.h("nv-icon", { key: '2b05afbbc94bd39dd82a270511e4372536ee80ba', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '95d74e6298e49d422b19bf080d3e2de25c2ad8e2', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '5c665de10e9650003b127997cd6010e35d7d0b7a', class: "stepper" }, index.h("nv-iconbutton", { key: '9702ee4778623862e67d29a56f7790af364786bf', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: '20fc509c42230f6768d98e4144db12afae3649ef', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: 'd432d4e6fb8c4fd67c6c972b5c967e093cadfe68', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'e1d585c32f4cff50d84f5d1b6696856c8c875ef7', class: "description" }, index.h("slot", { key: '860b5fb8ba3e24fc728021b238b371178ae54ead', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'aaa707753b98415ca4e329fab9b45bfc3b42525a', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'f8c0910451550baa82663500a7c0339064720428', name: "error-description" }, this.errorDescription)))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "value": ["watchValueHandler"]
-    }; }
-};
-NvFieldnumber.style = NvFieldnumberStyle0;
-
-exports.nv_fieldnumber = NvFieldnumber;

package/dist/cjs/nv-fieldpassword.entry-gqjlEl7a.js

@@ -1,117 +0,0 @@
-'use strict';
-
-var index = require('./index-Byv3Vmev.js');
-var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
-require('react');
-
-const nvFieldpasswordCss = "nv-fieldpassword{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldpassword[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldpassword[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldpassword[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldpassword[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldpassword label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative}nv-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .input-wrapper .input-container:focus-within,nv-fieldpassword .input-wrapper .input-container:focus-within:hover,nv-fieldpassword .input-wrapper .input-container:focus,nv-fieldpassword .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldpassword .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldpassword .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldpassword .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldpassword .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldpassword .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
-const NvFieldpasswordStyle0 = nvFieldpasswordCss;
-
-const NvFieldpassword = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.valueChanged = index.createEvent(this, "valueChanged");
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the input element and the for attribute of the associated
-         * label. If no ID is provided, a random one will be automatically generated
-         * to ensure unique identification, facilitating proper label association and
-         * accessibility.
-         */
-        this.inputId = v4A79185f4.v4();
-        /**
-         * The disabled prop lets you turn off the input field so that users can’t
-         * type in it. When disabled, the field is grayed out and won’t respond to#
-         * clicks or touches.
-         */
-        this.disabled = false;
-        /**
-         * Display the input field’s content without allowing users to change it.
-         * Users can still click on it, select, and copy the text, but they won’t be
-         * able to type or delete anything.
-         */
-        this.readonly = false;
-        /**
-         * Marks the input field as required, ensuring that the user must fill it out
-         * before submitting the form.
-         */
-        this.required = false;
-        /**
-         * Alters the input field’s appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Changes the input field’s appearance to indicate successful input or
-         * validation.
-         */
-        this.success = false;
-        /**
-         * Defines the type of the input.
-         * @default 'text'
-         */
-        this.mode = 'text';
-        /**
-         * The autocomplete prop helps users fill out the input field faster by
-         * suggesting entries they’ve used before, like their email or address.
-         * You can turn it on to make forms more convenient or off to ensure users
-         * always type in fresh data.
-         */
-        this.autocomplete = 'off';
-        /**
-         * Hide the button to show/hide the password.
-         */
-        this.hidePasswordIcon = false;
-        /**
-         * Show/hide the password programmatically.
-         */
-        this.showPassword = false;
-        /**
-         * Applies focus to the input field as soon as the component is mounted. This
-         * is equivalent to setting the native autofocus attribute on an <input>
-         * element.
-         */
-        this.autofocus = false;
-        //#endregion EVENTS
-        /****************************************************************************/
-        //#region METHODS
-        this.handleInputContainerClick = () => {
-            this.inputElement.focus();
-        };
-        this.togglePasswordVisibility = () => {
-            this.showPasswordState = !this.showPasswordState;
-        };
-        this.handleInput = (event) => {
-            const input = event.target;
-            this.value = input.value; // Update the input value without worrying about the space
-            this.valueChanged.emit(input.value);
-        };
-    }
-    handleShowPasswordChange(newValue) {
-        this.showPasswordState = newValue;
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        this.showPasswordState = this.showPassword;
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: '4a6de90f24bd6607293d616d60f6d742c46b04a9' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '715f5935de3aa0f0f7b6aa9aa72c409a3875a849', htmlFor: this.inputId }, index.h("slot", { key: 'da11187833b12acfae578024bb67d717efbafaa1', name: "label" }, this.label))), index.h("div", { key: 'a669823e6c5aea5b4e0aacf0bfc1c8f7dbe67bab', class: "input-wrapper" }, index.h("slot", { key: '98b2b6eaaa867228a667bec2920c640ff0b829c7', name: "before-input" }), index.h("div", { key: 'fc896f9018563e80ea0f2aa1e2eb7992fd4a854c', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '715814e77d1ba40463253d12751129f2c0d05407', name: "leading-input" }), index.h("input", { key: '8101af836f80da56ac9e2b859ab9fd5b6d254b91', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (index.h("nv-icon", { key: 'fdf5caa936a43961bd3f00f5d50635124b57ff0b', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (index.h("nv-iconbutton", { key: '9b9e70d855fca2ea1ff2769609af05fc7d3fd1c2', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), index.h("slot", { key: '4458e83104562509b53b05faf3a316a5502b76b7', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '91dcddd8a80abccaaffda9cd583759bebf376456', class: "description" }, index.h("slot", { key: 'fe6da6eb725b3866faf138e848f89152f0f24a00', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'bfe57a6b0f199c3b371a2036a7b8787f40f639a4', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '529e34f2197c64ac768df11251bb285fec1f2cd5', name: "error-description" }, this.errorDescription)))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "showPassword": ["handleShowPasswordChange"]
-    }; }
-};
-NvFieldpassword.style = NvFieldpasswordStyle0;
-
-exports.nv_fieldpassword = NvFieldpassword;