@nova-design-system/nova-webcomponents 3.0.0-beta.24 → 3.0.0-beta.27
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/blazor-docs.json +971 -22
- package/dist/cjs/{app-globals-2ceecab2.js → app-globals-d8cbb987.js} +2 -2
- package/dist/cjs/app-globals-d8cbb987.js.map +1 -0
- package/dist/cjs/{index-5d1f2412.js → index-c50face0.js} +37 -17
- package/dist/cjs/index-c50face0.js.map +1 -0
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/cjs/native.cjs.js +4 -4
- package/dist/cjs/native.cjs.js.map +1 -1
- package/dist/cjs/nv-alert.cjs.entry.js +1 -1
- package/dist/cjs/nv-avatar.cjs.entry.js +1 -1
- package/dist/cjs/nv-badge.cjs.entry.js +1 -1
- package/dist/cjs/nv-base.cjs.entry.js +1 -1
- package/dist/cjs/nv-button.cjs.entry.js +1 -1
- package/dist/cjs/nv-col.cjs.entry.js +1 -1
- package/dist/cjs/nv-fieldcheckbox.cjs.entry.js +1 -1
- package/dist/cjs/nv-fielddropdown.cjs.entry.js +367 -0
- package/dist/cjs/nv-fielddropdown.cjs.entry.js.map +1 -0
- package/dist/cjs/nv-fielddropdownitem.cjs.entry.js +62 -0
- package/dist/cjs/nv-fielddropdownitem.cjs.entry.js.map +1 -0
- package/dist/cjs/nv-fieldnumber.cjs.entry.js +4 -4
- package/dist/cjs/nv-fieldpassword.cjs.entry.js +4 -4
- package/dist/cjs/nv-fieldradio.cjs.entry.js +4 -4
- package/dist/cjs/nv-fieldselect.cjs.entry.js +6 -6
- package/dist/cjs/nv-fieldtext.cjs.entry.js +4 -4
- package/dist/cjs/nv-fieldtextarea.cjs.entry.js +5 -5
- package/dist/cjs/nv-fieldtextarea.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtoggle.cjs.entry.js +3 -3
- package/dist/cjs/nv-icon.cjs.entry.js +2 -2
- package/dist/cjs/nv-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-iconbutton.cjs.entry.js +2 -2
- package/dist/cjs/nv-loader.cjs.entry.js +2 -2
- package/dist/cjs/nv-menu.cjs.entry.js +2 -2
- package/dist/cjs/nv-menuitem.cjs.entry.js +1 -1
- package/dist/cjs/nv-popover.cjs.entry.js +2 -2
- package/dist/cjs/nv-row.cjs.entry.js +2 -2
- package/dist/cjs/nv-stack.cjs.entry.js +2 -2
- package/dist/cjs/nv-tooltip.cjs.entry.js +2 -2
- package/dist/collection/collection-manifest.json +3 -1
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.css +195 -0
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.docs.js +160 -0
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.docs.js.map +1 -0
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js +751 -0
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js.map +1 -0
- package/dist/collection/components/nv-fielddropdownitem/DropdownItemSelectedEventDetail.js +2 -0
- package/dist/collection/components/nv-fielddropdownitem/DropdownItemSelectedEventDetail.js.map +1 -0
- package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.css +46 -0
- package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.docs.js +6 -0
- package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.docs.js.map +1 -0
- package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.js +160 -0
- package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.js.map +1 -0
- package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.js +3 -3
- package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.js +3 -3
- package/dist/collection/components/nv-fieldradio/nv-fieldradio.js +3 -3
- package/dist/collection/components/nv-fieldselect/nv-fieldselect.js +5 -5
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.js +3 -3
- package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.js +7 -7
- package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.js.map +1 -1
- package/dist/collection/components/nv-fieldtoggle/nv-fieldtoggle.js +2 -2
- package/dist/collection/components/nv-icon/nv-icon.js +2 -2
- package/dist/collection/components/nv-icon/nv-icon.js.map +1 -1
- package/dist/collection/components/nv-iconbutton/nv-iconbutton.js +1 -1
- package/dist/collection/components/nv-loader/nv-loader.js +1 -1
- package/dist/collection/components/nv-menu/nv-menu.js +1 -1
- package/dist/collection/components/nv-popover/nv-popover.js +1 -1
- package/dist/collection/components/nv-row/nv-row.js +1 -1
- package/dist/collection/components/nv-stack/nv-stack.js +1 -1
- package/dist/collection/components/nv-tooltip/nv-tooltip.js +1 -1
- package/dist/components/index.js +3 -3
- package/dist/components/nv-alert.js +2 -2
- package/dist/components/nv-avatar.js +2 -2
- package/dist/components/nv-badge.js +2 -2
- package/dist/components/nv-base.js +1 -1
- package/dist/components/nv-button.js +2 -2
- package/dist/components/nv-col.js +1 -1
- package/dist/components/nv-fieldcheckbox.js +1 -1
- package/dist/components/nv-fielddropdown.d.ts +11 -0
- package/dist/components/nv-fielddropdown.js +434 -0
- package/dist/components/nv-fielddropdown.js.map +1 -0
- package/dist/components/nv-fielddropdownitem.d.ts +11 -0
- package/dist/components/nv-fielddropdownitem.js +8 -0
- package/dist/components/nv-fielddropdownitem.js.map +1 -0
- package/dist/components/nv-fieldnumber.js +5 -5
- package/dist/components/nv-fieldpassword.js +7 -7
- package/dist/components/nv-fieldradio.js +4 -4
- package/dist/components/nv-fieldselect.js +7 -7
- package/dist/components/nv-fieldtext.js +5 -5
- package/dist/components/nv-fieldtextarea.js +6 -6
- package/dist/components/nv-fieldtextarea.js.map +1 -1
- package/dist/components/nv-fieldtoggle.js +3 -3
- package/dist/components/nv-icon.js +1 -1
- package/dist/components/nv-iconbutton.js +1 -1
- package/dist/components/nv-loader.js +1 -1
- package/dist/components/nv-menu.js +3 -3
- package/dist/components/nv-menuitem.js +2 -2
- package/dist/components/nv-popover.js +1 -1
- package/dist/components/nv-row.js +2 -2
- package/dist/components/nv-stack.js +2 -2
- package/dist/components/nv-tooltip.js +3 -3
- package/dist/components/{p-8da6d9a3.js → p-69cc7819.js} +3 -3
- package/dist/components/{p-8da6d9a3.js.map → p-69cc7819.js.map} +1 -1
- package/dist/components/p-76eb28db.js +84 -0
- package/dist/components/p-76eb28db.js.map +1 -0
- package/dist/components/{p-d9a2aa08.js → p-9647924f.js} +5 -5
- package/dist/components/{p-d9a2aa08.js.map → p-9647924f.js.map} +1 -1
- package/dist/components/{p-137af295.js → p-9be1ebd4.js} +3 -3
- package/dist/components/{p-137af295.js.map → p-9be1ebd4.js.map} +1 -1
- package/dist/components/{p-50bd2808.js → p-ae6a0d80.js} +21 -7
- package/dist/components/p-ae6a0d80.js.map +1 -0
- package/dist/components/{p-632bedb8.js → p-d506ae63.js} +33 -19
- package/dist/components/p-d506ae63.js.map +1 -0
- package/dist/components/{p-c711fe67.js → p-ff97f99e.js} +4 -4
- package/dist/components/{p-c711fe67.js.map → p-ff97f99e.js.map} +1 -1
- package/dist/docs.json +961 -24
- package/dist/esm/{app-globals-df0a3c8d.js → app-globals-eea8674a.js} +2 -2
- package/dist/esm/app-globals-eea8674a.js.map +1 -0
- package/dist/esm/{index-179dfba2.js → index-e7b35c14.js} +37 -17
- package/dist/esm/index-e7b35c14.js.map +1 -0
- package/dist/esm/loader.js +4 -4
- package/dist/esm/native.js +5 -5
- package/dist/esm/native.js.map +1 -1
- package/dist/esm/nv-alert.entry.js +1 -1
- package/dist/esm/nv-avatar.entry.js +1 -1
- package/dist/esm/nv-badge.entry.js +1 -1
- package/dist/esm/nv-base.entry.js +1 -1
- package/dist/esm/nv-button.entry.js +1 -1
- package/dist/esm/nv-col.entry.js +1 -1
- package/dist/esm/nv-fieldcheckbox.entry.js +1 -1
- package/dist/esm/nv-fielddropdown.entry.js +363 -0
- package/dist/esm/nv-fielddropdown.entry.js.map +1 -0
- package/dist/esm/nv-fielddropdownitem.entry.js +58 -0
- package/dist/esm/nv-fielddropdownitem.entry.js.map +1 -0
- package/dist/esm/nv-fieldnumber.entry.js +4 -4
- package/dist/esm/nv-fieldpassword.entry.js +4 -4
- package/dist/esm/nv-fieldradio.entry.js +4 -4
- package/dist/esm/nv-fieldselect.entry.js +6 -6
- package/dist/esm/nv-fieldtext.entry.js +4 -4
- package/dist/esm/nv-fieldtextarea.entry.js +5 -5
- package/dist/esm/nv-fieldtextarea.entry.js.map +1 -1
- package/dist/esm/nv-fieldtoggle.entry.js +3 -3
- package/dist/esm/nv-icon.entry.js +2 -2
- package/dist/esm/nv-icon.entry.js.map +1 -1
- package/dist/esm/nv-iconbutton.entry.js +2 -2
- package/dist/esm/nv-loader.entry.js +2 -2
- package/dist/esm/nv-menu.entry.js +2 -2
- package/dist/esm/nv-menuitem.entry.js +1 -1
- package/dist/esm/nv-popover.entry.js +2 -2
- package/dist/esm/nv-row.entry.js +2 -2
- package/dist/esm/nv-stack.entry.js +2 -2
- package/dist/esm/nv-tooltip.entry.js +2 -2
- package/dist/native/native.css +1 -1
- package/dist/native/native.esm.js +1 -1
- package/dist/native/native.esm.js.map +1 -1
- package/dist/native/{p-617d6a09.entry.js → p-000749ae.entry.js} +2 -2
- package/dist/native/p-0d335326.entry.js +2 -0
- package/dist/native/{p-29d482cd.entry.js.map → p-0d335326.entry.js.map} +1 -1
- package/dist/native/{p-f5acea50.entry.js → p-1aaee302.entry.js} +2 -2
- package/dist/native/{p-1ceee367.entry.js → p-20ea1b61.entry.js} +2 -2
- package/dist/native/{p-89accab1.entry.js → p-23b20b80.entry.js} +2 -2
- package/dist/native/{p-f9aac71a.entry.js → p-25e1bc94.entry.js} +2 -2
- package/dist/native/{p-6f762ec2.entry.js → p-2fca31c0.entry.js} +2 -2
- package/dist/native/{p-7ce1b712.entry.js → p-330c929d.entry.js} +2 -2
- package/dist/native/{p-43cd42ca.entry.js → p-396b65bb.entry.js} +2 -2
- package/dist/native/{p-b8eb4c31.entry.js → p-4a43953f.entry.js} +2 -2
- package/dist/native/p-4b550f95.entry.js +2 -0
- package/dist/native/{p-b5e4a9e7.entry.js → p-4fae1b2c.entry.js} +2 -2
- package/dist/native/p-4fae1b2c.entry.js.map +1 -0
- package/dist/native/{p-06f64d05.entry.js → p-5172aa15.entry.js} +2 -2
- package/dist/native/{p-71d6aad8.entry.js → p-69ca8c88.entry.js} +2 -2
- package/dist/native/{p-8b65b16f.entry.js → p-71fbdb92.entry.js} +2 -2
- package/dist/native/{p-519e0f59.entry.js → p-89468485.entry.js} +2 -2
- package/dist/native/{p-fb6f42b7.entry.js → p-8de6396f.entry.js} +2 -2
- package/dist/native/{p-124a7067.entry.js → p-a016e4b6.entry.js} +2 -2
- package/dist/native/{p-0aa0193b.entry.js → p-a59ec107.entry.js} +2 -2
- package/dist/native/{p-dccf739a.entry.js → p-aeaa326f.entry.js} +2 -2
- package/dist/native/{p-dccf739a.entry.js.map → p-aeaa326f.entry.js.map} +1 -1
- package/dist/native/p-b4aea326.js +3 -0
- package/dist/native/p-b4aea326.js.map +1 -0
- package/dist/native/p-bb243eaf.entry.js +2 -0
- package/dist/native/p-bb243eaf.entry.js.map +1 -0
- package/dist/native/{p-d5a8b6c4.entry.js → p-c16a4fbe.entry.js} +2 -2
- package/dist/native/{p-14c08510.entry.js → p-d4e0b6e1.entry.js} +2 -2
- package/dist/native/p-d5c24d8f.entry.js +2 -0
- package/dist/native/p-d5c24d8f.entry.js.map +1 -0
- package/dist/native/{p-830ec54a.entry.js → p-ed893068.entry.js} +2 -2
- package/dist/native/p-eeb6a3dc.js +2 -0
- package/dist/native/p-eeb6a3dc.js.map +1 -0
- package/dist/types/components/nv-fielddropdown/nv-fielddropdown.d.ts +185 -0
- package/dist/types/components/nv-fielddropdown/nv-fielddropdown.docs.d.ts +4 -0
- package/dist/types/components/nv-fielddropdownitem/DropdownItemSelectedEventDetail.d.ts +9 -0
- package/dist/types/components/nv-fielddropdownitem/nv-fielddropdownitem.d.ts +40 -0
- package/dist/types/components/nv-fielddropdownitem/nv-fielddropdownitem.docs.d.ts +4 -0
- package/dist/types/components/nv-fieldtextarea/nv-fieldtextarea.d.ts +2 -2
- package/dist/types/components.d.ts +241 -8
- package/dist/types/stencil-public-runtime.d.ts +2 -0
- package/hydrate/index.js +589 -113
- package/hydrate/index.mjs +589 -113
- package/hydrate/package.json +1 -1
- package/package.json +58 -2
- package/dist/cjs/app-globals-2ceecab2.js.map +0 -1
- package/dist/cjs/index-5d1f2412.js.map +0 -1
- package/dist/components/p-50bd2808.js.map +0 -1
- package/dist/components/p-632bedb8.js.map +0 -1
- package/dist/esm/app-globals-df0a3c8d.js.map +0 -1
- package/dist/esm/index-179dfba2.js.map +0 -1
- package/dist/native/p-29d482cd.entry.js +0 -2
- package/dist/native/p-80788ddf.js +0 -2
- package/dist/native/p-80788ddf.js.map +0 -1
- package/dist/native/p-b5e4a9e7.entry.js.map +0 -1
- package/dist/native/p-b99aa075.entry.js +0 -2
- package/dist/native/p-db2a68f3.js +0 -3
- package/dist/native/p-db2a68f3.js.map +0 -1
- package/dist/vscode-data.json +0 -3179
- /package/dist/native/{p-617d6a09.entry.js.map → p-000749ae.entry.js.map} +0 -0
- /package/dist/native/{p-f5acea50.entry.js.map → p-1aaee302.entry.js.map} +0 -0
- /package/dist/native/{p-1ceee367.entry.js.map → p-20ea1b61.entry.js.map} +0 -0
- /package/dist/native/{p-89accab1.entry.js.map → p-23b20b80.entry.js.map} +0 -0
- /package/dist/native/{p-f9aac71a.entry.js.map → p-25e1bc94.entry.js.map} +0 -0
- /package/dist/native/{p-6f762ec2.entry.js.map → p-2fca31c0.entry.js.map} +0 -0
- /package/dist/native/{p-7ce1b712.entry.js.map → p-330c929d.entry.js.map} +0 -0
- /package/dist/native/{p-43cd42ca.entry.js.map → p-396b65bb.entry.js.map} +0 -0
- /package/dist/native/{p-b8eb4c31.entry.js.map → p-4a43953f.entry.js.map} +0 -0
- /package/dist/native/{p-b99aa075.entry.js.map → p-4b550f95.entry.js.map} +0 -0
- /package/dist/native/{p-06f64d05.entry.js.map → p-5172aa15.entry.js.map} +0 -0
- /package/dist/native/{p-71d6aad8.entry.js.map → p-69ca8c88.entry.js.map} +0 -0
- /package/dist/native/{p-8b65b16f.entry.js.map → p-71fbdb92.entry.js.map} +0 -0
- /package/dist/native/{p-519e0f59.entry.js.map → p-89468485.entry.js.map} +0 -0
- /package/dist/native/{p-fb6f42b7.entry.js.map → p-8de6396f.entry.js.map} +0 -0
- /package/dist/native/{p-124a7067.entry.js.map → p-a016e4b6.entry.js.map} +0 -0
- /package/dist/native/{p-0aa0193b.entry.js.map → p-a59ec107.entry.js.map} +0 -0
- /package/dist/native/{p-d5a8b6c4.entry.js.map → p-c16a4fbe.entry.js.map} +0 -0
- /package/dist/native/{p-14c08510.entry.js.map → p-d4e0b6e1.entry.js.map} +0 -0
- /package/dist/native/{p-830ec54a.entry.js.map → p-ed893068.entry.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nv-fielddropdown.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdown/nv-fielddropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\n Method,\n} from '@stencil/core';\n\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\nimport { DropdownItemSelectedEventDetail } from '../nv-fielddropdownitem/DropdownItemSelectedEventDetail';\n\n/**\n * @slot content - Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.\n * @slot leading-input - Content to be placed before 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\n@Component({\n tag: 'nv-fielddropdown',\n styleUrl: 'nv-fielddropdown.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NVFieldDropDown {\n @Element() el: HTMLNvFielddropdownElement;\n private inputElement!: HTMLInputElement;\n private popoverElement!: HTMLNvPopoverElement;\n\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 })\n readonly 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 * The placeholder is displayed only when the filterable option is enabled.\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 * State of the dropdown popover.\n */\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\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}` = 'off';\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 * 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 })\n readonly error: boolean = false;\n\n /**\n * A description that appears when there is an error related to the dropdown\n * field.\n * @validator message\n */\n @Prop({ reflect: true })\n readonly errorDescription: string;\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 * 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 * The text to display when no items match the filter.\n */\n @Prop({ reflect: true })\n readonly emptyresult: string = 'No results found';\n\n /**\n * The text entered by the user for filtering dropdown items.\n */\n @State()\n filterText: string = '';\n\n /**\n * Enables or disables the filtering feature for the dropdown items.\n */\n @Prop({ reflect: true, mutable: true })\n filterable: boolean = false;\n\n @State()\n isFilterable: boolean = this.filterable;\n\n @State()\n selectedValues: Set<string> = new Set();\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Event emitted when an item is selected.\n */\n @Event()\n dropdownItemSelected: EventEmitter<DropdownItemSelectedEventDetail>;\n\n @Listen('itemSelected')\n handleItemSelected(event: CustomEvent<DropdownItemSelectedEventDetail>) {\n if (this.disabled || this.readonly) return;\n\n // Retrieve all nv-fielddropdownitem elements present in the dropdown.\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n // For each item, remove the 'selected' attribute and the 'selected' class.\n items.forEach(item => {\n if (item !== event.target) {\n item.removeAttribute('selected');\n item.classList.remove('selected');\n }\n });\n\n // Update the value and emit the event with the selected item.\n this.value = event.detail.value;\n (event.target as HTMLNvFielddropdownitemElement).setAttribute(\n 'selected',\n 'true',\n );\n (event.target as HTMLElement).classList.add('selected');\n this.dropdownItemSelected.emit(event.detail);\n\n // Close the popover after selecting.\n if (this.popoverElement) {\n this.popoverElement.hide();\n }\n }\n\n /**\n * Emitted when the input value changes.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n @Listen('openChanged')\n handleOpenChanged(event: CustomEvent<boolean>) {\n this.open = event.detail; // Update `open` based on the popover state\n }\n\n @Watch('filterable')\n watchFilterableHandler(newValue: boolean) {\n this.isFilterable = newValue;\n this.filterable = newValue;\n }\n\n @Watch('value')\n watchValueHandler() {\n // Handle value change and update the corresponding dropdown item if it exists\n this.setInitialSelection();\n }\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Subscribe to click outside event.\n */\n connectedCallback() {\n document.addEventListener('click', this.handleClickOutside.bind(this));\n\n // Handle pre-selection during component initialization\n this.setInitialSelection();\n\n // Apply filtering if the dropdown is filterable and there is a value\n if (this.filterable && this.value) {\n this.filterText = this.value.toLowerCase();\n this.filterItems(); // Update the visibility of items\n } else {\n // Ensure all items are visible if no filtering is applied\n this.resetFilter();\n }\n }\n\n /**\n * Set the initial selection based on the current value and update the inputElement value.\n */\n private setInitialSelection() {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n const selectedItem = items.find(\n item =>\n item.getAttribute('label') === this.value ||\n item.getAttribute('value') === this.value ||\n item.textContent?.trim() === this.value,\n );\n\n // Remove 'selected' from all items first to reset the state\n items.forEach(item => {\n item.removeAttribute('selected');\n item.classList.remove('selected');\n });\n\n if (selectedItem) {\n // Add the `selected` attribute and `selected` class for visual styling\n selectedItem.setAttribute('selected', 'true');\n selectedItem.classList.add('selected');\n\n // Update the value and inputElement value to reflect the pre-selected item\n this.value =\n selectedItem.getAttribute('label') ||\n selectedItem.getAttribute('value') ||\n selectedItem.textContent?.trim() ||\n '';\n if (this.inputElement) {\n this.inputElement.value = this.value;\n }\n }\n }\n\n /**\n * Unsubscribe from click outside event.\n */\n disconnectedCallback() {\n document.removeEventListener('click', this.handleClickOutside.bind(this));\n }\n\n /**\n * Handle click on the input container.\n * @param {MouseEvent} event - The click event.\n */\n private handleInputContainerClick = (event: MouseEvent) => {\n if (this.disabled || this.readonly) {\n return; // Do nothing if the dropdown is disabled or read-only\n }\n\n const target = event.target as HTMLElement;\n\n // Check if it is the paragraph or another part of the container\n if (target.tagName === 'P' || target.tagName === 'SPAN') {\n this.open = true;\n this.popoverElement.show();\n\n // Simulate focus to trigger \"focus-within\" style\n const inputContainer = this.el.querySelector(\n '.input-container',\n ) as HTMLElement;\n if (inputContainer) {\n inputContainer.classList.add('focus-within');\n\n // Remove the \"focus-within\" class after a delay or when the popover is closed\n const removeFocusWithin = () => {\n inputContainer.classList.remove('focus-within');\n };\n\n // Or remove the class when the popover is closed\n this.popoverElement.addEventListener('hide', removeFocusWithin);\n }\n }\n };\n\n /**\n * Handle input change.\n * @param {Event} event - The input event.\n */\n private handleInput = (event: Event) => {\n if (!this.filterable) return; // Do not filter if `filterable` is false\n if (this.disabled || this.readonly) {\n return; // Do not toggle the state if the dropdown is disabled or read-only\n }\n const input = event.target as HTMLInputElement;\n this.filterText = input.value.toLowerCase();\n this.value = input.value; // Update the value\n this.valueChanged.emit(input.value); // Emit an event if needed\n this.filterItems(); // Update the visibility of items\n };\n\n /**\n * Filter dropdown items based on the text entered by the user.\n * If no items are found, display a message indicating no results.\n */\n private filterItems() {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n // Remove the \"no results found\" item if it exists\n const existingEmptyItem = this.el.querySelector(\n 'nv-fielddropdownitem[data-empty]',\n );\n if (existingEmptyItem) {\n existingEmptyItem.remove();\n }\n\n let hasVisibleItems = false;\n\n // Iterate over all items and adjust their visibility\n items.forEach(item => {\n const textContent = item.textContent?.toLowerCase() || ''; // Get the textual content of the slot\n const value = item.value?.toLowerCase() || ''; // Get the value of the `value` attribute\n\n // Check if the filtered text is present either in the value or in the textual content\n const shouldShow =\n value.includes(this.filterText) ||\n textContent.includes(this.filterText);\n\n item.style.display = shouldShow ? '' : 'none'; // Hide or show the item\n\n if (shouldShow) {\n hasVisibleItems = true;\n }\n });\n\n // If no items are visible, add the \"no results found\" item\n if (!hasVisibleItems) {\n const emptyItem = document.createElement('nv-fielddropdownitem');\n emptyItem.setAttribute('data-empty', 'true');\n emptyItem.setAttribute('disabled', 'true');\n emptyItem.textContent = this.emptyresult;\n this.el.querySelector('ul[slot=\"content\"]')?.appendChild(emptyItem);\n }\n }\n\n /**\n * Reset the filter and make all items visible.\n */\n private resetFilter() {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n items.forEach(item => {\n item.style.display = '';\n });\n }\n\n /**\n * Retrieves the current filter text entered by the user.\n * @returns {string} The filter text.\n */\n @Method()\n async getFilterText(): Promise<string> {\n return this.filterText;\n }\n\n /**\n * Handle click outside the component.\n * @param {MouseEvent} event - The click event.\n */\n private handleClickOutside(event: MouseEvent) {\n if (\n this.el.contains(event.target as Node) ||\n (this.inputElement && this.inputElement.contains(event.target as Node))\n ) {\n // If the click is inside the component or on the input, do not close the popover\n return;\n }\n\n this.popoverElement.hide(); // Close the popover if the click is outside the component\n }\n\n /**\n * Handle input focus.\n */\n private handleInputFocus = () => {\n if (this.disabled || this.readonly) {\n return; // Do not toggle the state if the dropdown is disabled or read-only\n }\n this.open = true; // Force the popover to open\n };\n\n /**\n * Handle input blur.\n */\n private handleInputBlur = () => {\n // Use a delay to check if the focus is still within the popover\n setTimeout(() => {\n if (!this.el.contains(document.activeElement)) {\n this.open = false;\n this.popoverElement.hide(); // Close the popover if the focus is outside the component\n }\n }, 150);\n };\n\n /**\n * Toggle the dropdown popover.\n * @returns {void}\n */\n private togglePopover = (): void => {\n if (this.disabled || this.readonly) {\n return; // Do not toggle if disabled or read-only\n }\n\n this.open = !this.open;\n if (this.open) {\n this.popoverElement.show();\n\n // Si le dropdown n'est pas filtrable, focus sur le premier élément\n if (!this.filterable) {\n this.focusFirstItem();\n }\n } else {\n this.popoverElement.hide();\n }\n };\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (!this.open) {\n if (event.key === 'ArrowDown') {\n this.open = true;\n this.popoverElement.show();\n\n if (!this.filterable) {\n // Focus sur le premier élément si ce n'est pas filtrable\n this.focusFirstItem();\n }\n\n event.preventDefault();\n return;\n }\n return;\n }\n\n // Vérifiez si le popover est défini avant de chercher les items\n if (!this.popoverElement) {\n console.warn('Popover element is not defined');\n return;\n }\n\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty])'),\n ) as HTMLNvFielddropdownitemElement[];\n\n // Vérifiez si les items existent\n if (items.length === 0) {\n console.warn('No dropdown items found to navigate');\n return;\n }\n\n let currentIndex = items.findIndex(item =>\n item.classList.contains('highlighted'),\n );\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n currentIndex = (currentIndex + 1) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n currentIndex = (currentIndex - 1 + items.length) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'Enter' && currentIndex >= 0) {\n event.preventDefault();\n items[currentIndex].click();\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.open = false;\n this.popoverElement.hide();\n if (this.inputElement) {\n this.inputElement.blur();\n }\n }\n }\n\n private updateHighlightedItem(\n items: HTMLNvFielddropdownitemElement[],\n index: number,\n ) {\n items.forEach((item, i) => {\n if (i === index) {\n item.classList.add('highlighted');\n item.setAttribute('tabindex', '0');\n if (!item.checkVisibility()) {\n console.log('Item not focused');\n }\n\n item.focus(); // Forcer le focus ici\n item.scrollIntoView({ block: 'nearest' });\n } else {\n item.classList.remove('highlighted');\n item.setAttribute('tabindex', '-1');\n }\n });\n }\n\n private focusFirstItem() {\n const firstItem = this.el.querySelector('nv-fielddropdownitem');\n if (firstItem) {\n (firstItem as HTMLElement).focus();\n this.updateHighlightedItem(\n Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[],\n 0,\n );\n } else {\n console.warn('No first item found to focus');\n }\n }\n\n //#endregion METHODS\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 <nv-popover\n ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n triggerMode=\"controlled\"\n placement=\"bottom-start\"\n open={this.open}\n >\n <div class=\"input-wrapper\" slot=\"trigger\">\n <slot name=\"before-input\"></slot>\n\n <div\n class=\"input-container\"\n onClick={this.handleInputContainerClick}\n >\n <slot name=\"leading-input\"></slot>\n\n {this.isFilterable || this.disabled || this.readonly ? (\n <input\n id={this.inputId}\n type=\"search\"\n ref={e => (this.inputElement = e)}\n autocomplete={this.autocomplete}\n placeholder={this.placeholder}\n name={this.name}\n value={this.value}\n required={this.required}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\n onFocus={this.handleInputFocus}\n onBlur={this.handleInputBlur}\n onKeyDown={this.handleKeyDown} // Gérer les touches fléchées ici\n />\n ) : (\n <p\n id={this.inputId}\n class=\"non-filterable-text\"\n onClick={this.handleInputContainerClick}\n tabIndex={0} // Ajout du tabindex pour permettre de le focus\n onKeyDown={this.handleKeyDown} // Gérer les touches fléchées ici également\n onFocus={this.handleInputFocus}\n >\n <span>{this.value || this.placeholder}</span>\n </p>\n )}\n\n <nv-iconbutton\n class=\"toggle-dropdown-icon\"\n name={this.open ? 'chevron-top' : 'chevron-down'}\n size=\"md\"\n emphasis=\"lower\"\n aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n aria-pressed={this.open.toString()}\n onClick={this.togglePopover}\n />\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n <slot name=\"content\"></slot>\n </nv-popover>\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 //#endregion RENDER\n}\n"]}
|
package/dist/collection/components/nv-fielddropdownitem/DropdownItemSelectedEventDetail.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropdownItemSelectedEventDetail.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdownitem/DropdownItemSelectedEventDetail.tsx"],"names":[],"mappings":"","sourcesContent":["/**\n * Interface for the event emitted by the dropdown item.\n */\nexport interface DropdownItemSelectedEventDetail {\n label?: string;\n value: string;\n selected: boolean;\n disabled: boolean;\n}\n"]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
nv-fielddropdownitem {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
justify-content: space-between;
|
|
5
|
+
max-width: 300px;
|
|
6
|
+
width: 100%;
|
|
7
|
+
padding: var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);
|
|
8
|
+
font-size: var(--menu-contextual-item-font-size);
|
|
9
|
+
font-weight: var(--menu-contextual-item-font-weight);
|
|
10
|
+
color: var(--components-menu-contextual-item-content);
|
|
11
|
+
border-radius: var(--menu-contextual-item-radius);
|
|
12
|
+
transition: background-color 150ms ease-out, color 150ms ease-out;
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
}
|
|
15
|
+
nv-fielddropdownitem:hover, nv-fielddropdownitem:focus, nv-fielddropdownitem:focus-within {
|
|
16
|
+
background-color: var(--components-menu-contextual-item-background-hover);
|
|
17
|
+
color: var(--components-menu-contextual-item-content-hover);
|
|
18
|
+
}
|
|
19
|
+
nv-fielddropdownitem.selected {
|
|
20
|
+
background-color: var(--components-menu-contextual-item-background-selected);
|
|
21
|
+
color: var(--components-menu-contextual-item-content-selected);
|
|
22
|
+
}
|
|
23
|
+
nv-fielddropdownitem[disabled]:not([disabled=false]) {
|
|
24
|
+
cursor: not-allowed;
|
|
25
|
+
background-color: unset;
|
|
26
|
+
color: var(--components-menu-contextual-item-content-disabled);
|
|
27
|
+
}
|
|
28
|
+
nv-fielddropdownitem [data-scope=text] {
|
|
29
|
+
flex-grow: 1;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
text-overflow: ellipsis;
|
|
32
|
+
white-space: nowrap;
|
|
33
|
+
}
|
|
34
|
+
nv-fielddropdownitem .selection-icon {
|
|
35
|
+
padding-left: 10px;
|
|
36
|
+
color: var(--components-menu-contextual-item-icon-selected);
|
|
37
|
+
align-self: center;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
:root {
|
|
41
|
+
--components-menu-contextual-item-background-selected: #f5f6f7;
|
|
42
|
+
--components-menu-contextual-item-content-selected: #171f22;
|
|
43
|
+
--components-menu-contextual-item-icon-selected: #007f00;
|
|
44
|
+
--components-menu-contextual-item-background-hover: #f5f6f7;
|
|
45
|
+
--components-menu-contextual-item-content-hover: #171f22;
|
|
46
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nv-fielddropdownitem.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdownitem/nv-fielddropdownitem.docs.tsx"],"names":[],"mappings":"AAGA,MAAM,uBAAuB,GAA6C;IACxE,SAAS,EAAE,sBAAsB;IACjC,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,eAAe,uBAAuB,CAAC","sourcesContent":["import type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvFielddropdownitemDocs: NovaDocs<Components.NvFielddropdownitem> = {\n component: 'nv-fielddropdownitem',\n skip: true,\n};\n\nexport default NvFielddropdownitemDocs;\n"]}
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
import { Host, h, } from "@stencil/core";
|
|
2
|
+
/**
|
|
3
|
+
* @slot default - The content to be displayed inside the dropdown item.
|
|
4
|
+
*/
|
|
5
|
+
export class NvFielddropdownitem {
|
|
6
|
+
constructor() {
|
|
7
|
+
this.handleClick = () => {
|
|
8
|
+
if (!this.disabled) {
|
|
9
|
+
let itemValue = this.value || '';
|
|
10
|
+
if (!itemValue) {
|
|
11
|
+
itemValue =
|
|
12
|
+
Array.from(this.el.childNodes)
|
|
13
|
+
.map(node => { var _a; return (_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
|
|
14
|
+
.filter(text => text && text.length > 0)
|
|
15
|
+
.join(' ') || '';
|
|
16
|
+
}
|
|
17
|
+
this.selected = !this.selected; // Toggle the selected state
|
|
18
|
+
this.itemSelected.emit({
|
|
19
|
+
label: this.label,
|
|
20
|
+
value: itemValue,
|
|
21
|
+
selected: this.selected,
|
|
22
|
+
disabled: this.disabled,
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
this.disabled = false;
|
|
27
|
+
this.selected = false;
|
|
28
|
+
this.value = undefined;
|
|
29
|
+
this.label = undefined;
|
|
30
|
+
}
|
|
31
|
+
//#endregion EVENTS
|
|
32
|
+
/****************************************************************************/
|
|
33
|
+
//#region METHODS
|
|
34
|
+
/**
|
|
35
|
+
* Utility function to check if a string is null, empty, or contains only whitespace.
|
|
36
|
+
* @param {string | null | undefined} input - The string to check.
|
|
37
|
+
* @returns {boolean} - Returns true if the string is null, empty, or contains only whitespace; otherwise, false.
|
|
38
|
+
*/
|
|
39
|
+
isNullOrEmptyOrWhitespace(input) {
|
|
40
|
+
return !input || input.trim().length === 0;
|
|
41
|
+
}
|
|
42
|
+
//#endregion METHODS
|
|
43
|
+
/****************************************************************************/
|
|
44
|
+
//#region RENDER
|
|
45
|
+
render() {
|
|
46
|
+
const showDefaultLayout = this.isNullOrEmptyOrWhitespace(this.label);
|
|
47
|
+
return (h(Host, { key: '7883f469059e808bca1d6fa7f4a0bbef75681d81', role: "menuitem", tabindex: this.disabled ? '-1' : '0', onClick: this.handleClick, class: { selected: this.selected } }, showDefaultLayout ? (h("slot", null)) : (h("div", { class: "flex gap-2" }, h("span", { "data-scope": "text" }, this.label), this.selected && (h("nv-icon", { name: "check", "aria-hidden": "true", class: "selection-icon" }))))));
|
|
48
|
+
}
|
|
49
|
+
static get is() { return "nv-fielddropdownitem"; }
|
|
50
|
+
static get originalStyleUrls() {
|
|
51
|
+
return {
|
|
52
|
+
"$": ["nv-fielddropdownitem.scss"]
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
static get styleUrls() {
|
|
56
|
+
return {
|
|
57
|
+
"$": ["nv-fielddropdownitem.css"]
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
static get properties() {
|
|
61
|
+
return {
|
|
62
|
+
"disabled": {
|
|
63
|
+
"type": "boolean",
|
|
64
|
+
"mutable": false,
|
|
65
|
+
"complexType": {
|
|
66
|
+
"original": "boolean",
|
|
67
|
+
"resolved": "boolean",
|
|
68
|
+
"references": {}
|
|
69
|
+
},
|
|
70
|
+
"required": false,
|
|
71
|
+
"optional": false,
|
|
72
|
+
"docs": {
|
|
73
|
+
"tags": [],
|
|
74
|
+
"text": "Disables the item, preventing any user interaction."
|
|
75
|
+
},
|
|
76
|
+
"attribute": "disabled",
|
|
77
|
+
"reflect": true,
|
|
78
|
+
"defaultValue": "false"
|
|
79
|
+
},
|
|
80
|
+
"selected": {
|
|
81
|
+
"type": "boolean",
|
|
82
|
+
"mutable": true,
|
|
83
|
+
"complexType": {
|
|
84
|
+
"original": "boolean",
|
|
85
|
+
"resolved": "boolean",
|
|
86
|
+
"references": {}
|
|
87
|
+
},
|
|
88
|
+
"required": false,
|
|
89
|
+
"optional": false,
|
|
90
|
+
"docs": {
|
|
91
|
+
"tags": [],
|
|
92
|
+
"text": "Indicates if the item is selected."
|
|
93
|
+
},
|
|
94
|
+
"attribute": "selected",
|
|
95
|
+
"reflect": true,
|
|
96
|
+
"defaultValue": "false"
|
|
97
|
+
},
|
|
98
|
+
"value": {
|
|
99
|
+
"type": "string",
|
|
100
|
+
"mutable": false,
|
|
101
|
+
"complexType": {
|
|
102
|
+
"original": "string",
|
|
103
|
+
"resolved": "string",
|
|
104
|
+
"references": {}
|
|
105
|
+
},
|
|
106
|
+
"required": false,
|
|
107
|
+
"optional": true,
|
|
108
|
+
"docs": {
|
|
109
|
+
"tags": [],
|
|
110
|
+
"text": "Value associated with the item."
|
|
111
|
+
},
|
|
112
|
+
"attribute": "value",
|
|
113
|
+
"reflect": true
|
|
114
|
+
},
|
|
115
|
+
"label": {
|
|
116
|
+
"type": "string",
|
|
117
|
+
"mutable": false,
|
|
118
|
+
"complexType": {
|
|
119
|
+
"original": "string",
|
|
120
|
+
"resolved": "string",
|
|
121
|
+
"references": {}
|
|
122
|
+
},
|
|
123
|
+
"required": false,
|
|
124
|
+
"optional": true,
|
|
125
|
+
"docs": {
|
|
126
|
+
"tags": [],
|
|
127
|
+
"text": "Label used as the value for the default layout."
|
|
128
|
+
},
|
|
129
|
+
"attribute": "label",
|
|
130
|
+
"reflect": true
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
}
|
|
134
|
+
static get events() {
|
|
135
|
+
return [{
|
|
136
|
+
"method": "itemSelected",
|
|
137
|
+
"name": "itemSelected",
|
|
138
|
+
"bubbles": true,
|
|
139
|
+
"cancelable": true,
|
|
140
|
+
"composed": true,
|
|
141
|
+
"docs": {
|
|
142
|
+
"tags": [],
|
|
143
|
+
"text": "Event emitted when an item is clicked."
|
|
144
|
+
},
|
|
145
|
+
"complexType": {
|
|
146
|
+
"original": "DropdownItemSelectedEventDetail",
|
|
147
|
+
"resolved": "DropdownItemSelectedEventDetail",
|
|
148
|
+
"references": {
|
|
149
|
+
"DropdownItemSelectedEventDetail": {
|
|
150
|
+
"location": "import",
|
|
151
|
+
"path": "./DropdownItemSelectedEventDetail",
|
|
152
|
+
"id": "src/components/nv-fielddropdownitem/DropdownItemSelectedEventDetail.tsx::DropdownItemSelectedEventDetail"
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
}];
|
|
157
|
+
}
|
|
158
|
+
static get elementRef() { return "el"; }
|
|
159
|
+
}
|
|
160
|
+
//# sourceMappingURL=nv-fielddropdownitem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nv-fielddropdownitem.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdownitem/nv-fielddropdownitem.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,OAAO,GACR,MAAM,eAAe,CAAC;AAGvB;;GAEG;AAOH,MAAM,OAAO,mBAAmB;;QAwCtB,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;gBACjC,IAAI,CAAC,SAAS,EAAE,CAAC;oBACf,SAAS;wBACP,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;6BAC3B,GAAG,CAAC,IAAI,CAAC,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAA,EAAA,CAAC;6BACrC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;6BACvC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;gBACvB,CAAC;gBAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,4BAA4B;gBAE5D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;oBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,KAAK,EAAE,SAAS;oBAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;wBAlD2B,KAAK;wBAMd,KAAK;;;;IA8CzB,mBAAmB;IACnB,8EAA8E;IAC9E,iBAAiB;IAEjB;;;;OAIG;IACK,yBAAyB,CAAC,KAAgC;QAChE,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;IAC7C,CAAC;IAED,oBAAoB;IACpB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAErE,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EACpC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAEjC,iBAAiB,CAAC,CAAC,CAAC,CACnB,eAAa,CACd,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,YAAY;YACrB,0BAAiB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ;YAC1C,IAAI,CAAC,QAAQ,IAAI,CAChB,eACE,IAAI,EAAC,OAAO,iBACA,MAAM,EAClB,KAAK,EAAC,gBAAgB,GACb,CACZ,CACG,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\nimport { DropdownItemSelectedEventDetail } from './DropdownItemSelectedEventDetail';\n\n/**\n * @slot default - The content to be displayed inside the dropdown item.\n */\n\n@Component({\n tag: 'nv-fielddropdownitem',\n styleUrl: 'nv-fielddropdownitem.scss',\n shadow: false,\n})\nexport class NvFielddropdownitem {\n @Element() el: HTMLNvFielddropdownitemElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Disables the item, preventing any user interaction.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * Indicates if the item is selected.\n */\n @Prop({ reflect: true, mutable: true })\n selected: boolean = false;\n\n /**\n * Value associated with the item.\n */\n @Prop({ reflect: true })\n readonly value?: string;\n\n /**\n * Label used as the value for the default layout.\n */\n @Prop({ reflect: true })\n readonly label?: string;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Event emitted when an item is clicked.\n */\n @Event()\n itemSelected: EventEmitter<DropdownItemSelectedEventDetail>;\n\n private handleClick = () => {\n if (!this.disabled) {\n let itemValue = this.value || '';\n if (!itemValue) {\n itemValue =\n Array.from(this.el.childNodes)\n .map(node => node.textContent?.trim())\n .filter(text => text && text.length > 0)\n .join(' ') || '';\n }\n\n this.selected = !this.selected; // Toggle the selected state\n\n this.itemSelected.emit({\n label: this.label,\n value: itemValue,\n selected: this.selected,\n disabled: this.disabled,\n });\n }\n };\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Utility function to check if a string is null, empty, or contains only whitespace.\n * @param {string | null | undefined} input - The string to check.\n * @returns {boolean} - Returns true if the string is null, empty, or contains only whitespace; otherwise, false.\n */\n private isNullOrEmptyOrWhitespace(input: string | null | undefined): boolean {\n return !input || input.trim().length === 0;\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n const showDefaultLayout = this.isNullOrEmptyOrWhitespace(this.label);\n\n return (\n <Host\n role=\"menuitem\"\n tabindex={this.disabled ? '-1' : '0'}\n onClick={this.handleClick}\n class={{ selected: this.selected }}\n >\n {showDefaultLayout ? (\n <slot></slot>\n ) : (\n <div class=\"flex gap-2\">\n <span data-scope=\"text\">{this.label}</span>\n {this.selected && (\n <nv-icon\n name=\"check\"\n aria-hidden=\"true\"\n class=\"selection-icon\"\n ></nv-icon>\n )}\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}
|
|
@@ -75,9 +75,9 @@ export class NvFieldnumber {
|
|
|
75
75
|
/****************************************************************************/
|
|
76
76
|
//#region RENDER
|
|
77
77
|
render() {
|
|
78
|
-
return (h(Host, { key: '
|
|
79
|
-
this.el.querySelector('[slot="description"]')) && (h("div", { key: '
|
|
80
|
-
this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '
|
|
78
|
+
return (h(Host, { key: '3a9223b9ec5b98988453bb2e4c3d321c753dbcd7' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'be1746ca557a151ff837a1477b37291297aebbb8', htmlFor: this.inputId }, h("slot", { key: '982e9f0d6aeed6fe243e7f3ad44de0efba796df1', name: "label" }, this.label))), h("div", { key: '931b96aeac31f348be4ee0650e9db607d1b67376', class: "input-wrapper" }, h("slot", { key: 'dfc3887c891cdf34591254294cd510a1850b22eb', name: "before-input" }), h("div", { key: '59724e6aa3c46b55f88ec02bfe4fefa271e988d1', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'db0ad5990287b5e5d731346ea9088d18aea437f9', name: "leading-input" }), h("input", { key: 'c524743652559eb6d039a71c9507cfbb08e2a115', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", 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 && (h("nv-icon", { key: 'eeba7946b7576c8eb37954479864d0fe5616609e', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '50ca73fb3cb891f2267da51bf4e2fe6c08e8384e', name: "circle-check", class: "validation", size: "md" })), h("div", { key: '399d9a01d07c98dbfd75cbe1f17720a3e2e7d892', class: "stepper-spacer" }), h("div", { key: '5d006aba51286bdbf6727e7970ffa6b7a1d089e6', class: "stepper" }, h("nv-icon", { key: 'bc7b73f787d0749fc617d689944eea3df06eb78d', name: "minus", size: "md", onClick: this.handleMinus, class: clsx({ disabled: this.isMinValueReached() }) }), h("nv-icon", { key: '5e4389fa084cb76c82f086d1937b6967c8292d53', name: "plus", size: "md", onClick: this.handlePlus, class: clsx({ disabled: this.isMaxValueReached() }) }))), h("slot", { key: '462809599f077fd76f8fac8bab40870885ec1369', name: "after-input" })), (this.description ||
|
|
79
|
+
this.el.querySelector('[slot="description"]')) && (h("div", { key: '0cfe8a2d53663147451a173fc524fd20af5391ba', class: "description" }, h("slot", { key: '99ddab81b68af0835b80a2d7bd5745ccb698da12', name: "description" }, this.description))), (this.errorDescription ||
|
|
80
|
+
this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c9199d6a3cf00ae2b63f93a11a15ff247fea2eda', hidden: !this.error, class: "error-description" }, h("slot", { key: '0bb584f886a73deaa18dfbbc5e93b25c96f22b1a', name: "error-description" }, this.errorDescription)))));
|
|
81
81
|
}
|
|
82
82
|
static get is() { return "nv-fieldnumber"; }
|
|
83
83
|
static get formAssociated() { return true; }
|
|
@@ -60,9 +60,9 @@ export class NvFieldpassword {
|
|
|
60
60
|
/****************************************************************************/
|
|
61
61
|
//#region RENDER
|
|
62
62
|
render() {
|
|
63
|
-
return (h(Host, { key: '
|
|
64
|
-
this.el.querySelector('[slot="description"]')) && (h("div", { key: '
|
|
65
|
-
this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '
|
|
63
|
+
return (h(Host, { key: '69ec0ce8bb09a3d18bc35ea9d3507642577e1d73' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'd1d7da07f6a385d9f1e533bcd2265416ad72c081', htmlFor: this.inputId }, h("slot", { key: 'e3636425c7ff4774efcebf23003c4ddfffd8deeb', name: "label" }, this.label))), h("div", { key: 'b1c900415a7c52f7c8049ee25095d672fcf0b2ae', class: "input-wrapper" }, h("slot", { key: 'a185ce16ac38763e53a874221a6d356b5a124a26', name: "before-input" }), h("div", { key: 'fea4f799535237b6eeaf74f4c689df99a9961676', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '9d0b505fc3c5289d6e58c097d4c60ee7afee7df1', name: "leading-input" }), h("input", { key: 'c3edbe0d8ff28fe7fc37adc73857654bebab642b', id: this.inputId, ref: e => (this.inputElement = e), 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.hidePasswordIcon && (h("nv-iconbutton", { key: '603d51f607526c519a181fd76d4e710948485041', class: "toggle-password-icon", name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, onKeyDown: this.handleKeyDown, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() })), (this.success || this.error) && (h("nv-icon", { key: '64d7c84b4c559a1d5abde6838f851a7020a13479', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), h("slot", { key: 'a4b2924196420f0907721fe48d759720cf0b2bbb', name: "after-input" })), (this.description ||
|
|
64
|
+
this.el.querySelector('[slot="description"]')) && (h("div", { key: 'e5d33079071a718cafc7b0fc8fde5f9117dda201', class: "description" }, h("slot", { key: '29ea9388ff1d4ec61ae54c13ff34f9101661bc62', name: "description" }, this.description))), (this.errorDescription ||
|
|
65
|
+
this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '34ed51e1bf050712126bd5a48ab9f426a3444db9', hidden: !this.error, class: "error-description" }, h("slot", { key: '940aa4d7799df58265a82b9440bf1e0bb36eb68e', name: "error-description" }, this.errorDescription)))));
|
|
66
66
|
}
|
|
67
67
|
static get is() { return "nv-fieldpassword"; }
|
|
68
68
|
static get formAssociated() { return true; }
|
|
@@ -59,9 +59,9 @@ export class NvFieldradio {
|
|
|
59
59
|
/****************************************************************************/
|
|
60
60
|
//#region RENDER
|
|
61
61
|
render() {
|
|
62
|
-
return (h(Host, { key: '
|
|
63
|
-
this.el.querySelector('[slot="description"]')) && (h("div", { key: '
|
|
64
|
-
this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '
|
|
62
|
+
return (h(Host, { key: '3b583693083de14efaeb3fec362b7841d792fd64', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: 'afbb24afc56563ba72f598f6bd5e195d5bcefcbf', type: "radio", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: 'f7506c57b0d409e0834fff77ed6f3f20937a7684', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '094290188857979a7c54878cfbba40333ea21044', htmlFor: this.inputId }, h("slot", { key: 'dd1dd4cda3cde671224d2a96b75a0db2d68484f9', name: "label" }, this.label))), (this.description ||
|
|
63
|
+
this.el.querySelector('[slot="description"]')) && (h("div", { key: 'de70a59d9849648140de4df091d0a6431bbeba66', class: "description" }, h("slot", { key: '297df2dc5e58ede572cb3ebee160d9f13cd3a2d0', name: "description" }, this.description))), (this.errorDescription ||
|
|
64
|
+
this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'e514dad229d2bedb194ac1e9586ce15cf9fca9ce', hidden: !this.error, class: "error-description" }, h("slot", { key: '68e52668dc96da4c354f1bc81927b7de3b81c8f6', name: "error-description" }, this.errorDescription))))));
|
|
65
65
|
}
|
|
66
66
|
static get is() { return "nv-fieldradio"; }
|
|
67
67
|
static get formAssociated() { return true; }
|
|
@@ -266,13 +266,13 @@ export class NvFieldselect {
|
|
|
266
266
|
* @returns {HTMLStencilElement} The HTML element to render.
|
|
267
267
|
*/
|
|
268
268
|
render() {
|
|
269
|
-
return (h(Host, { key: '
|
|
269
|
+
return (h(Host, { key: '084b481cd9fb4a5de72475c55b160e6b52791b19' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '8af61112f500899f876163354f0b75b1e68f0874', htmlFor: this.selectId }, h("slot", { key: 'e49a64d55614534aafc53b1aae1f93ab1e164ff2', name: "label" }, this.label))), h("div", { key: '3b91159475d481c9c2cfcebfdefee9e9ada81e09', class: "select-wrapper" }, h("slot", { key: '8a1e0736dcf48b2bf6d63936011115b903cc732a', name: "before-input" }), h("div", { key: 'c5d874489e528f67c60ee2262ed053cc29ed53fa', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '22e1ef11fb7924b71dc968ddc0cab92ce7ad0ad9', name: "leading-input" }), this.internalReadonly && (h("input", { key: 'd117241f08b1bc4e1c81cd07ff71ef4335a07768', id: this.selectId + '-readonly', type: "text", value: this.computedDisplayValue, readOnly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
|
|
270
270
|
? `${this.selectId}-error`
|
|
271
|
-
: `${this.selectId}-description` })), h("select", { key: '
|
|
271
|
+
: `${this.selectId}-description` })), h("select", { key: '62715b40d36a97243f3126238bb89cf99bfa697a', id: this.selectId, ref: el => (this.selectElement = el), name: this.name, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
|
|
272
272
|
? `${this.selectId}-error`
|
|
273
|
-
: `${this.selectId}-description` }, h("slot", { key: '
|
|
274
|
-
this.el.querySelector('[slot="description"]')) && (h("div", { key: '
|
|
275
|
-
this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '
|
|
273
|
+
: `${this.selectId}-description` }, h("slot", { key: '48005aa82e831392898795ce1bf84f6ae62ebbae' })), this.internalReadonly && (h("nv-icon", { key: 'b708946069c6ae49bd56910efaa246757d5c9aa6', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (h("nv-icon", { key: '43b4b0a27420de9fa357783cea4dfc3755dad51a', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: 'd0607401dffd4bf618acb7af51ff9a21576fb6ec', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: 'e90a2d6a6b75e3a85c300c4913cfe68356e09cc5', name: "after-input" })), (this.description ||
|
|
274
|
+
this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ea723eab08cd1c2501719d327b441c4ee5f017c0', class: "description", id: `${this.selectId}-description` }, h("slot", { key: 'eb4ee8a77bef595b8f654ff38debea299f702adc', name: "description" }, this.description))), (this.errorDescription ||
|
|
275
|
+
this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '3177ab730cb80127e12e807db80574dd777a2a99', class: "error-description", id: `${this.selectId}-error` }, h("slot", { key: '5e3c77cb967bfe314c8a492db0c735f40a540a66', name: "error-description" }, this.errorDescription)))));
|
|
276
276
|
}
|
|
277
277
|
static get is() { return "nv-fieldselect"; }
|
|
278
278
|
static get formAssociated() { return true; }
|
|
@@ -67,9 +67,9 @@ export class NvFieldtext {
|
|
|
67
67
|
/****************************************************************************/
|
|
68
68
|
//#region RENDER
|
|
69
69
|
render() {
|
|
70
|
-
return (h(Host, { key: '
|
|
71
|
-
this.el.querySelector('[slot="description"]')) && (h("div", { key: '
|
|
72
|
-
this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '
|
|
70
|
+
return (h(Host, { key: 'e225aa4eaca09107049fa32ccf899bce6ee470a7' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'ba7633e59530f2ee1d4705d7d1a9aba41e1b3f35', htmlFor: this.inputId }, h("slot", { key: '2baaf93329a6ccc2272dffa02b5cae183e0df7c5', name: "label" }, this.label))), h("div", { key: 'acb57998333c6f120e8f2767edb5219522cef1b1', class: "input-wrapper" }, h("slot", { key: '9514a67fc44ed12d19a77d7dbe207973c9e2a2e4', name: "before-input" }), h("div", { key: '5ddfe286f746e0a8bb227cb161f136e3accd31d8', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '468801862e9586bd7c4ced9514e03e564e003751', name: "leading-input" }), h("input", { key: '5fee6340bb6b66fa06459f646528b31e1894493f', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (h("nv-icon", { key: '29cef781d6815da459d2459749237c2fd8daa3a5', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '2d43eed9dd4cfc5545bb001809604903879cbe44', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: 'bf438d831e88a0a2a8886c4539c9a294f0276507', name: "after-input" })), (this.description ||
|
|
71
|
+
this.el.querySelector('[slot="description"]')) && (h("div", { key: '11ead2a09340dc116ed3f6701dcd42cf14393e68', class: "description" }, h("slot", { key: 'a54450d197d3fe5565d64b66899aac0a69fc27be', name: "description" }, this.description))), (this.errorDescription ||
|
|
72
|
+
this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'ee77c6e156665ab92ece7d653f2079d841a3ba71', hidden: !this.error, class: "error-description" }, h("slot", { key: 'b8eb5b43f7a7df72b4f278b9b86c0c621642900b', name: "error-description" }, this.errorDescription)))));
|
|
73
73
|
}
|
|
74
74
|
static get is() { return "nv-fieldtext"; }
|
|
75
75
|
static get formAssociated() { return true; }
|
|
@@ -24,7 +24,7 @@ export class NvFieldtextarea {
|
|
|
24
24
|
};
|
|
25
25
|
this.message = undefined;
|
|
26
26
|
this.validation = undefined;
|
|
27
|
-
this.
|
|
27
|
+
this.inputId = uuidv4();
|
|
28
28
|
this.label = undefined;
|
|
29
29
|
this.description = undefined;
|
|
30
30
|
this.placeholder = undefined;
|
|
@@ -128,9 +128,9 @@ export class NvFieldtextarea {
|
|
|
128
128
|
/****************************************************************************/
|
|
129
129
|
//#region RENDER
|
|
130
130
|
render() {
|
|
131
|
-
return (h(Host, { key: '
|
|
132
|
-
this.el.querySelector('[slot="description"]')) && (h("div", { key: '
|
|
133
|
-
this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '
|
|
131
|
+
return (h(Host, { key: '535238832a686d98bed7a743ba994515be7fa43b' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'ee8ee83154d8ebd436f697fb69235ad431aed0fd', htmlFor: this.inputId }, h("slot", { key: 'cf261fdd000fb29094888419a51f82dfa3fd8648', name: "label" }, this.label))), h("div", { key: '4b0573cf4c17e9a7c1ef2ff7ab4d1d08fe3e4848', class: "textarea-wrapper" }, h("div", { key: '36817cc56f30858fd5c4d2fe0acb29ebcbcaa2b8', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '6586b1d3dd17b29edccb96e556b6d01b721025b5', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.getResize()) }))), (this.description ||
|
|
132
|
+
this.el.querySelector('[slot="description"]')) && (h("div", { key: '068a1b72b760fed02ef647a866016ff6a39ed8e8', class: "description" }, h("slot", { key: '2d8e34b3c44a5ca3943dadbe91a98efdfc9e1df2', name: "description" }, this.description))), (this.errorDescription ||
|
|
133
|
+
this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '35fea730fcc254764c545f275298d3b03917b608', hidden: !this.error, class: "error-description" }, h("slot", { key: '58e300e380166c82e9857aa9d2929bdd11d798bf', name: "error-description" }, this.errorDescription)))));
|
|
134
134
|
}
|
|
135
135
|
static get is() { return "nv-fieldtextarea"; }
|
|
136
136
|
static get formAssociated() { return true; }
|
|
@@ -186,7 +186,7 @@ export class NvFieldtextarea {
|
|
|
186
186
|
"attribute": "validation",
|
|
187
187
|
"reflect": false
|
|
188
188
|
},
|
|
189
|
-
"
|
|
189
|
+
"inputId": {
|
|
190
190
|
"type": "string",
|
|
191
191
|
"mutable": false,
|
|
192
192
|
"complexType": {
|
|
@@ -198,9 +198,9 @@ export class NvFieldtextarea {
|
|
|
198
198
|
"optional": false,
|
|
199
199
|
"docs": {
|
|
200
200
|
"tags": [],
|
|
201
|
-
"text": "Sets the ID for the
|
|
201
|
+
"text": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
|
|
202
202
|
},
|
|
203
|
-
"attribute": "
|
|
203
|
+
"attribute": "input-id",
|
|
204
204
|
"reflect": true,
|
|
205
205
|
"defaultValue": "uuidv4()"
|
|
206
206
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nv-fieldtextarea.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/**\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-fieldtextarea',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n @Element() el: HTMLNvFieldtextareaElement;\n private textareaElement!: HTMLTextAreaElement;\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()\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()\n readonly validation: string;\n\n componentWillRender() {\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 DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the textarea 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 textareaId: string = uuidv4();\n\n /**\n * Lets you define the text that explains what users should enter in the text\n * textarea 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 textarea 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 textarea 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 textarea 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 textarea’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 textarea field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the textarea’s value is managed by the component’s state.\n */\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /**\n * The disabled prop lets you turn off the textarea 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 textarea 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 textarea 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 textarea 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 * Show a helpful message under the textarea field when there’s a problem. It\n * explains what’s wrong and how users can fix it, making the error easier to\n * understand and resolve.\n * @validator message\n */\n @Prop({ reflect: true, mutable: true })\n errorDescription: string;\n\n /**\n * Changes the textarea field’s appearance to indicate successful textarea 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 textarea field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their textarea 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 * textarea 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 * The number of visible text lines for the control. The default is 3. This\n * can be useful when you want to limit the size of the textarea field or when\n * you want to make the textarea field smaller to fit a specific layout. The\n * textarea field will expand vertically to fit the text as the user types.\n */\n @Prop({ reflect: true })\n readonly rows: number = 3;\n\n /**\n * Controls the resize property of a textarea. It can be set to none, both,\n * horizontal, or vertical. The default is vertical.\n */\n @Prop({ reflect: true })\n readonly resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * Enable this to make the textarea automatically resize as the user types,\n * adjusting the height to fit the content. For the best experience, avoid\n * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n * can still be allowed if desired.\n */\n @Prop({ reflect: true })\n readonly autosize: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the textarea value changes.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * If autosize is true, we need to make sure to update the min-height when\n * the rows change.\n */\n @Watch('rows')\n rowsChanged() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n }\n\n /**\n * If autosize is true, we need to make sure to update the height and\n * min-height, if false, we need to remove the height property.\n */\n @Watch('autosize')\n autosizeChanged() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n } else {\n this.textareaElement?.style.removeProperty('height');\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region METHODS\n\n private handleTextarea = (event: Event) => {\n const textarea = event.target as HTMLTextAreaElement;\n this.value = textarea.value;\n this.valueChanged.emit(textarea.value);\n\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n };\n\n private handleTextareaContainerClick = () => {\n this.textareaElement.focus();\n };\n\n private adjustTextareaHeight() {\n if (this.textareaElement && this.autosize) {\n this.textareaElement.style.height = 'auto';\n\n // Get computed styles\n const computedStyle = window.getComputedStyle(this.textareaElement);\n const lineHeight = parseFloat(computedStyle.lineHeight);\n const paddingTop = parseFloat(computedStyle.paddingTop);\n const paddingBottom = parseFloat(computedStyle.paddingBottom);\n const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n // Calculate min-height based on rows\n const minHeight =\n lineHeight * this.rows +\n paddingTop +\n paddingBottom +\n borderTopWidth +\n borderBottomWidth;\n\n this.textareaElement.style.minHeight = `${minHeight}px`;\n this.textareaElement.style.height =\n this.textareaElement.scrollHeight + 'px';\n }\n }\n\n /**\n * Class Properties\n * resize-none\tresize: none;\n * resize-y\t resize: vertical;\n * resize-x\t resize: horizontal;\n * resize\t resize: both;\n * @returns {string} The resize class.\n */\n private getResize() {\n if (this.resize === 'none') return 'resize-none';\n if (this.resize === 'vertical') return 'resize-y';\n if (this.resize === 'horizontal') return 'resize-x';\n if (this.resize === 'both') return 'resize';\n return 'resize-none';\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentDidLoad() {\n if (this.autosize) {\n this.adjustTextareaHeight();\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.textareaId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <div class=\"textarea-wrapper\">\n <div\n class=\"textarea-container\"\n onClick={this.handleTextareaContainerClick}\n >\n <textarea\n id={this.textareaId}\n ref={e => (this.textareaElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n autocomplete=\"off\"\n value={this.value}\n onInput={this.handleTextarea}\n rows={this.rows}\n class={clsx(this.getResize())}\n />\n </div>\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"]}
|
|
1
|
+
{"version":3,"file":"nv-fieldtextarea.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/**\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-fieldtextarea',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n @Element() el: HTMLNvFieldtextareaElement;\n private textareaElement!: HTMLTextAreaElement;\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()\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()\n readonly validation: string;\n\n componentWillRender() {\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 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 * textarea 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 textarea 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 textarea 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 textarea 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 textarea’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 textarea field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the textarea’s value is managed by the component’s state.\n */\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /**\n * The disabled prop lets you turn off the textarea 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 textarea 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 textarea 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 textarea 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 * Show a helpful message under the textarea field when there’s a problem. It\n * explains what’s wrong and how users can fix it, making the error easier to\n * understand and resolve.\n * @validator message\n */\n @Prop({ reflect: true, mutable: true })\n errorDescription: string;\n\n /**\n * Changes the textarea field’s appearance to indicate successful textarea 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 textarea field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their textarea 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 * textarea 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 * The number of visible text lines for the control. The default is 3. This\n * can be useful when you want to limit the size of the textarea field or when\n * you want to make the textarea field smaller to fit a specific layout. The\n * textarea field will expand vertically to fit the text as the user types.\n */\n @Prop({ reflect: true })\n readonly rows: number = 3;\n\n /**\n * Controls the resize property of a textarea. It can be set to none, both,\n * horizontal, or vertical. The default is vertical.\n */\n @Prop({ reflect: true })\n readonly resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * Enable this to make the textarea automatically resize as the user types,\n * adjusting the height to fit the content. For the best experience, avoid\n * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n * can still be allowed if desired.\n */\n @Prop({ reflect: true })\n readonly autosize: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the textarea value changes.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * If autosize is true, we need to make sure to update the min-height when\n * the rows change.\n */\n @Watch('rows')\n rowsChanged() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n }\n\n /**\n * If autosize is true, we need to make sure to update the height and\n * min-height, if false, we need to remove the height property.\n */\n @Watch('autosize')\n autosizeChanged() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n } else {\n this.textareaElement?.style.removeProperty('height');\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region METHODS\n\n private handleTextarea = (event: Event) => {\n const textarea = event.target as HTMLTextAreaElement;\n this.value = textarea.value;\n this.valueChanged.emit(textarea.value);\n\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n };\n\n private handleTextareaContainerClick = () => {\n this.textareaElement.focus();\n };\n\n private adjustTextareaHeight() {\n if (this.textareaElement && this.autosize) {\n this.textareaElement.style.height = 'auto';\n\n // Get computed styles\n const computedStyle = window.getComputedStyle(this.textareaElement);\n const lineHeight = parseFloat(computedStyle.lineHeight);\n const paddingTop = parseFloat(computedStyle.paddingTop);\n const paddingBottom = parseFloat(computedStyle.paddingBottom);\n const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n // Calculate min-height based on rows\n const minHeight =\n lineHeight * this.rows +\n paddingTop +\n paddingBottom +\n borderTopWidth +\n borderBottomWidth;\n\n this.textareaElement.style.minHeight = `${minHeight}px`;\n this.textareaElement.style.height =\n this.textareaElement.scrollHeight + 'px';\n }\n }\n\n /**\n * Class Properties\n * resize-none\tresize: none;\n * resize-y\t resize: vertical;\n * resize-x\t resize: horizontal;\n * resize\t resize: both;\n * @returns {string} The resize class.\n */\n private getResize() {\n if (this.resize === 'none') return 'resize-none';\n if (this.resize === 'vertical') return 'resize-y';\n if (this.resize === 'horizontal') return 'resize-x';\n if (this.resize === 'both') return 'resize';\n return 'resize-none';\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentDidLoad() {\n if (this.autosize) {\n this.adjustTextareaHeight();\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=\"textarea-wrapper\">\n <div\n class=\"textarea-container\"\n onClick={this.handleTextareaContainerClick}\n >\n <textarea\n id={this.inputId}\n ref={e => (this.textareaElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n autocomplete=\"off\"\n value={this.value}\n onInput={this.handleTextarea}\n rows={this.rows}\n class={clsx(this.getResize())}\n />\n </div>\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"]}
|
|
@@ -43,8 +43,8 @@ export class NvFieldtoggle {
|
|
|
43
43
|
}
|
|
44
44
|
/********************************* RENDER ***********************************/
|
|
45
45
|
render() {
|
|
46
|
-
return (h(Host, { key: '
|
|
47
|
-
this.el.querySelector('[slot="description"]')) && (h("div", { key: '
|
|
46
|
+
return (h(Host, { key: '3ea68d4cbec4bc0de00705d5b4dbf4a42316319b', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: 'cef0c3c3919f7248cc9870dbd2363cba85d2b038', class: "input-container" }, h("input", { key: '74d23f8ee6ed6fd7fb91dd5d233515970ac7ceed', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: '09a4f4c7fce473f4bb40a35f09e52a64d2dcf1d7', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '8bd7591d0c24613aa4b8c590e1bdec1b2e722042', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '404b6150ec81bcb651ac45c8ca5b2017c1805f49', name: "label" }, this.label))), (this.description ||
|
|
47
|
+
this.el.querySelector('[slot="description"]')) && (h("div", { key: '464d5965f59fb70656e918f5808146d247b86b33', class: "description" }, h("slot", { key: '6d0445706d47cffbd7ec80799d11f2eae048652f', name: "description" }, this.description))))));
|
|
48
48
|
}
|
|
49
49
|
static get is() { return "nv-fieldtoggle"; }
|
|
50
50
|
static get originalStyleUrls() {
|