npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.0.0 → 3.2.0 - Mend

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

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.

Files changed (532) hide show

package/dist/collection/components/nv-dialog/nv-dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-dialog.js","sourceRoot":"","sources":["../../../src/components/nv-dialog/nv-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,OAAO,EACP,MAAM,EACN,KAAK,EAEL,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EACL,iBAAiB,EACjB,oBAAoB,GAErB,MAAM,0BAA0B,CAAC;AAClC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAEpC;;;;;GAKG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAQU,mBAAc,GAAG,KAAK,CAAC;QA8B/B;;;WAGG;QAEH,SAAI,GAAY,KAAK,CAAC;QAEtB;;WAEG;QAEM,kBAAa,GAAY,KAAK,CAAC;QAExC;;WAEG;QAEM,iBAAY,GAAY,KAAK,CAAC;QAEvC;;WAEG;QAEM,eAAU,GAAY,KAAK,CAAC;QAErC;;WAEG;QAEM,SAAI,GAAY,KAAK,CAAC;QA6B/B;;WAEG;QACK,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC,CAAC;QAEF;;WAEG;QACK,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC,CAAC;QAuEF;;WAEG;QACK,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;QACH,CAAC,CAAC;QAkCM,uBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;YAC9D,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,aAAa,EAAE,CAAC;gBACxC,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC;QAEM,uBAAkB,GAAuB;YAC/C,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC;YACpB,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC;YACzB;gBACE,SAAS;gBACT,CAAC,CAAgB,EAAE,EAAE;oBACnB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;wBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,IAAI,CAAC,IAAI,EAAE,CAAC;oBACd,CAAC;gBACH,CAAC;aACF;SACF,CAAC;KA0IH;IArTC,uBAAuB;IACvB,8EAA8E;IAC9E,iBAAiB;IAEjB;;OAEG;IAEI,KAAK,CAAC,IAAI;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,oLAAoL;QACpL,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC;QAC/B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED;;OAEG;IAEI,KAAK,CAAC,KAAK;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAgBD;;OAEG;IACK,YAAY;QAClB,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE;YACrD,YAAY,EAAE,MAAM;SACrB,CAAC,CAAC;QAEH,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACjC,wEAAwE;YACxE,IAAI,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;YAC1C,IAAI,WAAW,GAAG,cAAc,CAAC,qBAAqB,EAAE,CAAC;YAEzD,iBAAiB,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;gBAClC,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;gBAC7C,IAAI,IAAI,CAAC,GAAG,GAAG,WAAW,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC;oBAC/D,cAAc,GAAG,OAAO,CAAC;oBACzB,WAAW,GAAG,IAAI,CAAC;gBACrB,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,+CAA+C;YAC/C,cAAc,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAED;;OAEG;IACK,oBAAoB;QAC1B,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACpE,iBAAiB,CAAC,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;YACtE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC;IACH,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1C,CAAC;IAED;;OAEG;IAEK,WAAW;QACjB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;IACpC,CAAC;IAEO,YAAY,CAAC,WAA4B;QAC/C,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC;YACpB,WAAW,CAAC,EAAE,GAAG,eAAe,MAAM,EAAE,EAAE,CAAC;QAC7C,CAAC;QACD,OAAO,WAAW,CAAC,EAAE,CAAC;IACxB,CAAC;IAsBD;;;OAGG;IAEH,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACjD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED;;;OAGG;IAEH,mBAAmB,CAAC,KAAiB;QACnC,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,aAAa;YAAE,OAAO;QACrD,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAED;;;OAGG;IAEH,mBAAmB,CAAC,KAAiB;QACnC,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,aAAa;YAAE,OAAO;QACrD,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAwBD,mBAAmB;IACnB,8EAA8E;IAC9E,kBAAkB;IAGlB,KAAK,CAAC,sBAAsB,CAAC,IAAa;QACxC,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAED,qBAAqB;IACrB,8EAA8E;IAC9E,mBAAmB;IAEnB;;;;OAIG;IACH,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC9D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;QAClD,CAAC,CAAgB,CAAC;QAElB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC7D,OAAO,CACL,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ;gBACvC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,iBAAiB,CAClD,CAAC;QACJ,CAAC,CAAgB,CAAC;QAElB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC7D,OAAO,CACL,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ;gBACvC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,iBAAiB,CAClD,CAAC;QACJ,CAAC,CAAgB,CAAC;QAElB,wEAAwE;QACxE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;gBAC5D,OAAO,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC;YAChD,CAAC,CAAoB,CAAC;YAEtB,IAAI,WAAW,EAAE,CAAC;gBAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;YAC7C,CAAC;QACH,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;QACD,6EAA6E;QAC7E,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,CAAC;YACrD,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;QACD,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACpE,oBAAoB,CAAC,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;YACzE,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC9B,CAAC;QACD,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAE3D,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,SAAS,GAAQ;YAE5B,+DACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EACpC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,IAAI,EAAC,QAAQ,gBACF,MAAM,qBACD,eAAe,sBACd,gBAAgB,EACjC,KAAK,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;gBAEhC,4DAAK,KAAK,EAAC,SAAS;oBACjB,CAAC,IAAI,CAAC,aAAa,IAAI,CACtB,kEACE,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAC,OAAO,EAChB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,IAAI,CAAC,iBAAiB,gBACpB,cAAc;wBAEzB,gEAAS,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,GAAG,CACpB,CACb;oBAEA,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CAC5B,CAAC,CAAC,CAAC,CACF,uBAAiB,EAAE,EAAC,eAAe,GAAmB,CACvD;oBAED,4DAAK,KAAK,EAAC,cAAc,EAAC,EAAE,EAAC,gBAAgB;wBAC3C,8DAAa,CACT;oBAEL,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CAC5B,CAAC,CAAC,CAAC,CACF,uBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,iBAAiB,EACf,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,EAEjD,gBAAgB,EAAE,IAAI,CAAC,kBAAkB,EACzC,aAAa,EAAE,IAAI,CAAC,aAAa,GAChB,CACpB,CACG,CACC,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Method,\n Event,\n EventEmitter,\n Watch,\n Listen,\n} from '@stencil/core';\nimport { tabbable } from 'tabbable';\nimport {\n addEventListeners,\n removeEventListeners,\n type EventsAndListeners,\n} from '../../utils/events.utils';\nimport clsx from 'clsx';\nimport { ButtonType } from '../../utils/constants';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n @slot default - Body of the dialog.\n * @slot trigger - Content to be placed as the trigger, will override the trigger prop.\n * @slot header - Content to be placed as the header, will override the header prop.\n * @slot footer - Content to be placed as the footer, will override the footer prop.\n /\n@Component({\n tag: 'nv-dialog',\n styleUrl: 'nv-dialog.scss',\n shadow: false,\n})\nexport class NvDialog {\n @Element() el: HTMLNvDialogElement;\n private dialogElement!: HTMLDialogElement;\n private eventsAttached = false;\n private form: string;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * @internal\n * Accepts a reference to the DOM element acting as the popover trigger. This\n * should be used when the slot for the trigger is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n triggerElement: Element;\n\n /\n @internal\n * Accepts a reference to the DOM element acting as the header. This should\n * be used when the slot for the header is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n headerElement: Element;\n\n /\n @internal\n * Accepts a reference to the DOM element acting as the footer. This should\n * be used when the slot for the footer is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n footerElement: Element;\n\n /\n Use this prop to toggle the visibility of the dialog. Set to true to show\n * the dialog and false to hide it.\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n If true, the dialog cannot be closed by the user.\n /\n @Prop({ reflect: true })\n readonly undismissable: boolean = false;\n\n /\n If true, the dialog will be closed when the backdrop is clicked.\n /\n @Prop({ reflect: true })\n readonly clickOutside: boolean = false;\n\n /\n If true, the dialog visibility is managed manually through methods or the open prop.\n /\n @Prop({ reflect: true })\n readonly controlled: boolean = false;\n\n /\n If true, the dialog takes full width styling.\n /\n @Prop({ reflect: true })\n readonly full: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Call this method to show the dialog, making it visible on the screen.\n /\n @Method()\n public async show() {\n this.open = true;\n this.preventScroll();\n // It is recommended to use the .show() or .showModal() method to render dialogs, rather than the open attribute. If a <dialog> is opened using the open attribute, it is non-modal.\n this.dialogElement.showModal();\n this.openChanged.emit(this.open);\n }\n\n /\n Call this method to hide the dialog, making it disappear from view.\n /\n @Method()\n public async close() {\n this.open = false;\n this.allowScroll();\n this.dialogElement.close();\n this.openChanged.emit(this.open);\n }\n\n /\n Handles the close button click.\n /\n private handleCloseButton = () => {\n this.close();\n };\n\n /\n Handles the cancel button click.\n /\n private handleCancelButton = () => {\n this.close();\n };\n\n /\n Sets the autofocus on the first focusable element in the dialog.\n /\n private setAutofocus() {\n const focusableElements = tabbable(this.dialogElement, {\n displayCheck: 'none',\n });\n\n if (focusableElements.length > 0) {\n // Convert to array and find element with smallest top and left position\n let topLeftElement = focusableElements[0];\n let topLeftRect = topLeftElement.getBoundingClientRect();\n\n focusableElements.forEach(element => {\n const rect = element.getBoundingClientRect();\n if (rect.top < topLeftRect.top \|\| rect.left < topLeftRect.left) {\n topLeftElement = element;\n topLeftRect = rect;\n }\n });\n\n // Set autofocus attribute on the found element\n topLeftElement.setAttribute('autofocus', 'true');\n }\n }\n\n /\n Attaches event listeners to the dialog.\n /\n private attachEventListeners() {\n if (this.triggerElement && !this.eventsAttached && !this.controlled) {\n addEventListeners(this.triggerClickEvents, this.triggerElement, this);\n this.eventsAttached = true;\n }\n }\n\n /\n Prevents the body from scrolling when the dialog is open.\n /\n private preventScroll() {\n document.body.style.overflow = 'hidden';\n }\n\n /\n Allows the body to scroll when the dialog is closed.\n /\n\n private allowScroll() {\n document.body.style.overflow = '';\n }\n\n private ensureFormId(formElement: HTMLFormElement): string {\n if (!formElement.id) {\n formElement.id = `dialog-form-${uuidv4()}`;\n }\n return formElement.id;\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the dialog is closing in order to allow for cleanup, data-capture, etc.\n * @bind open\n /\n @Event()\n openChanged: EventEmitter<boolean>;\n\n /\n Handles the native dialog close event.\n /\n private handleDialogClose = () => {\n if (this.open) {\n this.close();\n }\n };\n\n /\n Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.\n * @param {KeyboardEvent} event - The keydown event.\n /\n @Listen('keydown', { target: 'document' })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && this.undismissable) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n /\n Handles the click event to close the dialog when clickOutside is true.\n * @param {MouseEvent} event - The click event.\n /\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n if (!this.clickOutside \|\| this.undismissable) return;\n this.handleClickOutside(event);\n }\n\n /\n Handles the touchstart event to close the dialog when clickOutside is true.\n * @param {TouchEvent} event - The touchstart event.\n /\n @Listen('touchstart', { target: 'document' })\n handleDocumentTouch(event: TouchEvent) {\n if (!this.clickOutside \|\| this.undismissable) return;\n this.handleClickOutside(event);\n }\n\n private handleClickOutside = (event: MouseEvent \| TouchEvent) => {\n if (event.target === this.dialogElement) {\n this.close();\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n private triggerClickEvents: EventsAndListeners = [\n ['click', this.show],\n ['touchstart', this.show],\n [\n 'keydown',\n (e: KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n this.show();\n }\n },\n ],\n ];\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('open')\n async handleDialogOpenChange(open: boolean) {\n if (open) {\n this.show();\n } else {\n this.close();\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n /\n * Lifecycle method that runs before the component loads.\n * Initializes the trigger, header, and footer elements by finding them in the component's children.\n * Elements are found either by their slot attribute or by their tag name (for dialog header/footer)\n /\n componentWillLoad() {\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === 'trigger';\n }) as HTMLElement;\n\n this.headerElement = Array.from(this.el.children).find(child => {\n return (\n child.getAttribute('slot') === 'header' \|\|\n child.tagName.toLowerCase() === 'nv-dialogheader'\n );\n }) as HTMLElement;\n\n this.footerElement = Array.from(this.el.children).find(child => {\n return (\n child.getAttribute('slot') === 'footer' \|\|\n child.tagName.toLowerCase() === 'nv-dialogfooter'\n );\n }) as HTMLElement;\n\n // If no form ID is provided, check if there's a form and generate an ID\n if (!this.form) {\n const formElement = Array.from(this.el.children).find(child => {\n return child.tagName.toLowerCase() === 'form';\n }) as HTMLFormElement;\n\n if (formElement) {\n this.form = this.ensureFormId(formElement);\n }\n }\n }\n\n componentWillUpdate() {\n this.attachEventListeners();\n }\n\n componentDidLoad() {\n if (this.open) {\n this.show();\n }\n // Check if any element already has autofocus before setting it automatically\n if (!this.dialogElement.querySelector('[autofocus]')) {\n this.setAutofocus();\n }\n this.attachEventListeners();\n }\n\n disconnectedCallback() {\n if (this.triggerElement && !this.eventsAttached && !this.controlled) {\n removeEventListeners(this.triggerClickEvents, this.triggerElement, this);\n this.eventsAttached = false;\n }\n this.allowScroll();\n }\n\n //#endregion LIFECYCLE\n /***************************************************************************/\n //#region RENDER\n\n render() {\n const hasForm = this.form \|\| this.el.querySelector('form');\n\n return (\n <Host>\n <slot name=\"trigger\"></slot>\n\n <dialog\n ref={el => (this.dialogElement = el)}\n onClose={this.handleDialogClose}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"dialog-header\"\n aria-describedby=\"dialog-content\"\n class={clsx({ full: this.full })}\n >\n <div class=\"content\">\n {!this.undismissable && (\n <nv-button\n class=\"close-button\"\n emphasis=\"lower\"\n size=\"sm\"\n onClick={this.handleCloseButton}\n aria-label=\"Close dialog\"\n >\n <nv-icon name=\"x\" size=\"sm\" />\n </nv-button>\n )}\n\n {this.headerElement ? (\n <slot name=\"header\"></slot>\n ) : (\n <nv-dialogheader id=\"dialog-header\"></nv-dialogheader>\n )}\n\n <div class=\"content-body\" id=\"dialog-content\">\n <slot></slot>\n </div>\n\n {this.footerElement ? (\n <slot name=\"footer\"></slot>\n ) : (\n <nv-dialogfooter\n form={this.form}\n primaryButtonType={\n hasForm ? ButtonType.Submit : ButtonType.Button\n }\n onDialogCanceled={this.handleCancelButton}\n undismissable={this.undismissable}\n ></nv-dialogfooter>\n )}\n </div>\n </dialog>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"nv-dialog.js","sourceRoot":"","sources":["../../../src/components/nv-dialog/nv-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Method,\n Event,\n EventEmitter,\n Watch,\n Listen,\n} from '@stencil/core';\nimport { tabbable } from 'tabbable';\nimport {\n addEventListeners,\n removeEventListeners,\n type EventsAndListeners,\n} from '../../utils/events.utils';\nimport clsx from 'clsx';\nimport { ButtonType } from '../../utils/constants';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n @slot default - Body of the dialog.\n * @slot trigger - Content to be placed as the trigger, will override the trigger prop.\n * @slot header - Content to be placed as the header, will override the header prop.\n * @slot footer - Content to be placed as the footer, will override the footer prop.\n /\n@Component({\n tag: 'nv-dialog',\n styleUrl: 'nv-dialog.scss',\n shadow: false,\n})\nexport class NvDialog {\n @Element() el: HTMLNvDialogElement;\n private dialogElement!: HTMLDialogElement;\n private eventsAttached = false;\n private form: string;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * @internal\n * Accepts a reference to the DOM element acting as the popover trigger. This\n * should be used when the slot for the trigger is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n triggerElement: Element;\n\n /\n @internal\n * Accepts a reference to the DOM element acting as the header. This should\n * be used when the slot for the header is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n headerElement: Element;\n\n /\n @internal\n * Accepts a reference to the DOM element acting as the footer. This should\n * be used when the slot for the footer is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n footerElement: Element;\n\n /\n Use this prop to toggle the visibility of the dialog. Set to true to show\n * the dialog and false to hide it.\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n If true, the dialog cannot be closed by the user.\n /\n @Prop({ reflect: true })\n readonly undismissable: boolean = false;\n\n /\n If true, the dialog will be closed when the backdrop is clicked.\n /\n @Prop({ reflect: true })\n readonly clickOutside: boolean = false;\n\n /\n If true, the dialog visibility is managed manually through methods or the open prop.\n /\n @Prop({ reflect: true })\n readonly controlled: boolean = false;\n\n /\n If true, the dialog takes full width styling.\n /\n @Prop({ reflect: true })\n readonly full: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Call this method to show the dialog, making it visible on the screen.\n /\n @Method()\n public async show() {\n this.open = true;\n this.preventScroll();\n // It is recommended to use the .show() or .showModal() method to render dialogs, rather than the open attribute. If a <dialog> is opened using the open attribute, it is non-modal.\n this.dialogElement.showModal();\n this.openChanged.emit(this.open);\n }\n\n /\n Call this method to hide the dialog, making it disappear from view.\n /\n @Method()\n public async close() {\n this.open = false;\n this.allowScroll();\n this.dialogElement.close();\n this.openChanged.emit(this.open);\n }\n\n /\n Handles the close button click.\n /\n private handleCloseButton = () => {\n this.close();\n };\n\n /\n Handles the cancel button click.\n /\n private handleCancelButton = () => {\n this.close();\n };\n\n /\n Sets the autofocus on the first focusable element in the dialog.\n /\n private setAutofocus() {\n const focusableElements = tabbable(this.dialogElement, {\n displayCheck: 'none',\n });\n\n if (focusableElements.length > 0) {\n // Convert to array and find element with smallest top and left position\n let topLeftElement = focusableElements[0];\n let topLeftRect = topLeftElement.getBoundingClientRect();\n\n focusableElements.forEach(element => {\n const rect = element.getBoundingClientRect();\n if (rect.top < topLeftRect.top \|\| rect.left < topLeftRect.left) {\n topLeftElement = element;\n topLeftRect = rect;\n }\n });\n\n // Set autofocus attribute on the found element\n topLeftElement.setAttribute('autofocus', 'true');\n }\n }\n\n /\n Attaches event listeners to the dialog.\n /\n private attachEventListeners() {\n if (this.triggerElement && !this.eventsAttached && !this.controlled) {\n addEventListeners(this.triggerClickEvents, this.triggerElement, this);\n this.eventsAttached = true;\n }\n }\n\n /\n Prevents the body from scrolling when the dialog is open.\n /\n private preventScroll() {\n document.body.style.overflow = 'hidden';\n }\n\n /\n Allows the body to scroll when the dialog is closed.\n /\n\n private allowScroll() {\n document.body.style.overflow = '';\n }\n\n private ensureFormId(formElement: HTMLFormElement): string {\n if (!formElement.id) {\n formElement.id = `dialog-form-${uuidv4()}`;\n }\n return formElement.id;\n }\n\n /\n Checks for and sets up form ID if a form is present\n /\n private checkForForm = () => {\n if (!this.form) {\n const formElement = this.el.querySelector('form') as HTMLFormElement;\n if (formElement) {\n this.form = this.ensureFormId(formElement);\n }\n }\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the dialog is closing in order to allow for cleanup, data-capture, etc.\n * @bind open\n /\n @Event()\n openChanged: EventEmitter<boolean>;\n\n /\n Handles the native dialog close event.\n /\n private handleDialogClose = () => {\n if (this.open) {\n this.close();\n }\n };\n\n /\n Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.\n * @param {KeyboardEvent} event - The keydown event.\n /\n @Listen('keydown', { target: 'document' })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && this.undismissable) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n /\n Handles the click event to close the dialog when clickOutside is true.\n * @param {MouseEvent} event - The click event.\n /\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n if (!this.clickOutside \|\| this.undismissable) return;\n this.handleClickOutside(event);\n }\n\n /\n Handles the touchstart event to close the dialog when clickOutside is true.\n * @param {TouchEvent} event - The touchstart event.\n /\n @Listen('touchstart', { target: 'document' })\n handleDocumentTouch(event: TouchEvent) {\n if (!this.clickOutside \|\| this.undismissable) return;\n this.handleClickOutside(event);\n }\n\n private handleClickOutside = (event: MouseEvent \| TouchEvent) => {\n if (event.target === this.dialogElement) {\n this.close();\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n private triggerClickEvents: EventsAndListeners = [\n ['click', this.show],\n ['touchstart', this.show],\n [\n 'keydown',\n (e: KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n this.show();\n }\n },\n ],\n ];\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('open')\n async handleDialogOpenChange(open: boolean) {\n if (open) {\n this.show();\n } else {\n this.close();\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n /\n * Lifecycle method that runs before the component loads.\n * Initializes the trigger, header, and footer elements by finding them in the component's children.\n * Elements are found either by their slot attribute or by their tag name (for dialog header/footer)\n /\n componentWillLoad() {\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === 'trigger';\n }) as HTMLElement;\n\n this.headerElement = Array.from(this.el.children).find(child => {\n return (\n child.getAttribute('slot') === 'header' \|\|\n child.tagName.toLowerCase() === 'nv-dialogheader'\n );\n }) as HTMLElement;\n\n this.footerElement = Array.from(this.el.children).find(child => {\n return (\n child.getAttribute('slot') === 'footer' \|\|\n child.tagName.toLowerCase() === 'nv-dialogfooter'\n );\n }) as HTMLElement;\n\n // Initial form check\n this.checkForForm();\n }\n\n componentWillUpdate() {\n this.attachEventListeners();\n }\n\n componentDidLoad() {\n if (this.open) {\n this.show();\n }\n // Check if any element already has autofocus before setting it automatically\n if (!this.dialogElement.querySelector('[autofocus]')) {\n this.setAutofocus();\n }\n this.attachEventListeners();\n\n // Additional form check in case form was added after initial load\n this.checkForForm();\n }\n\n disconnectedCallback() {\n if (this.triggerElement && !this.eventsAttached && !this.controlled) {\n removeEventListeners(this.triggerClickEvents, this.triggerElement, this);\n this.eventsAttached = false;\n }\n this.allowScroll();\n }\n\n //#endregion LIFECYCLE\n /***************************************************************************/\n //#region RENDER\n\n render() {\n const hasForm = this.form \|\| this.el.querySelector('form');\n\n return (\n <Host>\n <slot name=\"trigger\"></slot>\n\n <dialog\n ref={el => (this.dialogElement = el)}\n onClose={this.handleDialogClose}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"dialog-header\"\n aria-describedby=\"dialog-content\"\n class={clsx({ full: this.full })}\n >\n <div class=\"content\">\n {!this.undismissable && (\n <nv-button\n class=\"close-button\"\n emphasis=\"lower\"\n size=\"sm\"\n onClick={this.handleCloseButton}\n aria-label=\"Close dialog\"\n >\n <nv-icon name=\"x\" size=\"sm\" />\n </nv-button>\n )}\n\n {this.headerElement ? (\n <slot name=\"header\"></slot>\n ) : (\n <nv-dialogheader id=\"dialog-header\"></nv-dialogheader>\n )}\n\n <div class=\"content-body\" id=\"dialog-content\">\n <slot></slot>\n </div>\n\n {this.footerElement ? (\n <slot name=\"footer\"></slot>\n ) : (\n <nv-dialogfooter\n form={this.form}\n primaryButtonType={\n hasForm ? ButtonType.Submit : ButtonType.Button\n }\n onDialogCanceled={this.handleCancelButton}\n undismissable={this.undismissable}\n ></nv-dialogfooter>\n )}\n </div>\n </dialog>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/nv-fielddate/nv-fielddate.docs.js CHANGED Viewed

@@ -72,7 +72,7 @@ const NvFielddateDocs = {
                 numberOfCalendars: 1,
                 showWeekNumbers: true,
                 showActions: true,
-                shortcuts: JSON.stringify([
+                shortcuts: [
                     {
                         label: 'Today',
                         singleValue: dayjs().format('DD/MM/YYYY'),
@@ -81,7 +81,7 @@ const NvFielddateDocs = {
                         label: 'Last week',
                         singleValue: dayjs().subtract(7, 'days').format('DD/MM/YYYY'),
                     },
-                ]),
+                ],
                 shortcutsPlacement: 'bottom',
             },
             template: h("nv-fielddate", { "data-storybook-args": true }),
@@ -93,7 +93,7 @@ const NvFielddateDocs = {
                 description: 'Calendar with shortcuts at the bottom',
                 dateFormat: 'DD/MM/YYYY',
                 showActions: true,
-                shortcuts: JSON.stringify([
+                shortcuts: [
                     {
                         label: 'Today',
                         singleValue: dayjs().format('DD/MM/YYYY'),
@@ -106,7 +106,7 @@ const NvFielddateDocs = {
                         label: 'Last Week',
                         singleValue: dayjs().subtract(7, 'days').format('DD/MM/YYYY'),
                     },
-                ]),
+                ],
                 shortcutsPlacement: 'bottom',
             },
             template: h("nv-fielddate", { "data-storybook-args": true }),
@@ -118,7 +118,7 @@ const NvFielddateDocs = {
                 description: 'Calendar with shortcuts on the right',
                 dateFormat: 'DD/MM/YYYY',
                 showActions: true,
-                shortcuts: JSON.stringify([
+                shortcuts: [
                     {
                         label: 'Start of Month',
                         singleValue: dayjs().startOf('month').format('DD/MM/YYYY'),
@@ -127,7 +127,7 @@ const NvFielddateDocs = {
                         label: 'End of Month',
                         singleValue: dayjs().endOf('month').format('DD/MM/YYYY'),
                     },
-                ]),
+                ],
                 shortcutsPlacement: 'right',
             },
             template: h("nv-fielddate", { "data-storybook-args": true }),
@@ -138,11 +138,11 @@ const NvFielddateDocs = {
                 label: 'Date with Disabled Dates',
                 description: 'Calendar with specific dates disabled',
                 dateFormat: 'DD/MM/YYYY',
-                disabledDates: JSON.stringify([
+                disabledDates: [
                     dayjs().add(1, 'day').format('DD/MM/YYYY'),
                     dayjs().add(3, 'day').format('DD/MM/YYYY'),
                     dayjs().add(5, 'day').format('DD/MM/YYYY'),
-                ]),
+                ],
             },
             template: h("nv-fielddate", { "data-storybook-args": true }),
         },
@@ -275,6 +275,14 @@ const NvFielddateDocs = {
             },
             template: h("nv-fielddate", { "data-storybook-args": true }),
         },
+        {
+            name: nameof(x => x.fluid),
+            args: {
+                label: 'Fluid',
+                fluid: true,
+            },
+            template: h("nv-fielddate", { "data-storybook-args": true }),
+        },
         {
             name: 'leadingInputSlot',
             description: 'Content to be placed before the input text, within the input container.',

package/dist/collection/components/nv-fielddate/nv-fielddate.docs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fielddate.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fielddate/nv-fielddate.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\nimport dayjs from 'dayjs';\n\nconst toKebabCase = (str: string): string =>\n str\n .toLowerCase()\n .replace(/[^a-z0-9]+/g, '')\n .replace(/^-+\|-+$/g, '');\n\nconst formats = [\n {\n name: 'ISO 8601',\n dateFormat: 'YYYY-MM-DD[T]HH:mm:ss[Z]',\n value: '2025-03-15T00:00:00Z',\n },\n {\n name: 'YYYY-MM-DD',\n dateFormat: 'YYYY-MM-DD',\n value: '2025-03-15',\n },\n {\n name: 'DD/MM/YYYY',\n dateFormat: 'DD/MM/YYYY',\n value: '15/03/2025',\n },\n {\n name: 'MM/DD/YYYY',\n dateFormat: 'MM/DD/YYYY',\n value: '03/15/2025',\n },\n {\n name: 'Compact YYYYMMDD',\n dateFormat: 'YYYYMMDD',\n value: '20250315',\n },\n {\n name: 'German DD.MM.YYYY',\n dateFormat: 'DD.MM.YYYY',\n value: '15.03.2025',\n },\n];\n\nconst formatStories = formats.map(format => ({\n name: `Format${toKebabCase(format.name)}`,\n args: {\n label: `Date (${format.name})`,\n description: `Using format: ${format.dateFormat}`,\n placeholder: format.value,\n dateFormat: format.dateFormat,\n locale: format.name === 'German DD.MM.YYYY' ? 'de-DE' : 'en-US',\n value: format.value,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n}));\n\nconst NvFielddateDocs: NovaDocs<Components.NvFielddate> = {\n component: 'nv-fielddate',\n subcomponents: ['nv-badge', 'nv-button', 'nv-iconbutton', 'nv-calendar'],\n badge: 'beta',\n stories: [\n {\n name: 'Default',\n args: {\n dateFormat: 'DD/MM/YYYY',\n autofocus: true,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'WithCalendarOptions',\n args: {\n label: 'Date with Calendar Options',\n description: 'Calendar with additional options',\n dateFormat: 'DD/MM/YYYY',\n firstDayOfWeek: 1,\n numberOfCalendars: 1,\n showWeekNumbers: true,\n showActions: true,\n shortcuts: JSON.stringify([\n {\n label: 'Today',\n singleValue: dayjs().format('DD/MM/YYYY'),\n },\n {\n label: 'Last week',\n singleValue: dayjs().subtract(7, 'days').format('DD/MM/YYYY'),\n },\n ]),\n shortcutsPlacement: 'bottom',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'WithShortcutsBottom',\n args: {\n label: 'Date with Bottom Shortcuts',\n description: 'Calendar with shortcuts at the bottom',\n dateFormat: 'DD/MM/YYYY',\n showActions: true,\n shortcuts: JSON.stringify([\n {\n label: 'Today',\n singleValue: dayjs().format('DD/MM/YYYY'),\n },\n {\n label: 'Yesterday',\n singleValue: dayjs().subtract(1, 'day').format('DD/MM/YYYY'),\n },\n {\n label: 'Last Week',\n singleValue: dayjs().subtract(7, 'days').format('DD/MM/YYYY'),\n },\n ]),\n shortcutsPlacement: 'bottom',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'WithShortcutsRight',\n args: {\n label: 'Date with Right Shortcuts',\n description: 'Calendar with shortcuts on the right',\n dateFormat: 'DD/MM/YYYY',\n showActions: true,\n shortcuts: JSON.stringify([\n {\n label: 'Start of Month',\n singleValue: dayjs().startOf('month').format('DD/MM/YYYY'),\n },\n {\n label: 'End of Month',\n singleValue: dayjs().endOf('month').format('DD/MM/YYYY'),\n },\n ]),\n shortcutsPlacement: 'right',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'WithDisabledDates',\n args: {\n label: 'Date with Disabled Dates',\n description: 'Calendar with specific dates disabled',\n dateFormat: 'DD/MM/YYYY',\n disabledDates: JSON.stringify([\n dayjs().add(1, 'day').format('DD/MM/YYYY'),\n dayjs().add(3, 'day').format('DD/MM/YYYY'),\n dayjs().add(5, 'day').format('DD/MM/YYYY'),\n ]),\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'MultipleCalendars',\n args: {\n label: 'Multiple Calendars',\n description: 'Display multiple calendars side by side',\n dateFormat: 'DD/MM/YYYY',\n numberOfCalendars: 3,\n showWeekNumbers: true,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'WithInitialValue',\n args: {\n label: 'Pre-selected Date',\n description: 'Calendar with an initial value',\n dateFormat: 'DD/MM/YYYY',\n value: dayjs().format('DD/MM/YYYY'),\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'WithMinMax',\n args: {\n label: 'Date with Min/Max',\n description: 'Select a date within range',\n dateFormat: 'YYYY-MM-DD',\n min: '2025-02-05',\n max: '2025-02-20',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'CulturalVariants',\n args: {\n numberOfCalendars: 1,\n firstDayOfWeek: 1,\n showWeekNumbers: true,\n },\n template: (\n <div class=\"flex flex-wrap gap-4\">\n <nv-fielddate\n label=\"Date (en-BE)\"\n locale=\"en-BE\"\n dateFormat=\"YYYY-MM-DD\"\n data-storybook-args\n />\n <nv-fielddate\n label=\"Date (fr-BE)\"\n locale=\"fr-BE\"\n dateFormat=\"DD/MM/YYYY\"\n data-storybook-args\n />\n <nv-fielddate\n label=\"Date (de-DE)\"\n locale=\"de-DE\"\n dateFormat=\"DD.MM.YYYY\"\n data-storybook-args\n />\n </div>\n ),\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.label),\n args: {\n label: 'Textfield Label',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.description),\n args: {\n label: 'Textfield Description',\n description: 'Description will show here',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.placeholder),\n args: {\n label: 'Textfield Placeholder',\n placeholder: 'Type something...',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.name),\n args: {\n label: 'Textfield Name',\n name: 'name',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.value),\n args: {\n label: 'Textfield Value',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n\n {\n name: nameof<Components.NvFieldtext>(x => x.disabled),\n args: {\n label: 'Textfield Disabled',\n disabled: true,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.readonly),\n args: {\n label: 'Textfield Readonly',\n readonly: true,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.required),\n args: {\n label: 'Textfield Required',\n required: true,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.error),\n args: {\n label: 'Textfield Error',\n error: true,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.errorDescription),\n args: {\n label: 'Textfield Error Description',\n description: 'Make sure to be valid.',\n error: true,\n errorDescription: 'This input has an error.',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.success),\n args: {\n label: 'Textfield Success',\n success: true,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'leadingInputSlot',\n description:\n 'Content to be placed before the input text, within the input container.',\n args: {\n label: 'Leading Input',\n },\n template: (\n <nv-fielddate data-storybook-args>\n <nv-badge slot=\"leading-input\" label=\"test\" dismissible></nv-badge>\n </nv-fielddate>\n ),\n },\n {\n name: 'labelSlot',\n description:\n 'Content to be placed as the label, will override the label prop.',\n args: {\n label: 'Original Label',\n },\n template: (\n <nv-fielddate data-storybook-args>\n <span slot=\"label\">Label Slot</span>\n </nv-fielddate>\n ),\n },\n {\n name: 'descriptionSlot',\n description:\n 'Content to be placed as the description, will override the description prop.',\n args: {\n label: 'Description Slot',\n description: 'Original description',\n },\n template: (\n <nv-fielddate data-storybook-args>\n <span slot=\"description\">Custom Description</span>\n </nv-fielddate>\n ),\n },\n {\n name: 'errorDescriptionSlot',\n description:\n 'Content to be placed as the error description, will override the errorDescription prop.',\n args: {\n label: 'Error Description Slot',\n errorDescription: 'Original error description',\n error: true,\n },\n template: (\n <nv-fielddate data-storybook-args>\n <span slot=\"error-description\">Custom Error Description</span>\n </nv-fielddate>\n ),\n },\n {\n name: 'beforeInputSlot',\n description:\n 'Content to be placed before the input text, outside the input container.',\n args: {\n label: 'Before Input Slot',\n description: 'Description will show here',\n },\n template: (\n <nv-fielddate data-storybook-args>\n <nv-button slot=\"before-input\">Before Input Slot</nv-button>\n </nv-fielddate>\n ),\n },\n {\n name: 'afterInputSlot',\n description:\n 'Content to be placed after the input text, outside the input container.',\n args: {\n label: 'After Input Slot',\n description: 'Description will show here',\n },\n template: (\n <nv-fielddate data-storybook-args>\n <nv-button slot=\"after-input\">After Input Slot</nv-button>\n </nv-fielddate>\n ),\n },\n\n ...formatStories,\n ],\n};\n\nexport default NvFielddateDocs;\n"]}
1	+ {"version":3,"file":"nv-fielddate.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fielddate/nv-fielddate.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\nimport dayjs from 'dayjs';\n\nconst toKebabCase = (str: string): string =>\n str\n .toLowerCase()\n .replace(/[^a-z0-9]+/g, '')\n .replace(/^-+\|-+$/g, '');\n\nconst formats = [\n {\n name: 'ISO 8601',\n dateFormat: 'YYYY-MM-DD[T]HH:mm:ss[Z]',\n value: '2025-03-15T00:00:00Z',\n },\n {\n name: 'YYYY-MM-DD',\n dateFormat: 'YYYY-MM-DD',\n value: '2025-03-15',\n },\n {\n name: 'DD/MM/YYYY',\n dateFormat: 'DD/MM/YYYY',\n value: '15/03/2025',\n },\n {\n name: 'MM/DD/YYYY',\n dateFormat: 'MM/DD/YYYY',\n value: '03/15/2025',\n },\n {\n name: 'Compact YYYYMMDD',\n dateFormat: 'YYYYMMDD',\n value: '20250315',\n },\n {\n name: 'German DD.MM.YYYY',\n dateFormat: 'DD.MM.YYYY',\n value: '15.03.2025',\n },\n];\n\nconst formatStories = formats.map(format => ({\n name: `Format${toKebabCase(format.name)}`,\n args: {\n label: `Date (${format.name})`,\n description: `Using format: ${format.dateFormat}`,\n placeholder: format.value,\n dateFormat: format.dateFormat,\n locale: format.name === 'German DD.MM.YYYY' ? 'de-DE' : 'en-US',\n value: format.value,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n}));\n\nconst NvFielddateDocs: NovaDocs<Components.NvFielddate> = {\n component: 'nv-fielddate',\n subcomponents: ['nv-badge', 'nv-button', 'nv-iconbutton', 'nv-calendar'],\n badge: 'beta',\n stories: [\n {\n name: 'Default',\n args: {\n dateFormat: 'DD/MM/YYYY',\n autofocus: true,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'WithCalendarOptions',\n args: {\n label: 'Date with Calendar Options',\n description: 'Calendar with additional options',\n dateFormat: 'DD/MM/YYYY',\n firstDayOfWeek: 1,\n numberOfCalendars: 1,\n showWeekNumbers: true,\n showActions: true,\n shortcuts: [\n {\n label: 'Today',\n singleValue: dayjs().format('DD/MM/YYYY'),\n },\n {\n label: 'Last week',\n singleValue: dayjs().subtract(7, 'days').format('DD/MM/YYYY'),\n },\n ],\n shortcutsPlacement: 'bottom',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'WithShortcutsBottom',\n args: {\n label: 'Date with Bottom Shortcuts',\n description: 'Calendar with shortcuts at the bottom',\n dateFormat: 'DD/MM/YYYY',\n showActions: true,\n shortcuts: [\n {\n label: 'Today',\n singleValue: dayjs().format('DD/MM/YYYY'),\n },\n {\n label: 'Yesterday',\n singleValue: dayjs().subtract(1, 'day').format('DD/MM/YYYY'),\n },\n {\n label: 'Last Week',\n singleValue: dayjs().subtract(7, 'days').format('DD/MM/YYYY'),\n },\n ],\n shortcutsPlacement: 'bottom',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'WithShortcutsRight',\n args: {\n label: 'Date with Right Shortcuts',\n description: 'Calendar with shortcuts on the right',\n dateFormat: 'DD/MM/YYYY',\n showActions: true,\n shortcuts: [\n {\n label: 'Start of Month',\n singleValue: dayjs().startOf('month').format('DD/MM/YYYY'),\n },\n {\n label: 'End of Month',\n singleValue: dayjs().endOf('month').format('DD/MM/YYYY'),\n },\n ],\n shortcutsPlacement: 'right',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'WithDisabledDates',\n args: {\n label: 'Date with Disabled Dates',\n description: 'Calendar with specific dates disabled',\n dateFormat: 'DD/MM/YYYY',\n disabledDates: [\n dayjs().add(1, 'day').format('DD/MM/YYYY'),\n dayjs().add(3, 'day').format('DD/MM/YYYY'),\n dayjs().add(5, 'day').format('DD/MM/YYYY'),\n ],\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'MultipleCalendars',\n args: {\n label: 'Multiple Calendars',\n description: 'Display multiple calendars side by side',\n dateFormat: 'DD/MM/YYYY',\n numberOfCalendars: 3,\n showWeekNumbers: true,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'WithInitialValue',\n args: {\n label: 'Pre-selected Date',\n description: 'Calendar with an initial value',\n dateFormat: 'DD/MM/YYYY',\n value: dayjs().format('DD/MM/YYYY'),\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'WithMinMax',\n args: {\n label: 'Date with Min/Max',\n description: 'Select a date within range',\n dateFormat: 'YYYY-MM-DD',\n min: '2025-02-05',\n max: '2025-02-20',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'CulturalVariants',\n args: {\n numberOfCalendars: 1,\n firstDayOfWeek: 1,\n showWeekNumbers: true,\n },\n template: (\n <div class=\"flex flex-wrap gap-4\">\n <nv-fielddate\n label=\"Date (en-BE)\"\n locale=\"en-BE\"\n dateFormat=\"YYYY-MM-DD\"\n data-storybook-args\n />\n <nv-fielddate\n label=\"Date (fr-BE)\"\n locale=\"fr-BE\"\n dateFormat=\"DD/MM/YYYY\"\n data-storybook-args\n />\n <nv-fielddate\n label=\"Date (de-DE)\"\n locale=\"de-DE\"\n dateFormat=\"DD.MM.YYYY\"\n data-storybook-args\n />\n </div>\n ),\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.label),\n args: {\n label: 'Textfield Label',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.description),\n args: {\n label: 'Textfield Description',\n description: 'Description will show here',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.placeholder),\n args: {\n label: 'Textfield Placeholder',\n placeholder: 'Type something...',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.name),\n args: {\n label: 'Textfield Name',\n name: 'name',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.value),\n args: {\n label: 'Textfield Value',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n\n {\n name: nameof<Components.NvFieldtext>(x => x.disabled),\n args: {\n label: 'Textfield Disabled',\n disabled: true,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.readonly),\n args: {\n label: 'Textfield Readonly',\n readonly: true,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.required),\n args: {\n label: 'Textfield Required',\n required: true,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.error),\n args: {\n label: 'Textfield Error',\n error: true,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.errorDescription),\n args: {\n label: 'Textfield Error Description',\n description: 'Make sure to be valid.',\n error: true,\n errorDescription: 'This input has an error.',\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.success),\n args: {\n label: 'Textfield Success',\n success: true,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: nameof<Components.NvFielddate>(x => x.fluid),\n args: {\n label: 'Fluid',\n fluid: true,\n },\n template: <nv-fielddate data-storybook-args></nv-fielddate>,\n },\n {\n name: 'leadingInputSlot',\n description:\n 'Content to be placed before the input text, within the input container.',\n args: {\n label: 'Leading Input',\n },\n template: (\n <nv-fielddate data-storybook-args>\n <nv-badge slot=\"leading-input\" label=\"test\" dismissible></nv-badge>\n </nv-fielddate>\n ),\n },\n {\n name: 'labelSlot',\n description:\n 'Content to be placed as the label, will override the label prop.',\n args: {\n label: 'Original Label',\n },\n template: (\n <nv-fielddate data-storybook-args>\n <span slot=\"label\">Label Slot</span>\n </nv-fielddate>\n ),\n },\n {\n name: 'descriptionSlot',\n description:\n 'Content to be placed as the description, will override the description prop.',\n args: {\n label: 'Description Slot',\n description: 'Original description',\n },\n template: (\n <nv-fielddate data-storybook-args>\n <span slot=\"description\">Custom Description</span>\n </nv-fielddate>\n ),\n },\n {\n name: 'errorDescriptionSlot',\n description:\n 'Content to be placed as the error description, will override the errorDescription prop.',\n args: {\n label: 'Error Description Slot',\n errorDescription: 'Original error description',\n error: true,\n },\n template: (\n <nv-fielddate data-storybook-args>\n <span slot=\"error-description\">Custom Error Description</span>\n </nv-fielddate>\n ),\n },\n {\n name: 'beforeInputSlot',\n description:\n 'Content to be placed before the input text, outside the input container.',\n args: {\n label: 'Before Input Slot',\n description: 'Description will show here',\n },\n template: (\n <nv-fielddate data-storybook-args>\n <nv-button slot=\"before-input\">Before Input Slot</nv-button>\n </nv-fielddate>\n ),\n },\n {\n name: 'afterInputSlot',\n description:\n 'Content to be placed after the input text, outside the input container.',\n args: {\n label: 'After Input Slot',\n description: 'Description will show here',\n },\n template: (\n <nv-fielddate data-storybook-args>\n <nv-button slot=\"after-input\">After Input Slot</nv-button>\n </nv-fielddate>\n ),\n },\n\n ...formatStories,\n ],\n};\n\nexport default NvFielddateDocs;\n"]}

package/dist/collection/components/nv-fielddate/nv-fielddate.js CHANGED Viewed

@@ -95,18 +95,9 @@ export class NvFielddate {
          */
         this.showActions = false;
         /**
-         * Custom actions to display in the footer
-         * JSON array of objects with the following properties:
-         * - label: string
-         * - onClick: function
-         * @default '[]'
+         * Allows the field to stretch and fill the entire width of its container.
          */
-        this.shortcuts = '[]';
-        /**
-         * Disabled dates ISO string array
-         * @default '[]'
-         */
-        this.disabledDates = '[]';
+        this.fluid = false;
         /**
          * Closes the popover when a click is detected outside the component.
          * @param {MouseEvent} event - The click event.
@@ -260,12 +251,12 @@ export class NvFielddate {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '817d7baa3525b53962f9afe3d1eb56d7fcbcaf0e' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (h("label", { key: '00faded19c22c4883b7ef4de71d90c13c287d60d', htmlFor: this.inputId }, h("slot", { key: '48b7e470d654b9f07c3eba400145b8936c9eb27e', name: "label" }, this.label))), h("nv-popover", { key: '5b8e57124c0a08097874ac9ad0280908c3f2e330', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '902097ce5a7f208ac97f72a847d68b80cd16419a', slot: "trigger", class: "input-wrapper" }, h("slot", { key: '909ff8453e9e48516582c64dae0762987cbd5986', name: "before-input" }), h("div", { key: 'e62714e613e9bffc5a6a302d72cdfea75555756a', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '9d4e6bd15fe09bee974676032d4b75a73f733674', name: "leading-input" }), h("input", { key: '4565589e720150706096cbdeeadefb84ee836c39', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus }), h("nv-iconbutton", { key: '115ba5c4e9bbd502c51d04894a5cf88f98167231', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
+        return (h(Host, { key: 'e59d967d20d9f1ab584058795f30a52e50ec2933' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (h("label", { key: 'e159c6731265e73b436093b1aceaf354451245c9', htmlFor: this.inputId }, h("slot", { key: '9fc823ee41ec9fc7c8f9a42021277b4729ff0544', name: "label" }, this.label))), h("nv-popover", { key: 'cd0e133d5c62b00d4ade7a08184942e0bacc54fe', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '66b96d21779fd6a8f335af3d2d2bc4df117516d8', slot: "trigger", class: "input-wrapper" }, h("slot", { key: 'e2c0e7c249cc4b213afc858281db0a84ab9c4827', name: "before-input" }), h("div", { key: '585283bf8880c4d8be911167d27abe34c2f4e21f', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '9c15ffe741369e54fca3a8aeb844e4fbcc93fd5d', name: "leading-input" }), h("input", { key: 'bca0e7c19b1081a2849a2a36843628c6f65a4eb2', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (h("nv-icon", { key: 'd610fdea33086a737ef99ab4e4ed69f09dd40045', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'cce665f259ef8134cc8737f8077c05915b4f7dcc', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: 'd27bcd437f35f5445fb9994fd7283c2339bc7ea8', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
             ,
-            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '3df2883ebe71fa1dd437f5dc62d82019b3550b88', name: "after-input" })), h("div", { key: '61241669d9599d23f2cf024d8e65becdafe58847', slot: "content" }, h("nv-calendar", { key: 'dd3c67a46e8addbf1017eaf578447a09a3dd9e66', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'f835c89363c45529512e156b313cb35f71ef5264', class: "description" }, h("slot", { key: '738d49ee6e525310375eba5da057573104d3c2ed', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '7c5c07db1af3423efc9a1b1127c1b3cbdede0a28', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: 'ccfd311cbbb56b9b336317d0e543fc57676a60d3' })));
+            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '7708b24f9f569094b6f4f850413edd46e210b7e8', name: "after-input" })), h("div", { key: '194a99a83c9978691130d17e981c61be742315cf', slot: "content" }, h("nv-calendar", { key: '4dc6b2afb3890c5bfb08f070f5b5daac07a76929', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '623af8e048bfb7aef8919fa64a0f1baf04608b69', class: "description" }, h("slot", { key: 'cd3eecb2488e19ba1faf139ab4546e6db10468d2', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'eafcfc3c9bb584c78d7f8d6437bbfab269fdaca9', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: '4b5c23e00f8edb7c0d0d40a5ae89bbb322190c5d' })));
     }
     static get is() { return "nv-fielddate"; }
     static get originalStyleUrls() {
@@ -720,27 +711,26 @@ export class NvFielddate {
                 "defaultValue": "false"
             },
             "shortcuts": {
-                "type": "string",
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "HTMLNvCalendarElement['shortcuts']",
+                    "resolved": "{ label: string; singleValue?: string; rangeValue?: { start: string; end: string; }; }[]",
+                    "references": {
+                        "HTMLNvCalendarElement": {
+                            "location": "global",
+                            "id": "global::HTMLNvCalendarElement"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "'[]'"
-                        }],
-                    "text": "Custom actions to display in the footer\nJSON array of objects with the following properties:\n- label: string\n- onClick: function"
+                    "tags": [],
+                    "text": "Custom actions to display in the footer"
                 },
                 "getter": false,
-                "setter": false,
-                "attribute": "shortcuts",
-                "reflect": true,
-                "defaultValue": "'[]'"
+                "setter": false
             },
             "showWeekNumbers": {
                 "type": "boolean",
@@ -765,27 +755,46 @@ export class NvFielddate {
                 "reflect": true
             },
             "disabledDates": {
-                "type": "string",
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "Array<string>",
+                    "resolved": "string[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "'[]'"
-                        }],
+                    "tags": [],
                     "text": "Disabled dates ISO string array"
                 },
                 "getter": false,
+                "setter": false
+            },
+            "fluid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the field to stretch and fill the entire width of its container."
+                },
+                "getter": false,
                 "setter": false,
-                "attribute": "disabled-dates",
+                "attribute": "fluid",
                 "reflect": true,
-                "defaultValue": "'[]'"
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/nv-fielddate/nv-fielddate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fielddate.js","sourceRoot":"","sources":["../../../src/components/nv-fielddate/nv-fielddate.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n Listen,\n Host,\n Watch,\n} from '@stencil/core';\nimport Inputmask from 'inputmask';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n @slot default - Child content of the component.\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@Component({\n tag: 'nv-fielddate',\n styleUrl: 'styles/nv-fielddate.scss',\n shadow: false,\n})\nexport class NvFielddate {\n @Element() el: HTMLNvFielddateElement;\n private inputElement!: HTMLInputElement;\n\n private popoverElement!: HTMLNvPopoverElement;\n private popoverId: string = uuidv4();\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 /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Text displayed as label. A slot label can override this prop.\n /\n @Prop({ reflect: true })\n readonly label: string;\n\n /\n Description displayed below the input. A slot description can override this prop.\n /\n @Prop({ reflect: true })\n readonly description: string;\n\n /\n Placeholder for the input field.\n /\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /\n Name attribute for the input.\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n Disables the input field.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Sets the input field as read-only.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the input field as required.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Indicates an error state.\n /\n @Prop({ reflect: true })\n readonly error: boolean = false;\n\n /\n Error description. A slot error-description can override this prop.\n /\n @Prop({ reflect: true })\n readonly errorDescription?: string;\n\n /\n Indicates a success state.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n Autofocus the input when the component is mounted.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n /\n The initial value of the input (date in string format).\n /\n @Prop({ reflect: true })\n readonly value: string = '';\n\n /\n The current value of the input date in string format.\n /\n @State()\n singleValue: string = '';\n\n /\n Controls the opening of the popover.\n /\n @State()\n open: boolean = false;\n\n /\n First day of the week 0 = Sunday, 1 = Monday, etc.\n * @default 1\n /\n @Prop({ reflect: true })\n readonly firstDayOfWeek: number = 1;\n\n /\n Number of calendars to display\n * @default 1\n /\n @Prop({ reflect: true })\n readonly numberOfCalendars: number = 1;\n\n /\n Minimum date for selection ISO string format, ex: 2025-01-01\n /\n @Prop({ reflect: true })\n readonly min?: string = '';\n\n /\n Maximum date for selection ISO string format, ex: 2025-12-31\n /\n @Prop({ reflect: true })\n readonly max?: string = '';\n\n /* Locale for date formatting\n * @default 'en-BE'\n /\n @Prop({ reflect: true })\n readonly locale: string = 'en-BE';\n\n /* Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc.\n * @default 'YYYY-MM-DD'\n * @note If the date format is in UTC mode, the date will be displayed in UTC time.\n * @note If the date format is not in UTC mode, the date will be displayed in the local time.\n /\n @Prop({ reflect: true })\n readonly dateFormat: string = 'YYYY-MM-DD';\n\n /\n Footer placement\n * @default 'bottom'\n /\n @Prop({ reflect: true })\n readonly shortcutsPlacement: 'bottom' \| 'left' \| 'right' = 'bottom';\n\n /\n Show action buttons\n * @default false\n /\n @Prop({ reflect: true })\n readonly showActions: boolean = false;\n\n /\n Custom actions to display in the footer\n * JSON array of objects with the following properties:\n * - label: string\n * - onClick: function\n * @default '[]'\n /\n @Prop({ reflect: true })\n readonly shortcuts: string = '[]';\n\n /\n Show week numbers\n * @default true\n /\n @Prop({ reflect: true })\n readonly showWeekNumbers: boolean;\n\n /\n Disabled dates ISO string array\n * @default '[]'\n /\n @Prop({ reflect: true })\n readonly disabledDates: string = '[]';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Converts the nv-calendar date format to the format expected by Inputmask.\n * @param {string} format - The date format.\n * @returns {string} Format adapted for Inputmask.\n /\n private convertToInputmaskFormat(format: string): string {\n switch (format) {\n case 'DD/MM/YYYY':\n return 'dd/mm/yyyy';\n case 'MM/DD/YYYY':\n return 'mm/dd/yyyy';\n case 'YYYY-MM-DD':\n return 'yyyy-mm-dd';\n case 'DD.MM.YYYY':\n return 'dd.mm.yyyy';\n case 'YYYYMMDD':\n return 'yyyymmdd';\n default:\n return format;\n }\n }\n\n /\n Closes the popover when a click is detected outside the component.\n * @param {MouseEvent} event - The click event.\n /\n private handleClickOutside = (event: MouseEvent) => {\n if (this.open && this.el && !this.el.contains(event.target as Node)) {\n this.open = false;\n }\n };\n\n /\n Focuses the input when the input container is clicked.\n * @param {MouseEvent} event - The click event.\n /\n private handleInputContainerClick = (event: MouseEvent) => {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.inputElement.focus();\n // Select the first characters based on the date format\n const format = this.dateFormat;\n if (format.startsWith('DD')) {\n this.inputElement.setSelectionRange(0, 2);\n } else if (format.startsWith('MM')) {\n this.inputElement.setSelectionRange(0, 2);\n } else if (format.startsWith('YYYY')) {\n this.inputElement.setSelectionRange(0, 4);\n }\n };\n\n /\n Handles the input event on the input element.\n * Updates the singleValue and emits the dateChange event.\n * @param {Event} event - The input event.\n /\n private handleInput = (event: Event) => {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n const input = event.target as HTMLInputElement;\n this.singleValue = input.value;\n this.dateChange.emit({ value: input.value });\n };\n\n /\n Toggles the opening/closing of the popover.\n /\n private toggleCalendar = () => {\n if (this.readonly \|\| this.disabled) {\n return;\n }\n this.open = !this.open;\n };\n\n /\n Handles focus events on the input element.\n * @param {FocusEvent} event - The focus event.\n /\n private handleFocus = (event: FocusEvent) => {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n (event.target as HTMLElement).blur();\n return;\n }\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n connectedCallback() {\n document.addEventListener('click', this.handleClickOutside);\n }\n\n componentWillLoad() {\n if (this.value) {\n this.singleValue = this.value;\n }\n }\n\n componentDidLoad() {\n const inputs = this.el.querySelectorAll('.input-wrapper input');\n inputs.forEach((input: HTMLInputElement) => {\n Inputmask({\n alias: 'datetime',\n inputFormat: this.convertToInputmaskFormat(this.dateFormat),\n placeholder: '_'.repeat(this.dateFormat.length),\n }).mask(input);\n });\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleClickOutside);\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region EVENTS\n\n /\n * Emits an event when the date changes.\n /\n @Event()\n dateChange: EventEmitter<{\n /\n The date value.\n /\n value: string;\n }>;\n\n /\n Handles the single date selection event from nv-calendar.\n * Updates the input value and closes the popover.\n * @param {CustomEvent} event - The event from nv-calendar.\n /\n @Listen('singleDateChange')\n handleSingleDateChange(event: CustomEvent) {\n const value: string = event.detail;\n this.singleValue = value;\n this.dateChange.emit({ value });\n if (!this.showActions) {\n this.open = false;\n }\n }\n\n @Listen('closePopover')\n handleClosePopover() {\n this.open = false;\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\n event.preventDefault();\n return;\n }\n return;\n }\n\n // Verify if the popover element is defined\n if (!this.popoverElement) {\n console.warn('nv-fielddate -> Popover element is not defined');\n return;\n }\n }\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.singleValue = newValue;\n }\n\n //#endregion EVENTS\n /***************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host>\n {((this.label && this.label.length > 0) \|\|\n 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 id={this.popoverId}\n triggerMode=\"controlled\"\n placement=\"bottom-start\"\n open={this.open}\n >\n <div slot=\"trigger\" class=\"input-wrapper\">\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 <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n autofocus={this.autofocus}\n value={this.singleValue}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n />\n\n <nv-iconbutton\n class=\"toggle-calendar-icon\"\n name=\"calendar\" //{this.open ? 'chevron-top' : 'chevron-down'}\n size=\"md\"\n emphasis=\"lower\"\n aria-label={this.open ? 'Hide calendar' : 'Show calendar'}\n aria-pressed={this.open.toString()}\n onClick={this.toggleCalendar}\n tabIndex={this.disabled ? -1 : 0}\n />\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n <div slot=\"content\">\n <nv-calendar\n dateFormat={this.dateFormat}\n singleValue={this.singleValue}\n firstDayOfWeek={this.firstDayOfWeek}\n numberOfCalendars={this.numberOfCalendars}\n min={this.min}\n max={this.max}\n locale={this.locale}\n shortcutsPlacement={this.shortcutsPlacement}\n showActions={this.showActions}\n shortcuts={this.shortcuts}\n showWeekNumbers={this.showWeekNumbers}\n disabledDates={this.disabledDates}\n ></nv-calendar>\n </div>\n </nv-popover>\n\n {((this.description && this.description.length > 0) \|\|\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 {this.el.querySelector('[slot=\"error-description\"]') ? (\n <slot name=\"error-description\"></slot>\n ) : (\n this.errorDescription\n )}\n </div>\n )}\n\n <slot></slot>\n </Host>\n );\n }\n //#endregion RENDER\n}\n"]}
1	+ {"version":3,"file":"nv-fielddate.js","sourceRoot":"","sources":["../../../src/components/nv-fielddate/nv-fielddate.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n Listen,\n Host,\n Watch,\n} from '@stencil/core';\nimport Inputmask from 'inputmask';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n @slot default - Child content of the component.\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@Component({\n tag: 'nv-fielddate',\n styleUrl: 'styles/nv-fielddate.scss',\n shadow: false,\n})\nexport class NvFielddate {\n @Element() el: HTMLNvFielddateElement;\n private inputElement!: HTMLInputElement;\n\n private popoverElement!: HTMLNvPopoverElement;\n private popoverId: string = uuidv4();\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 /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Text displayed as label. A slot label can override this prop.\n /\n @Prop({ reflect: true })\n readonly label: string;\n\n /\n Description displayed below the input. A slot description can override this prop.\n /\n @Prop({ reflect: true })\n readonly description: string;\n\n /\n Placeholder for the input field.\n /\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /\n Name attribute for the input.\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n Disables the input field.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Sets the input field as read-only.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the input field as required.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Indicates an error state.\n /\n @Prop({ reflect: true })\n readonly error: boolean = false;\n\n /\n Error description. A slot error-description can override this prop.\n /\n @Prop({ reflect: true })\n readonly errorDescription?: string;\n\n /\n Indicates a success state.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n Autofocus the input when the component is mounted.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n /\n The initial value of the input (date in string format).\n /\n @Prop({ reflect: true })\n readonly value: string = '';\n\n /\n The current value of the input date in string format.\n /\n @State()\n singleValue: string = '';\n\n /\n Controls the opening of the popover.\n /\n @State()\n open: boolean = false;\n\n /\n First day of the week 0 = Sunday, 1 = Monday, etc.\n * @default 1\n /\n @Prop({ reflect: true })\n readonly firstDayOfWeek: number = 1;\n\n /\n Number of calendars to display\n * @default 1\n /\n @Prop({ reflect: true })\n readonly numberOfCalendars: number = 1;\n\n /\n Minimum date for selection ISO string format, ex: 2025-01-01\n /\n @Prop({ reflect: true })\n readonly min?: string = '';\n\n /\n Maximum date for selection ISO string format, ex: 2025-12-31\n /\n @Prop({ reflect: true })\n readonly max?: string = '';\n\n /* Locale for date formatting\n * @default 'en-BE'\n /\n @Prop({ reflect: true })\n readonly locale: string = 'en-BE';\n\n /* Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc.\n * @default 'YYYY-MM-DD'\n * @note If the date format is in UTC mode, the date will be displayed in UTC time.\n * @note If the date format is not in UTC mode, the date will be displayed in the local time.\n /\n @Prop({ reflect: true })\n readonly dateFormat: string = 'YYYY-MM-DD';\n\n /\n Footer placement\n * @default 'bottom'\n /\n @Prop({ reflect: true })\n readonly shortcutsPlacement: 'bottom' \| 'left' \| 'right' = 'bottom';\n\n /\n Show action buttons\n * @default false\n /\n @Prop({ reflect: true })\n readonly showActions: boolean = false;\n\n /\n Custom actions to display in the footer\n /\n @Prop({ reflect: true })\n readonly shortcuts: HTMLNvCalendarElement['shortcuts'];\n\n /\n Show week numbers\n * @default true\n /\n @Prop({ reflect: true })\n readonly showWeekNumbers: boolean;\n\n /\n Disabled dates ISO string array\n /\n @Prop({ reflect: true })\n readonly disabledDates: Array<string>;\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 METHODS\n\n /\n * Converts the nv-calendar date format to the format expected by Inputmask.\n * @param {string} format - The date format.\n * @returns {string} Format adapted for Inputmask.\n /\n private convertToInputmaskFormat(format: string): string {\n switch (format) {\n case 'DD/MM/YYYY':\n return 'dd/mm/yyyy';\n case 'MM/DD/YYYY':\n return 'mm/dd/yyyy';\n case 'YYYY-MM-DD':\n return 'yyyy-mm-dd';\n case 'DD.MM.YYYY':\n return 'dd.mm.yyyy';\n case 'YYYYMMDD':\n return 'yyyymmdd';\n default:\n return format;\n }\n }\n\n /\n Closes the popover when a click is detected outside the component.\n * @param {MouseEvent} event - The click event.\n /\n private handleClickOutside = (event: MouseEvent) => {\n if (this.open && this.el && !this.el.contains(event.target as Node)) {\n this.open = false;\n }\n };\n\n /\n Focuses the input when the input container is clicked.\n * @param {MouseEvent} event - The click event.\n /\n private handleInputContainerClick = (event: MouseEvent) => {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.inputElement.focus();\n // Select the first characters based on the date format\n const format = this.dateFormat;\n if (format.startsWith('DD')) {\n this.inputElement.setSelectionRange(0, 2);\n } else if (format.startsWith('MM')) {\n this.inputElement.setSelectionRange(0, 2);\n } else if (format.startsWith('YYYY')) {\n this.inputElement.setSelectionRange(0, 4);\n }\n };\n\n /\n Handles the input event on the input element.\n * Updates the singleValue and emits the dateChange event.\n * @param {Event} event - The input event.\n /\n private handleInput = (event: Event) => {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n const input = event.target as HTMLInputElement;\n this.singleValue = input.value;\n this.dateChange.emit({ value: input.value });\n };\n\n /\n Toggles the opening/closing of the popover.\n /\n private toggleCalendar = () => {\n if (this.readonly \|\| this.disabled) {\n return;\n }\n this.open = !this.open;\n };\n\n /\n Handles focus events on the input element.\n * @param {FocusEvent} event - The focus event.\n /\n private handleFocus = (event: FocusEvent) => {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n (event.target as HTMLElement).blur();\n return;\n }\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n connectedCallback() {\n document.addEventListener('click', this.handleClickOutside);\n }\n\n componentWillLoad() {\n if (this.value) {\n this.singleValue = this.value;\n }\n }\n\n componentDidLoad() {\n const inputs = this.el.querySelectorAll('.input-wrapper input');\n inputs.forEach((input: HTMLInputElement) => {\n Inputmask({\n alias: 'datetime',\n inputFormat: this.convertToInputmaskFormat(this.dateFormat),\n placeholder: '_'.repeat(this.dateFormat.length),\n }).mask(input);\n });\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleClickOutside);\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region EVENTS\n\n /\n * Emits an event when the date changes.\n /\n @Event()\n dateChange: EventEmitter<{\n /\n The date value.\n /\n value: string;\n }>;\n\n /\n Handles the single date selection event from nv-calendar.\n * Updates the input value and closes the popover.\n * @param {CustomEvent} event - The event from nv-calendar.\n /\n @Listen('singleDateChange')\n handleSingleDateChange(event: CustomEvent) {\n const value: string = event.detail;\n this.singleValue = value;\n this.dateChange.emit({ value });\n if (!this.showActions) {\n this.open = false;\n }\n }\n\n @Listen('closePopover')\n handleClosePopover() {\n this.open = false;\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\n event.preventDefault();\n return;\n }\n return;\n }\n\n // Verify if the popover element is defined\n if (!this.popoverElement) {\n console.warn('nv-fielddate -> Popover element is not defined');\n return;\n }\n }\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.singleValue = newValue;\n }\n\n //#endregion EVENTS\n /***************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host>\n {((this.label && this.label.length > 0) \|\|\n 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 id={this.popoverId}\n triggerMode=\"controlled\"\n placement=\"bottom-start\"\n open={this.open}\n >\n <div slot=\"trigger\" class=\"input-wrapper\">\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 <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n autofocus={this.autofocus}\n value={this.singleValue}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n data-scope=\"date\"\n />\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\n <nv-iconbutton\n class=\"toggle-calendar-icon\"\n name=\"calendar\" //{this.open ? 'chevron-top' : 'chevron-down'}\n size=\"md\"\n emphasis=\"lower\"\n aria-label={this.open ? 'Hide calendar' : 'Show calendar'}\n aria-pressed={this.open.toString()}\n onClick={this.toggleCalendar}\n tabIndex={this.disabled ? -1 : 0}\n />\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n <div slot=\"content\">\n <nv-calendar\n dateFormat={this.dateFormat}\n singleValue={this.singleValue}\n firstDayOfWeek={this.firstDayOfWeek}\n numberOfCalendars={this.numberOfCalendars}\n min={this.min}\n max={this.max}\n locale={this.locale}\n shortcutsPlacement={this.shortcutsPlacement}\n showActions={this.showActions}\n shortcuts={this.shortcuts}\n showWeekNumbers={this.showWeekNumbers}\n disabledDates={this.disabledDates}\n ></nv-calendar>\n </div>\n </nv-popover>\n\n {((this.description && this.description.length > 0) \|\|\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 {this.el.querySelector('[slot=\"error-description\"]') ? (\n <slot name=\"error-description\"></slot>\n ) : (\n this.errorDescription\n )}\n </div>\n )}\n\n <slot></slot>\n </Host>\n );\n }\n //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-fielddate/styles/nv-fielddate.css CHANGED Viewed

@@ -11,6 +11,10 @@ nv-fielddate {
   align-items: flex-start;
   gap: var(--form-gap-y);
   box-sizing: border-box;
+  max-width: 480px;
+}
+nv-fielddate[fluid]:not([fluid=false]) {
+  max-width: unset;
 }
 nv-fielddate[readonly]:not([readonly=false]) {
   --nv-field-border-default: var(--components-form-field-border-readonly);
@@ -26,7 +30,7 @@ nv-fielddate[error]:not([error=false]) {
   --nv-field-border-focus: var(--nv-field-border-default);
   --nv-field-border-disabled: var(--nv-field-border-default);
   --nv-field-border-readonly: var(--nv-field-border-default);
-  --nv-field-focus-box-shadow: var(--color-focus-destructive);
+  --nv-field-focus-box-shadow: var(--color-focus-destructive-in-field);
 }
 nv-fielddate[success]:not([success=false]) {
   --nv-field-border-default: var(--components-form-field-border-success);
@@ -67,6 +71,9 @@ nv-fielddate nv-popover [slot=content] {
   display: block;
   width: 100%;
 }
+nv-fielddate nv-popover .datepicker-container {
+  border: none;
+}
 nv-fielddate .input-wrapper {
   display: flex;
   flex-wrap: wrap;
@@ -147,7 +154,10 @@ nv-fielddate .input-wrapper .input-container nv-icon.validation {
   color: var(--nv-field-border-default);
 }
 nv-fielddate .description {
+  display: flex;
+  align-items: center;
   align-self: stretch;
+  gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
   font-family: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);
@@ -155,7 +165,10 @@ nv-fielddate .description {
   line-height: var(--form-description-line-height);
 }
 nv-fielddate .error-description {
+  display: flex;
+  align-items: center;
   align-self: stretch;
+  gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
   font-family: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);