@nova-design-system/nova-webcomponents 3.8.0 → 3.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/native.cjs.js +1 -1
- package/dist/cjs/nv-calendar.cjs.entry.js +9 -3
- package/dist/cjs/nv-calendar.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-dialog.cjs.entry.js +19 -32
- package/dist/cjs/nv-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-dialogfooter_2.cjs.entry.js +1 -1
- package/dist/cjs/nv-dialogfooter_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fielddate.cjs.entry.js +62 -94
- package/dist/cjs/nv-fielddate.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fielddaterange.cjs.entry.js +52 -33
- package/dist/cjs/nv-fielddaterange.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldselect.cjs.entry.js +14 -26
- package/dist/cjs/nv-fieldselect.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-icon.cjs.entry.js +2 -2
- package/dist/cjs/nv-icon.cjs.entry.js.map +1 -1
- package/dist/collection/components/nv-calendar/nv-calendar.js +9 -3
- package/dist/collection/components/nv-calendar/nv-calendar.js.map +1 -1
- package/dist/collection/components/nv-dialog/nv-dialog.js +21 -40
- package/dist/collection/components/nv-dialog/nv-dialog.js.map +1 -1
- package/dist/collection/components/nv-dialogheader/nv-dialogheader.css +1 -0
- package/dist/collection/components/nv-fielddate/nv-fielddate.js +63 -94
- package/dist/collection/components/nv-fielddate/nv-fielddate.js.map +1 -1
- package/dist/collection/components/nv-fielddaterange/nv-fielddaterange.js +52 -33
- package/dist/collection/components/nv-fielddaterange/nv-fielddaterange.js.map +1 -1
- package/dist/collection/components/nv-fieldselect/nv-fieldselect.css +2 -0
- package/dist/collection/components/nv-fieldselect/nv-fieldselect.docs.js +8 -8
- package/dist/collection/components/nv-fieldselect/nv-fieldselect.docs.js.map +1 -1
- package/dist/collection/components/nv-fieldselect/nv-fieldselect.js +25 -35
- package/dist/collection/components/nv-fieldselect/nv-fieldselect.js.map +1 -1
- package/dist/collection/components/nv-icon/nv-icon.js +1 -1
- package/dist/collection/components/nv-icon/nv-icon.js.map +1 -1
- package/dist/components/nv-accordion-item.js +1 -1
- package/dist/components/nv-accordion.js +3 -3
- package/dist/components/nv-alert.js +1 -1
- package/dist/components/nv-avatar.js +1 -1
- package/dist/components/nv-badge.js +1 -1
- package/dist/components/nv-calendar.js +1 -1
- package/dist/components/nv-datagrid.js +2 -2
- package/dist/components/nv-dialog.js +23 -36
- package/dist/components/nv-dialog.js.map +1 -1
- package/dist/components/nv-dialogfooter.js +1 -1
- package/dist/components/nv-dialogheader.js +1 -1
- package/dist/components/nv-fielddate.js +68 -100
- package/dist/components/nv-fielddate.js.map +1 -1
- package/dist/components/nv-fielddaterange.js +56 -37
- package/dist/components/nv-fielddaterange.js.map +1 -1
- package/dist/components/nv-fielddropdown.js +3 -3
- package/dist/components/nv-fielddropdownitem.js +1 -1
- package/dist/components/nv-fieldmultiselect.js +3 -3
- package/dist/components/nv-fieldnumber.js +1 -1
- package/dist/components/nv-fieldpassword.js +2 -2
- package/dist/components/nv-fieldselect.js +18 -31
- package/dist/components/nv-fieldselect.js.map +1 -1
- package/dist/components/nv-fieldslider.js +3 -3
- package/dist/components/nv-fieldtext.js +1 -1
- package/dist/components/nv-fieldtime.js +2 -2
- package/dist/components/nv-icon.js +1 -1
- package/dist/components/nv-iconbutton.js +1 -1
- package/dist/components/nv-menu.js +2 -2
- package/dist/components/nv-menuitem.js +1 -1
- package/dist/components/{p-6e2f91ae.js → p-025b8a78.js} +2 -2
- package/dist/components/{p-6e2f91ae.js.map → p-025b8a78.js.map} +1 -1
- package/dist/components/{p-865725bf.js → p-30f970c3.js} +2 -2
- package/dist/components/{p-865725bf.js.map → p-30f970c3.js.map} +1 -1
- package/dist/components/{p-f0371d98.js → p-60064345.js} +2 -2
- package/dist/components/{p-f0371d98.js.map → p-60064345.js.map} +1 -1
- package/dist/components/p-6460318d.js +88 -0
- package/dist/components/p-6460318d.js.map +1 -0
- package/dist/components/{p-9a209ac7.js → p-68ff562f.js} +2 -2
- package/dist/components/{p-9a209ac7.js.map → p-68ff562f.js.map} +1 -1
- package/dist/components/{p-abb8f5ae.js → p-6de6866c.js} +2 -2
- package/dist/components/{p-abb8f5ae.js.map → p-6de6866c.js.map} +1 -1
- package/dist/components/{p-f927f771.js → p-79e6b6a2.js} +3 -3
- package/dist/components/{p-f927f771.js.map → p-79e6b6a2.js.map} +1 -1
- package/dist/components/{p-d32b75ac.js → p-82e5674c.js} +10 -4
- package/dist/components/p-82e5674c.js.map +1 -0
- package/dist/components/{p-7bc65e46.js → p-db4ba1d9.js} +3 -3
- package/dist/components/{p-7bc65e46.js.map → p-db4ba1d9.js.map} +1 -1
- package/dist/components/{p-fa1988d9.js → p-e4e1a926.js} +2 -2
- package/dist/components/{p-fa1988d9.js.map → p-e4e1a926.js.map} +1 -1
- package/dist/components/{p-ca130ad2.js → p-ed6686a1.js} +2 -2
- package/dist/components/p-ed6686a1.js.map +1 -0
- package/dist/components/{p-91a558eb.js → p-f1df2634.js} +2 -2
- package/dist/components/{p-91a558eb.js.map → p-f1df2634.js.map} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/native.js +1 -1
- package/dist/esm/nv-calendar.entry.js +9 -3
- package/dist/esm/nv-calendar.entry.js.map +1 -1
- package/dist/esm/nv-dialog.entry.js +19 -32
- package/dist/esm/nv-dialog.entry.js.map +1 -1
- package/dist/esm/nv-dialogfooter_2.entry.js +1 -1
- package/dist/esm/nv-dialogfooter_2.entry.js.map +1 -1
- package/dist/esm/nv-fielddate.entry.js +62 -94
- package/dist/esm/nv-fielddate.entry.js.map +1 -1
- package/dist/esm/nv-fielddaterange.entry.js +52 -33
- package/dist/esm/nv-fielddaterange.entry.js.map +1 -1
- package/dist/esm/nv-fieldselect.entry.js +14 -26
- package/dist/esm/nv-fieldselect.entry.js.map +1 -1
- package/dist/esm/nv-icon.entry.js +2 -2
- package/dist/esm/nv-icon.entry.js.map +1 -1
- package/dist/native/native.esm.js +1 -1
- package/dist/native/native.esm.js.map +1 -1
- package/dist/native/{p-baddee4c.entry.js → p-11012998.entry.js} +2 -2
- package/dist/native/p-11012998.entry.js.map +1 -0
- package/dist/native/{p-dc34da69.entry.js → p-4a533dd8.entry.js} +2 -2
- package/dist/native/p-4a533dd8.entry.js.map +1 -0
- package/dist/native/{p-f687e05c.entry.js → p-55cd3d62.entry.js} +2 -2
- package/dist/native/p-55cd3d62.entry.js.map +1 -0
- package/dist/native/{p-516da423.entry.js → p-9ea3d30d.entry.js} +2 -2
- package/dist/native/p-9ea3d30d.entry.js.map +1 -0
- package/dist/native/{p-12039da4.entry.js → p-b7ec9a1b.entry.js} +2 -2
- package/dist/native/p-b7ec9a1b.entry.js.map +1 -0
- package/dist/native/p-bc77cac1.entry.js +2 -0
- package/dist/native/p-bc77cac1.entry.js.map +1 -0
- package/dist/native/{p-9dc1c3e7.entry.js → p-ff248eb8.entry.js} +2 -2
- package/dist/native/{p-9dc1c3e7.entry.js.map → p-ff248eb8.entry.js.map} +1 -1
- package/dist/types/components/nv-dialog/nv-dialog.d.ts +6 -17
- package/dist/types/components/nv-fielddate/nv-fielddate.d.ts +4 -19
- package/dist/types/components/nv-fielddaterange/nv-fielddaterange.d.ts +1 -0
- package/dist/types/components/nv-fieldselect/nv-fieldselect.d.ts +22 -9
- package/dist/types/components.d.ts +38 -4
- package/dist/vscode-data.json +2 -6
- package/hydrate/index.js +163 -197
- package/hydrate/index.mjs +163 -197
- package/package.json +1 -1
- package/dist/components/p-9232d306.js +0 -88
- package/dist/components/p-9232d306.js.map +0 -1
- package/dist/components/p-ca130ad2.js.map +0 -1
- package/dist/components/p-d32b75ac.js.map +0 -1
- package/dist/native/p-12039da4.entry.js.map +0 -1
- package/dist/native/p-516da423.entry.js.map +0 -1
- package/dist/native/p-baddee4c.entry.js.map +0 -1
- package/dist/native/p-c65a79a9.entry.js +0 -2
- package/dist/native/p-c65a79a9.entry.js.map +0 -1
- package/dist/native/p-dc34da69.entry.js.map +0 -1
- package/dist/native/p-f687e05c.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-9a209ac7.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldtext/nv-fieldtext.scss?tag=nv-fieldtext","src/components/nv-fieldtext/nv-fieldtext.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldtext {\n @include form-field-variables();\n @include form-field-root();\n\n &[fluid]:not([fluid='false']) {\n @include form-field-fluid();\n }\n\n &[readonly]:not([readonly='false']) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error='false']) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success='false']) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required='false']) label {\n @include form-field-label-required();\n }\n\n > label {\n @include form-field-label();\n }\n\n > .input-wrapper {\n @include form-field-input-wrapper();\n\n .input-container {\n @include form-field-input-container();\n > [slot='leading-input'] {\n @include form-field-inner-leading-slot();\n }\n\n input {\n @include form-field-input();\n }\n \n\n nv-icon.validation {\n @include form-field-icon();\n margin-right: var(--form-gap-x);\n }\n > [slot='trailing-input'] {\n @include form-field-inner-trailing-slot();\n }\n }\n }\n\n > .description {\n @include form-field-description();\n }\n\n > .error-description {\n @include form-field-error-description();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot trailing-input - Content to be placed after the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n tag: 'nv-fieldtext',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldtext.scss',\n})\nexport class NvFieldtext {\n @Element() el: HTMLNvFieldtextElement;\n private inputElement!: HTMLInputElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Message defines a 'hint ' message for the Text Field.\n * @deprecated Use `description` instead.\n */\n @Prop({ reflect: true })\n readonly message: string;\n\n /**\n * Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n */\n @Prop({ reflect: true })\n readonly validation: string;\n\n /**\n * Type of the input.\n * @deprecated use type instead.\n */\n @Prop({ reflect: true })\n readonly textInputType: 'text' | 'tel' | 'email';\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n */\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /**\n * Lets you define the text that explains what users should enter in the text\n * input field. It’s a crucial element for making forms clear and\n * user-friendly.\n */\n @Prop({ reflect: true })\n readonly label: string;\n\n /**\n * Add helpful hints or extra information under the text input field. This is\n * where you can clarify what users should enter or provide additional\n * instructions, making the form easier to fill out correctly.\n */\n @Prop({ reflect: true, mutable: true })\n description: string;\n\n /**\n * Display temporary text inside the input field to give users a hint about\n * what to type. It’s a great way to provide examples or suggestions directly\n * in the field before they start typing.\n */\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /**\n * Defines the name attribute of the input field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the input’s data in form submissions. It should be\n * unique within the form to avoid conflicts\n */\n @Prop({ reflect: true })\n readonly name: string;\n\n /**\n * Specifies the value of the input field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the input’s value is managed by the component’s state.\n */\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /**\n * The type prop lets you specify what kind of information the input field\n * should accept. Choose 'text' for general words or sentences, 'tel' for\n * phone numbers, or 'email' for email addresses. This makes sure users get\n * the right keyboard and validation for what they need to enter.\n */\n @Prop({ reflect: true, mutable: true })\n type: 'text' | 'tel' | 'email' = 'text';\n\n /**\n * The disabled prop lets you turn off the input field so that users can’t\n * type in it. When disabled, the field is grayed out and won’t respond to\n * clicks or touches.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * Display the input field’s content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won’t be\n * able to type or delete anything.\n */\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /**\n * Marks the input field as required, ensuring that the user must fill it out\n * before submitting the form.\n */\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /**\n * Alters the input field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n */\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /**\n * A description that appears when there is an error related to the textfield\n * field.\n * @validator message\n */\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /**\n * Changes the input field’s appearance to indicate successful input or\n * validation.\n */\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /**\n * Limits how many characters users can type into the input field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their input within the allowed limit.\n */\n @Prop({ reflect: true })\n readonly maxlength: number;\n\n /**\n * Ensures that users type at least a certain number of characters into the\n * input field. It’s a way to make sure users provide enough information\n * before moving on.\n */\n @Prop({ reflect: true })\n readonly minlength: number;\n\n /**\n * Set rules for how the input should be formatted. For example, you can\n * require that a phone number includes only digits or that an email address\n * has the correct format. If users don’t follow these rules, they’ll get a\n * prompt to correct their input after the form is submitted.\n */\n @Prop({ reflect: true })\n readonly pattern: string;\n\n /**\n * The autocomplete prop helps users fill out the input field faster by\n * suggesting entries they’ve used before, like their email or address.\n * You can turn it on to make forms more convenient or off to ensure users\n * always type in fresh data.\n */\n @Prop({ reflect: true })\n readonly autocomplete: `${TextInputAutocomplete}`;\n\n /**\n * When used with the email input type, this prop enables the field to accept\n * multiple email addresses. Users can enter several addresses, separating\n * each one with a comma, allowing the form to handle multiple recipients.\n */\n @Prop({ reflect: true })\n readonly multiple: boolean = false;\n\n /**\n * Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on an <input>\n * element.\n */\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n /**\n * Allows the field to stretch and fill the entire width of its container.\n */\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the input value changes.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles the input event on the input element.\n * Emits the inputChanged event with the new value.\n * @param {Event} event - Event object of the input event.\n */\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.valueChanged.emit(input.value);\n };\n\n /**\n * Handles focus when the input container is clicked.\n */\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.textInputType) {\n this.type = this.textInputType;\n }\n\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <div class=\"input-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n <slot name=\"leading-input\"></slot>\n\n <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type={this.type}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n pattern={this.pattern}\n autofocus={this.autofocus}\n autocomplete={this.autocomplete}\n multiple={this.multiple}\n value={this.value}\n onInput={this.handleInput}\n />\n\n <slot name=\"trailing-input\"></slot>\n\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n )}\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription ||\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-68ff562f.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldtext/nv-fieldtext.scss?tag=nv-fieldtext","src/components/nv-fieldtext/nv-fieldtext.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldtext {\n @include form-field-variables();\n @include form-field-root();\n\n &[fluid]:not([fluid='false']) {\n @include form-field-fluid();\n }\n\n &[readonly]:not([readonly='false']) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error='false']) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success='false']) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required='false']) label {\n @include form-field-label-required();\n }\n\n > label {\n @include form-field-label();\n }\n\n > .input-wrapper {\n @include form-field-input-wrapper();\n\n .input-container {\n @include form-field-input-container();\n > [slot='leading-input'] {\n @include form-field-inner-leading-slot();\n }\n\n input {\n @include form-field-input();\n }\n \n\n nv-icon.validation {\n @include form-field-icon();\n margin-right: var(--form-gap-x);\n }\n > [slot='trailing-input'] {\n @include form-field-inner-trailing-slot();\n }\n }\n }\n\n > .description {\n @include form-field-description();\n }\n\n > .error-description {\n @include form-field-error-description();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot trailing-input - Content to be placed after the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n tag: 'nv-fieldtext',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldtext.scss',\n})\nexport class NvFieldtext {\n @Element() el: HTMLNvFieldtextElement;\n private inputElement!: HTMLInputElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Message defines a 'hint ' message for the Text Field.\n * @deprecated Use `description` instead.\n */\n @Prop({ reflect: true })\n readonly message: string;\n\n /**\n * Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n */\n @Prop({ reflect: true })\n readonly validation: string;\n\n /**\n * Type of the input.\n * @deprecated use type instead.\n */\n @Prop({ reflect: true })\n readonly textInputType: 'text' | 'tel' | 'email';\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n */\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /**\n * Lets you define the text that explains what users should enter in the text\n * input field. It’s a crucial element for making forms clear and\n * user-friendly.\n */\n @Prop({ reflect: true })\n readonly label: string;\n\n /**\n * Add helpful hints or extra information under the text input field. This is\n * where you can clarify what users should enter or provide additional\n * instructions, making the form easier to fill out correctly.\n */\n @Prop({ reflect: true, mutable: true })\n description: string;\n\n /**\n * Display temporary text inside the input field to give users a hint about\n * what to type. It’s a great way to provide examples or suggestions directly\n * in the field before they start typing.\n */\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /**\n * Defines the name attribute of the input field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the input’s data in form submissions. It should be\n * unique within the form to avoid conflicts\n */\n @Prop({ reflect: true })\n readonly name: string;\n\n /**\n * Specifies the value of the input field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the input’s value is managed by the component’s state.\n */\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /**\n * The type prop lets you specify what kind of information the input field\n * should accept. Choose 'text' for general words or sentences, 'tel' for\n * phone numbers, or 'email' for email addresses. This makes sure users get\n * the right keyboard and validation for what they need to enter.\n */\n @Prop({ reflect: true, mutable: true })\n type: 'text' | 'tel' | 'email' = 'text';\n\n /**\n * The disabled prop lets you turn off the input field so that users can’t\n * type in it. When disabled, the field is grayed out and won’t respond to\n * clicks or touches.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * Display the input field’s content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won’t be\n * able to type or delete anything.\n */\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /**\n * Marks the input field as required, ensuring that the user must fill it out\n * before submitting the form.\n */\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /**\n * Alters the input field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n */\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /**\n * A description that appears when there is an error related to the textfield\n * field.\n * @validator message\n */\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /**\n * Changes the input field’s appearance to indicate successful input or\n * validation.\n */\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /**\n * Limits how many characters users can type into the input field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their input within the allowed limit.\n */\n @Prop({ reflect: true })\n readonly maxlength: number;\n\n /**\n * Ensures that users type at least a certain number of characters into the\n * input field. It’s a way to make sure users provide enough information\n * before moving on.\n */\n @Prop({ reflect: true })\n readonly minlength: number;\n\n /**\n * Set rules for how the input should be formatted. For example, you can\n * require that a phone number includes only digits or that an email address\n * has the correct format. If users don’t follow these rules, they’ll get a\n * prompt to correct their input after the form is submitted.\n */\n @Prop({ reflect: true })\n readonly pattern: string;\n\n /**\n * The autocomplete prop helps users fill out the input field faster by\n * suggesting entries they’ve used before, like their email or address.\n * You can turn it on to make forms more convenient or off to ensure users\n * always type in fresh data.\n */\n @Prop({ reflect: true })\n readonly autocomplete: `${TextInputAutocomplete}`;\n\n /**\n * When used with the email input type, this prop enables the field to accept\n * multiple email addresses. Users can enter several addresses, separating\n * each one with a comma, allowing the form to handle multiple recipients.\n */\n @Prop({ reflect: true })\n readonly multiple: boolean = false;\n\n /**\n * Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on an <input>\n * element.\n */\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n /**\n * Allows the field to stretch and fill the entire width of its container.\n */\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the input value changes.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles the input event on the input element.\n * Emits the inputChanged event with the new value.\n * @param {Event} event - Event object of the input event.\n */\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.valueChanged.emit(input.value);\n };\n\n /**\n * Handles focus when the input container is clicked.\n */\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.textInputType) {\n this.type = this.textInputType;\n }\n\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <div class=\"input-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n <slot name=\"leading-input\"></slot>\n\n <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type={this.type}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n pattern={this.pattern}\n autofocus={this.autofocus}\n autocomplete={this.autocomplete}\n multiple={this.multiple}\n value={this.value}\n onInput={this.handleInput}\n />\n\n <slot name=\"trailing-input\"></slot>\n\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n )}\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription ||\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-aff3ed68.js';
|
|
2
2
|
import { B as ButtonType } from './p-1f505531.js';
|
|
3
3
|
import { d as defineCustomElement$3 } from './p-5d5668f0.js';
|
|
4
|
-
import { d as defineCustomElement$2 } from './p-
|
|
4
|
+
import { d as defineCustomElement$2 } from './p-6460318d.js';
|
|
5
5
|
import { d as defineCustomElement$1 } from './p-dfd2d4f0.js';
|
|
6
6
|
|
|
7
7
|
const nvDialogfooterCss = "nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";
|
|
@@ -132,4 +132,4 @@ defineCustomElement();
|
|
|
132
132
|
|
|
133
133
|
export { NvDialogfooter as N, defineCustomElement as d };
|
|
134
134
|
|
|
135
|
-
//# sourceMappingURL=p-
|
|
135
|
+
//# sourceMappingURL=p-6de6866c.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-6de6866c.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,0QAA0Q,CAAC;AACrS,6BAAe,iBAAiB;;MCqBnB,cAAc;IAN3B;;;;;;QASU,YAAO,GAAG,KAAK,CAAC;;;;;;QASf,aAAQ,GAAY,KAAK,CAAC;;;;;QAO1B,kBAAa,GAAY,KAAK,CAAC;;;;QAM/B,gBAAW,GAAW,EAAE,CAAC;;;;QAMzB,iBAAY,GAAW,EAAE,CAAC;;;;QAM1B,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,gBAAW,GAAW,QAAQ,CAAC;;;;QAM/B,iBAAY,GAAW,SAAS,CAAC;;;;QAMjC,sBAAiB,GAAoB,UAAU,CAAC,MAAM,CAAC;;;;;;;;QAiCxD,kBAAa,GAAG,CAAC,KAAY;YACnC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;SAClC,CAAC;;;;;QAMM,iBAAY,GAAG,CAAC,KAAY;YAClC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B,CAAC;KAgEH;;;;IA1DC,iBAAiB;;QAEf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI;YACrD,QACE,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;gBACnC,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,EACvC;SACH,CAAC,CAAC;KACJ;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,OAAO,IACZ,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,KAClB,iBAAW,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,KAAK,EAAC,IAAI,EAAC,IAAI,IAC5D,IAAI,CAAC,WAAW,CACP,CACb,EACD,iBACE,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,iBAAiB,IAE3B,IAAI,CAAC,WAAW,KACf,eACE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAC,IAAI,GACT,CACH,EACA,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,KAChB,eACE,IAAI,EAAC,eAAe,EACpB,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,IAAI,EAAC,IAAI,GACT,CACH,CACS,CACH,KAEX,eAAa,CACd,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-dialogfooter/nv-dialogfooter.scss?tag=nv-dialogfooter","src/components/nv-dialogfooter/nv-dialogfooter.tsx"],"sourcesContent":["nv-dialogfooter {\n display: flex;\n padding: var(--dialog-footer-padding-top) var(--dialog-footer-padding-x)\n var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);\n\n justify-content: flex-end;\n align-items: flex-end;\n gap: var(--dialog-footer-gap-y);\n align-self: stretch;\n}\n","import {\n AttachInternals,\n Component,\n h,\n Host,\n Prop,\n Event,\n EventEmitter,\n Fragment,\n Element,\n} from '@stencil/core';\nimport { ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Custom content for the dialog footer. When provided, the default buttons will not be rendered.\n */\n@Component({\n tag: 'nv-dialogfooter',\n styleUrl: 'nv-dialogfooter.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvDialogfooter {\n @AttachInternals() internals: ElementInternals;\n @Element() el: HTMLNvDialogfooterElement;\n private hasSlot = false;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Disables the primary button, preventing user interaction.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * Controls the visibility of the cancel button. When true, the cancel button is\n * hidden.\n */\n @Prop({ reflect: true })\n readonly undismissable: boolean = false;\n\n /**\n * Sets the leading icon for the primary button.\n */\n @Prop({ reflect: true })\n readonly leadingIcon: string = '';\n\n /**\n * Sets the trailing icon for the primary button.\n */\n @Prop({ reflect: true })\n readonly trailingIcon: string = '';\n\n /**\n * Sets the danger state for the primary button.\n */\n @Prop({ reflect: true })\n readonly danger: boolean = false;\n\n /**\n * Sets the label for the cancel button.\n */\n @Prop({ reflect: true })\n readonly cancelLabel: string = 'Cancel';\n\n /**\n * Sets the label for the primary button.\n */\n @Prop({ reflect: true })\n readonly primaryLabel: string = 'Primary';\n\n /**\n * Sets the type of the primary button.\n */\n @Prop({ reflect: true })\n readonly primaryButtonType: `${ButtonType}` = ButtonType.Button;\n\n /**\n * Sets the form for the dialog footer.\n */\n @Prop({ reflect: true })\n readonly form: string;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the cancel button is clicked. This will close the dialog.\n */\n @Event()\n dialogCanceled: EventEmitter<void>;\n\n /**\n * Emitted when the primary button is clicked. This allows to handle the primary action and potential data capture before closing the dialog.\n */\n @Event()\n dialogPrimaryClicked: EventEmitter<void>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles the primary action when the primary button is clicked.\n * @param {Event} event - The click event.\n */\n\n private handlePrimary = (event: Event) => {\n event.stopPropagation();\n this.dialogPrimaryClicked.emit();\n };\n\n /**\n * Handles the cancel action when the cancel button is clicked. This will close the dialog.\n * @param {Event} event - The click event.\n */\n private handleCancel = (event: Event) => {\n event.stopPropagation();\n this.dialogCanceled.emit();\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n // Check if there are any child elements that don't have a slot attribute\n this.hasSlot = Array.from(this.el.childNodes).some(node => {\n return (\n node.nodeType === Node.ELEMENT_NODE &&\n !(node as Element).hasAttribute('slot')\n );\n });\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {!this.hasSlot ? (\n <Fragment>\n {!this.undismissable && (\n <nv-button onClick={this.handleCancel} emphasis=\"low\" size=\"sm\">\n {this.cancelLabel}\n </nv-button>\n )}\n <nv-button\n onClick={this.handlePrimary}\n disabled={this.disabled}\n danger={this.danger}\n size=\"sm\"\n emphasis=\"high\"\n form={this.form}\n type={this.primaryButtonType}\n >\n {this.leadingIcon && (\n <nv-icon\n slot=\"leading-icon\"\n name={this.leadingIcon}\n size=\"sm\"\n />\n )}\n {this.primaryLabel}\n {this.trailingIcon && (\n <nv-icon\n slot=\"trailing-icon\"\n name={this.trailingIcon}\n size=\"sm\"\n />\n )}\n </nv-button>\n </Fragment>\n ) : (\n <slot></slot>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
|
|
2
2
|
import { u as useCollapse } from './p-9a263d0e.js';
|
|
3
3
|
import './p-09cdd71f.js';
|
|
4
|
-
import { d as defineCustomElement$3 } from './p-
|
|
5
|
-
import { d as defineCustomElement$2 } from './p-
|
|
4
|
+
import { d as defineCustomElement$3 } from './p-6460318d.js';
|
|
5
|
+
import { d as defineCustomElement$2 } from './p-025b8a78.js';
|
|
6
6
|
import { d as defineCustomElement$1 } from './p-dfd2d4f0.js';
|
|
7
7
|
|
|
8
8
|
const nvAccordionItemCss = "nv-accordion-item{display:block;border-bottom:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion-item:last-child{border-bottom:none}nv-accordion-item .nv-accordion-item__header{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4)}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__chevron{margin-left:var(--spacing-2);flex-shrink:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__header-content{display:flex;flex-direction:column;gap:var(--spacing-0-5);flex:1;min-width:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__title{color:var(--color-content-high-text);font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__subtitle{color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__content{background:var(--color-level-10-background)}nv-accordion-item .nv-accordion-item__content .nv-accordion-item__content-inner{padding:var(--spacing-4);color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:500;line-height:var(--line-height-base);}nv-accordion-item.is-disabled{opacity:var(--opacity-disabled);pointer-events:none}nv-accordion-item.is-open .nv-accordion-item__header{border-bottom:var(--spacing-px) solid var(--color-content-low-border)}";
|
|
@@ -220,4 +220,4 @@ defineCustomElement();
|
|
|
220
220
|
|
|
221
221
|
export { NvAccordionItem as N, defineCustomElement as d };
|
|
222
222
|
|
|
223
|
-
//# sourceMappingURL=p-
|
|
223
|
+
//# sourceMappingURL=p-79e6b6a2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-f927f771.js","mappings":"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","names":[],"sources":["src/components/nv-accordion-item/styles/nv-accordion-item.scss?tag=nv-accordion-item","src/components/nv-accordion-item/nv-accordion-item.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-accordion-item {\n @include accordion-item-root();\n\n .nv-accordion-item__header {\n @include accordion-item-header();\n \n .nv-accordion-item__chevron {\n @include accordion-item-chevron();\n }\n\n .nv-accordion-item__header-content {\n @include accordion-item-header-content();\n }\n\n .nv-accordion-item__title {\n @include accordion-item-title();\n }\n\n .nv-accordion-item__subtitle {\n @include accordion-item-subtitle();\n }\n }\n\n .nv-accordion-item__content {\n @include accordion-item-content();\n \n .nv-accordion-item__content-inner {\n @include accordion-item-content-inner();\n }\n }\n\n // Styles for disabled items\n &.is-disabled {\n @include accordion-item-disabled();\n }\n\n // Border between header and content when item is open\n &.is-open .nv-accordion-item__header {\n border-bottom: var(--spacing-px) solid var(--color-content-low-border);\n }\n}","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Method,\n State,\n Element,\n Watch,\n} from '@stencil/core';\nimport { useCollapse } from '../../animations';\n\n/**\n * Accordion item element for nv-accordion.\n *\n * @slot header - Custom header (replaces itemTitle/subtitle)\n * @slot content - Main content (expandable area)\n */\n@Component({\n tag: 'nv-accordion-item',\n styleUrl: 'styles/nv-accordion-item.scss',\n shadow: false,\n})\nexport class NvAccordionItem {\n @Element() el!: HTMLNvAccordionItemElement;\n private contentRef?: HTMLDivElement;\n private mutationObserver?: MutationObserver;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /** Item title (displayed if header slot is absent) */\n @Prop({ reflect: true })\n readonly itemTitle?: string;\n\n /** Item subtitle (displayed if header slot is absent) */\n @Prop({ reflect: true })\n readonly subtitle?: string;\n\n /** Open or closed */\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /** Disables the item */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /** Maximum content height (in px, optional). If not defined, auto height. */\n @Prop({ reflect: true })\n readonly maxContentHeight?: number;\n\n /** Parent expansion mode (accordion or multi) */\n @Prop({ reflect: true })\n readonly mode?: 'accordion' | 'multi' = 'accordion';\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Event emitted on toggle (header click)\n */\n @Event()\n itemToggle: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region STATE\n\n /** Internal state for open/close rendering */\n @State()\n currentOpenState: boolean = false;\n\n /**\n * Controls if the panel has been initialized for animations\n */\n @State()\n isInitialized: boolean = false;\n\n /**\n * Animation in progress\n */\n @State()\n isAnimating: boolean = false;\n\n //#endregion STATE\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('open')\n async onOpenChanged(newValue: boolean, oldValue: boolean) {\n this.currentOpenState = newValue; // Synchronize internal state\n\n // Skip initial render\n if (oldValue === undefined) {\n return;\n }\n\n await this.updateVisibility(newValue);\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region ANIMATIONS\n\n /**\n * Updates the visibility state with Nova animation system\n * @param {boolean} open - Whether the accordion item should be open\n */\n private async updateVisibility(open: boolean) {\n if (!this.contentRef) return;\n\n this.isAnimating = true;\n\n const { collapse, expand } = useCollapse(this.contentRef, {\n duration: 200,\n });\n\n if (open) {\n // Expand with animation\n await expand();\n } else {\n // Collapse with animation\n await collapse();\n }\n\n this.isAnimating = false;\n }\n\n //#endregion ANIMATIONS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.currentOpenState = this.open; // Initial synchronization\n }\n\n componentDidLoad() {\n if (this.contentRef) {\n const { setExpanded, setCollapsed } = useCollapse(this.contentRef);\n\n if (this.open) {\n // If open by default on initial load, set expanded state without animation\n setExpanded();\n } else {\n // If closed by default, set collapsed state without animation\n setCollapsed();\n }\n }\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Toggle open/close (Public API)\n */\n @Method()\n async toggle() {\n if (!this.disabled && !this.isAnimating) {\n this.open = !this.open;\n this.itemToggle.emit(this.open);\n\n // Force animation update directly instead of relying on watcher\n await this.updateVisibility(this.open);\n }\n }\n\n /**\n * Handler for header click\n */\n private handleHeaderClick = () => {\n this.toggle();\n };\n\n /**\n * Handler for iconbutton click\n * @param {Event} e - Click event\n */\n private handleIconClick = (e: Event) => {\n e.stopPropagation(); // Prevent header click from triggering\n this.toggle();\n };\n\n /**\n * Handler for keyboard events on iconbutton\n * @param {KeyboardEvent} e - Keyboard event\n */\n private handleHeaderKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n this.toggle();\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!this.open) {\n this.open = true;\n this.itemToggle.emit(this.open);\n this.updateVisibility(this.open);\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (this.open) {\n this.open = false;\n this.itemToggle.emit(this.open);\n this.updateVisibility(this.open);\n }\n break;\n }\n };\n\n /**\n * Get the chevron icon name based on open state\n * @returns {string} The icon name to display in the chevron button\n */\n private get chevronIconName(): string {\n return this.open ? 'chevron-top' : 'chevron-down';\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host\n class={{\n 'nv-accordion-item': true,\n 'is-open': this.open,\n 'is-disabled': this.disabled,\n 'is-animating': this.isAnimating,\n }}\n role=\"listitem\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <div\n class=\"nv-accordion-item__header\"\n onClick={this.handleHeaderClick}\n aria-controls=\"content\"\n >\n <slot name=\"header\">\n <div class=\"nv-accordion-item__header-content\">\n {this.itemTitle && (\n <span class=\"nv-accordion-item__title\">{this.itemTitle}</span>\n )}\n {this.subtitle && (\n <span class=\"nv-accordion-item__subtitle\">{this.subtitle}</span>\n )}\n </div>\n </slot>\n <nv-iconbutton\n emphasis=\"low\"\n size=\"sm\"\n shape=\"square\"\n name={this.chevronIconName}\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleIconClick}\n onKeyDown={this.handleHeaderKeyDown}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls=\"content\"\n aria-label={this.open ? 'Fermer la section' : 'Ouvrir la section'}\n ></nv-iconbutton>\n </div>\n\n <div\n id=\"content\"\n class=\"nv-accordion-item__content\"\n aria-hidden={!this.open ? 'true' : 'false'}\n ref={el => (this.contentRef = el as HTMLDivElement)}\n >\n <div class=\"nv-accordion-item__content-inner\">\n <slot name=\"content\" />\n </div>\n </div>\n </Host>\n );\n }\n // #endregion RENDER\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-79e6b6a2.js","mappings":"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","names":[],"sources":["src/components/nv-accordion-item/styles/nv-accordion-item.scss?tag=nv-accordion-item","src/components/nv-accordion-item/nv-accordion-item.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-accordion-item {\n @include accordion-item-root();\n\n .nv-accordion-item__header {\n @include accordion-item-header();\n \n .nv-accordion-item__chevron {\n @include accordion-item-chevron();\n }\n\n .nv-accordion-item__header-content {\n @include accordion-item-header-content();\n }\n\n .nv-accordion-item__title {\n @include accordion-item-title();\n }\n\n .nv-accordion-item__subtitle {\n @include accordion-item-subtitle();\n }\n }\n\n .nv-accordion-item__content {\n @include accordion-item-content();\n \n .nv-accordion-item__content-inner {\n @include accordion-item-content-inner();\n }\n }\n\n // Styles for disabled items\n &.is-disabled {\n @include accordion-item-disabled();\n }\n\n // Border between header and content when item is open\n &.is-open .nv-accordion-item__header {\n border-bottom: var(--spacing-px) solid var(--color-content-low-border);\n }\n}","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Method,\n State,\n Element,\n Watch,\n} from '@stencil/core';\nimport { useCollapse } from '../../animations';\n\n/**\n * Accordion item element for nv-accordion.\n *\n * @slot header - Custom header (replaces itemTitle/subtitle)\n * @slot content - Main content (expandable area)\n */\n@Component({\n tag: 'nv-accordion-item',\n styleUrl: 'styles/nv-accordion-item.scss',\n shadow: false,\n})\nexport class NvAccordionItem {\n @Element() el!: HTMLNvAccordionItemElement;\n private contentRef?: HTMLDivElement;\n private mutationObserver?: MutationObserver;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /** Item title (displayed if header slot is absent) */\n @Prop({ reflect: true })\n readonly itemTitle?: string;\n\n /** Item subtitle (displayed if header slot is absent) */\n @Prop({ reflect: true })\n readonly subtitle?: string;\n\n /** Open or closed */\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /** Disables the item */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /** Maximum content height (in px, optional). If not defined, auto height. */\n @Prop({ reflect: true })\n readonly maxContentHeight?: number;\n\n /** Parent expansion mode (accordion or multi) */\n @Prop({ reflect: true })\n readonly mode?: 'accordion' | 'multi' = 'accordion';\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Event emitted on toggle (header click)\n */\n @Event()\n itemToggle: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region STATE\n\n /** Internal state for open/close rendering */\n @State()\n currentOpenState: boolean = false;\n\n /**\n * Controls if the panel has been initialized for animations\n */\n @State()\n isInitialized: boolean = false;\n\n /**\n * Animation in progress\n */\n @State()\n isAnimating: boolean = false;\n\n //#endregion STATE\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('open')\n async onOpenChanged(newValue: boolean, oldValue: boolean) {\n this.currentOpenState = newValue; // Synchronize internal state\n\n // Skip initial render\n if (oldValue === undefined) {\n return;\n }\n\n await this.updateVisibility(newValue);\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region ANIMATIONS\n\n /**\n * Updates the visibility state with Nova animation system\n * @param {boolean} open - Whether the accordion item should be open\n */\n private async updateVisibility(open: boolean) {\n if (!this.contentRef) return;\n\n this.isAnimating = true;\n\n const { collapse, expand } = useCollapse(this.contentRef, {\n duration: 200,\n });\n\n if (open) {\n // Expand with animation\n await expand();\n } else {\n // Collapse with animation\n await collapse();\n }\n\n this.isAnimating = false;\n }\n\n //#endregion ANIMATIONS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.currentOpenState = this.open; // Initial synchronization\n }\n\n componentDidLoad() {\n if (this.contentRef) {\n const { setExpanded, setCollapsed } = useCollapse(this.contentRef);\n\n if (this.open) {\n // If open by default on initial load, set expanded state without animation\n setExpanded();\n } else {\n // If closed by default, set collapsed state without animation\n setCollapsed();\n }\n }\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Toggle open/close (Public API)\n */\n @Method()\n async toggle() {\n if (!this.disabled && !this.isAnimating) {\n this.open = !this.open;\n this.itemToggle.emit(this.open);\n\n // Force animation update directly instead of relying on watcher\n await this.updateVisibility(this.open);\n }\n }\n\n /**\n * Handler for header click\n */\n private handleHeaderClick = () => {\n this.toggle();\n };\n\n /**\n * Handler for iconbutton click\n * @param {Event} e - Click event\n */\n private handleIconClick = (e: Event) => {\n e.stopPropagation(); // Prevent header click from triggering\n this.toggle();\n };\n\n /**\n * Handler for keyboard events on iconbutton\n * @param {KeyboardEvent} e - Keyboard event\n */\n private handleHeaderKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n this.toggle();\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!this.open) {\n this.open = true;\n this.itemToggle.emit(this.open);\n this.updateVisibility(this.open);\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (this.open) {\n this.open = false;\n this.itemToggle.emit(this.open);\n this.updateVisibility(this.open);\n }\n break;\n }\n };\n\n /**\n * Get the chevron icon name based on open state\n * @returns {string} The icon name to display in the chevron button\n */\n private get chevronIconName(): string {\n return this.open ? 'chevron-top' : 'chevron-down';\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host\n class={{\n 'nv-accordion-item': true,\n 'is-open': this.open,\n 'is-disabled': this.disabled,\n 'is-animating': this.isAnimating,\n }}\n role=\"listitem\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <div\n class=\"nv-accordion-item__header\"\n onClick={this.handleHeaderClick}\n aria-controls=\"content\"\n >\n <slot name=\"header\">\n <div class=\"nv-accordion-item__header-content\">\n {this.itemTitle && (\n <span class=\"nv-accordion-item__title\">{this.itemTitle}</span>\n )}\n {this.subtitle && (\n <span class=\"nv-accordion-item__subtitle\">{this.subtitle}</span>\n )}\n </div>\n </slot>\n <nv-iconbutton\n emphasis=\"low\"\n size=\"sm\"\n shape=\"square\"\n name={this.chevronIconName}\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleIconClick}\n onKeyDown={this.handleHeaderKeyDown}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls=\"content\"\n aria-label={this.open ? 'Fermer la section' : 'Ouvrir la section'}\n ></nv-iconbutton>\n </div>\n\n <div\n id=\"content\"\n class=\"nv-accordion-item__content\"\n aria-hidden={!this.open ? 'true' : 'false'}\n ref={el => (this.contentRef = el as HTMLDivElement)}\n >\n <div class=\"nv-accordion-item__content-inner\">\n <slot name=\"content\" />\n </div>\n </div>\n </Host>\n );\n }\n // #endregion RENDER\n}\n"],"version":3}
|
|
@@ -501,6 +501,12 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
|
|
|
501
501
|
.split(',')
|
|
502
502
|
.map(v => v.trim())
|
|
503
503
|
.filter(Boolean);
|
|
504
|
+
if (this.selectionType === 'range' && values.length < 2) {
|
|
505
|
+
console.warn(`Invalid date range format: ${value}`);
|
|
506
|
+
this.startDate = null;
|
|
507
|
+
this.endDate = null;
|
|
508
|
+
return;
|
|
509
|
+
}
|
|
504
510
|
if (this.selectionType === 'single' && values.length >= 1) {
|
|
505
511
|
const parsedDate = parseDate(values[0], this.dateFormat);
|
|
506
512
|
if (parsedDate) {
|
|
@@ -545,7 +551,7 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
|
|
|
545
551
|
}
|
|
546
552
|
else {
|
|
547
553
|
// Handle malformed dates gracefully - reset state
|
|
548
|
-
console.warn(`Invalid date range format: ${values[0]}, ${values[1]}`);
|
|
554
|
+
console.warn(`Invalid date range format: ${values === null || values === void 0 ? void 0 : values[0]}, ${values === null || values === void 0 ? void 0 : values[1]}`);
|
|
549
555
|
this.startDate = null;
|
|
550
556
|
this.endDate = null;
|
|
551
557
|
if (!this.showActions) {
|
|
@@ -1308,8 +1314,8 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
|
|
|
1308
1314
|
* @slot default - Child content of the component.
|
|
1309
1315
|
*/
|
|
1310
1316
|
render() {
|
|
1311
|
-
return (h(Host, { key: '
|
|
1312
|
-
this.hasActions) && (h("div", { key: '
|
|
1317
|
+
return (h(Host, { key: '492526a4a9ed114aba804db45f49847b1db58c9f' }, h("div", { key: '632759b4eb6c65c3b082b707fba75568ed351e49', class: "datepicker-root" }, h("div", { key: '8dc6160dec8ed46e2d2f70e3154cd73cbaeee586', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: '55b1c7f8bcda0785ca63a1572bfebc628a3971d5', 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') ||
|
|
1318
|
+
this.hasActions) && (h("div", { key: '7234a6d497fccdcab8923b5235f591f24061c92d', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '1a23c6e92ffbc8ca64b42ff41ed6d106a3697e7f' })));
|
|
1313
1319
|
}
|
|
1314
1320
|
get el() { return this; }
|
|
1315
1321
|
static get watchers() { return {
|
|
@@ -1366,4 +1372,4 @@ defineCustomElement();
|
|
|
1366
1372
|
|
|
1367
1373
|
export { NvCalendar as N, commonjsGlobal as c, defineCustomElement as d, getDefaultExportFromCjs as g };
|
|
1368
1374
|
|
|
1369
|
-
//# sourceMappingURL=p-
|
|
1375
|
+
//# sourceMappingURL=p-82e5674c.js.map
|