npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.12.0 → 3.14.0-beta.0 - Mend

@nova-design-system/nova-webcomponents 3.12.0 → 3.14.0-beta.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 (445) hide show

package/dist/cjs/nv-datagrid.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c56424e5.js');
 const dom_utils = require('./dom.utils-4d43f69a.js');
-const constants = require('./constants-aac59496.js');
+const constants = require('./constants-f5633903.js');
 /**
    * table-core

package/dist/cjs/nv-dialog.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c56424e5.js');
 const events_utils = require('./events.utils-52846a7d.js');
 const clsx = require('./clsx-fc789adc.js');
-const constants = require('./constants-aac59496.js');
+const constants = require('./constants-f5633903.js');
 const v4 = require('./v4-7014b8b0.js');
 /*!

package/dist/cjs/nv-dialogfooter_2.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c56424e5.js');
-const constants = require('./constants-aac59496.js');
+const constants = require('./constants-f5633903.js');
 const nvDialogfooterCss = "nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";
 const NvDialogfooterStyle0 = nvDialogfooterCss;
@@ -52,10 +52,6 @@ const NvDialogfooter = class {
          * Sets the label for the primary button.
          */
         this.primaryLabel = 'Primary';
-        /**
-         * Sets the type of the primary button.
-         */
-        this.primaryButtonType = constants.ButtonType.Button;
         //#endregion EVENTS
         /****************************************************************************/
         //#region METHODS
@@ -86,11 +82,18 @@ const NvDialogfooter = class {
                 !node.hasAttribute('slot'));
         });
     }
+    componentDidLoad() {
+        // Set the default button type based on the form property
+        this.primaryButtonType =
+            this.primaryButtonType || this.form
+                ? constants.ButtonType.Submit
+                : constants.ButtonType.Button;
+    }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '313836d5d0bc1704325aa200f0ed115bf3e63e7d' }, !this.hasSlot ? (index.h(index.Fragment, null, !this.undismissable && (index.h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (index.h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (index.h("slot", null))));
+        return (index.h(index.Host, { key: '0868c3af73f89219eee7c006b4ddca47c6da29b0' }, !this.hasSlot ? (index.h(index.Fragment, null, !this.undismissable && (index.h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (index.h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (index.h("slot", null))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-dialogfooter_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-dialogfooter.nv-dialogheader.entry.cjs.js","mappings":"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","names":["ButtonType","h","Host","Fragment"],"sources":["src/components/nv-dialogfooter/nv-dialogfooter.scss?tag=nv-dialogfooter","src/components/nv-dialogfooter/nv-dialogfooter.tsx","src/components/nv-dialogheader/nv-dialogheader.scss?tag=nv-dialogheader","src/components/nv-dialogheader/nv-dialogheader.tsx"],"sourcesContent":["nv-dialogfooter {\n display: flex;\n padding: var(--dialog-footer-padding-top) var(--dialog-footer-padding-x)\n var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);\n\n justify-content: flex-end;\n align-items: flex-end;\n gap: var(--dialog-footer-gap-y);\n align-self: stretch;\n}\n","import {\n AttachInternals,\n Component,\n h,\n Host,\n Prop,\n Event,\n EventEmitter,\n Fragment,\n Element,\n} from '@stencil/core';\nimport { ButtonType } from '../../utils/constants';\n\n/*\n @slot default - Custom content for the dialog footer. When provided, the default buttons will not be rendered.\n /\n@Component({\n tag: 'nv-dialogfooter',\n styleUrl: 'nv-dialogfooter.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvDialogfooter {\n @AttachInternals() internals: ElementInternals;\n @Element() el: HTMLNvDialogfooterElement;\n private hasSlot = false;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Disables the primary button, preventing user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Controls the visibility of the cancel button. When true, the cancel button is\n * hidden.\n /\n @Prop({ reflect: true })\n readonly undismissable: boolean = false;\n\n /\n Sets the leading icon for the primary button.\n /\n @Prop({ reflect: true })\n readonly leadingIcon: string = '';\n\n /\n Sets the trailing icon for the primary button.\n /\n @Prop({ reflect: true })\n readonly trailingIcon: string = '';\n\n /\n Sets the danger state for the primary button.\n /\n @Prop({ reflect: true })\n readonly danger: boolean = false;\n\n /\n Sets the label for the cancel button.\n /\n @Prop({ reflect: true })\n readonly cancelLabel: string = 'Cancel';\n\n /\n Sets the label for the primary button.\n /\n @Prop({ reflect: true })\n readonly primaryLabel: string = 'Primary';\n\n /\n Sets the type of the primary button.\n /\n @Prop({ reflect: true })\n readonly primaryButtonType: `${ButtonType}` = ButtonType.Button;\n\n /\n Sets the form for the dialog footer.\n /\n @Prop({ reflect: true })\n readonly form: string;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the cancel button is clicked. This will close the dialog.\n /\n @Event()\n dialogCanceled: EventEmitter<void>;\n\n /\n Emitted when the primary button is clicked. This allows to handle the primary action and potential data capture before closing the dialog.\n /\n @Event()\n dialogPrimaryClicked: EventEmitter<void>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the primary action when the primary button is clicked.\n * @param {Event} event - The click event.\n /\n\n private handlePrimary = (event: Event) => {\n event.stopPropagation();\n this.dialogPrimaryClicked.emit();\n };\n\n /\n Handles the cancel action when the cancel button is clicked. This will close the dialog.\n * @param {Event} event - The click event.\n /\n private handleCancel = (event: Event) => {\n event.stopPropagation();\n this.dialogCanceled.emit();\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n // Check if there are any child elements that don't have a slot attribute\n this.hasSlot = Array.from(this.el.childNodes).some(node => {\n return (\n node.nodeType === Node.ELEMENT_NODE &&\n !(node as Element).hasAttribute('slot')\n );\n });\n }\n\n //#endregion LIFECYCLE\n /*************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {!this.hasSlot ? (\n <Fragment>\n {!this.undismissable && (\n <nv-button onClick={this.handleCancel} emphasis=\"low\" size=\"sm\">\n {this.cancelLabel}\n </nv-button>\n )}\n <nv-button\n onClick={this.handlePrimary}\n disabled={this.disabled}\n danger={this.danger}\n size=\"sm\"\n emphasis=\"high\"\n form={this.form}\n type={this.primaryButtonType}\n >\n {this.leadingIcon && (\n <nv-icon\n slot=\"leading-icon\"\n name={this.leadingIcon}\n size=\"sm\"\n />\n )}\n {this.primaryLabel}\n {this.trailingIcon && (\n <nv-icon\n slot=\"trailing-icon\"\n name={this.trailingIcon}\n size=\"sm\"\n />\n )}\n </nv-button>\n </Fragment>\n ) : (\n <slot></slot>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n","nv-dialogheader {\n // calc(var(--dialog-header-padding-x, 24px) + var(--dialog-dismissible-position-right, 12px) + var(--button-sm-icon-size, 16px) + var(--button-sm-icon-button-padding, 8px))\n padding: var(--dialog-header-padding-top)\n var(--dialog-header-padding-x)\n var(--dialog-header-padding-bottom)\n var(--dialog-header-padding-x);\n justify-content: space-between;\n align-items: flex-start;\n align-self: stretch;\n\n .heading {\n color: var(--color-content-high-text);\n\n\n / heading/xs/medium /\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--font-size-lg);\n font-style: normal;\n font-weight: 500;\n padding-right: var(--spacing-7);\n line-height: var(--leading-px-6); / 133.333% /\n letter-spacing: var(--letter-spacing-heading-xs);\n }\n\n .subheading {\n color: var(--color-content-low-text);\n\n\n / text/sm/regular /\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--font-size-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--line-height-sm); / 142.857% /\n }\n}\n","import { Component, Host, Prop, h, Element, Fragment } from '@stencil/core';\n\n/\n @slot default - Custom content for the dialog header. When provided, the default header will not be rendered.\n /\n@Component({\n tag: 'nv-dialogheader',\n styleUrl: 'nv-dialogheader.scss',\n shadow: false,\n})\nexport class NvDialogheader {\n @Element() el: HTMLNvDialogheaderElement;\n private hasSlot = false;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the heading text for the dialog.\n /\n @Prop({ reflect: true })\n readonly heading: string = 'Dialog Title';\n\n /\n Sets the subheading text for the dialog.\n /\n @Prop({ reflect: true })\n readonly subheading: string;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n // Check if there are any child elements that don't have a slot attribute\n this.hasSlot = Array.from(this.el.childNodes).some(node => {\n return (\n node.nodeType === Node.ELEMENT_NODE &&\n !(node as Element).hasAttribute('slot')\n );\n });\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {!this.hasSlot ? (\n <Fragment>\n <div class=\"heading\">{this.heading}</div>\n <div class=\"subheading\">{this.subheading}</div>\n </Fragment>\n ) : (\n <slot></slot>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-dialogfooter.nv-dialogheader.entry.cjs.js","mappings":"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","names":["ButtonType","h","Host","Fragment"],"sources":["src/components/nv-dialogfooter/nv-dialogfooter.scss?tag=nv-dialogfooter","src/components/nv-dialogfooter/nv-dialogfooter.tsx","src/components/nv-dialogheader/nv-dialogheader.scss?tag=nv-dialogheader","src/components/nv-dialogheader/nv-dialogheader.tsx"],"sourcesContent":["nv-dialogfooter {\n display: flex;\n padding: var(--dialog-footer-padding-top) var(--dialog-footer-padding-x)\n var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);\n\n justify-content: flex-end;\n align-items: flex-end;\n gap: var(--dialog-footer-gap-y);\n align-self: stretch;\n}\n","import {\n AttachInternals,\n Component,\n h,\n Host,\n Prop,\n Event,\n EventEmitter,\n Fragment,\n Element,\n} from '@stencil/core';\nimport { ButtonType } from '../../utils/constants';\n\n/*\n @slot default - Custom content for the dialog footer. When provided, the default buttons will not be rendered.\n /\n@Component({\n tag: 'nv-dialogfooter',\n styleUrl: 'nv-dialogfooter.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvDialogfooter {\n @AttachInternals() internals: ElementInternals;\n @Element() el: HTMLNvDialogfooterElement;\n private hasSlot = false;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Disables the primary button, preventing user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Controls the visibility of the cancel button. When true, the cancel button is\n * hidden.\n /\n @Prop({ reflect: true })\n readonly undismissable: boolean = false;\n\n /\n Sets the leading icon for the primary button.\n /\n @Prop({ reflect: true })\n readonly leadingIcon: string = '';\n\n /\n Sets the trailing icon for the primary button.\n /\n @Prop({ reflect: true })\n readonly trailingIcon: string = '';\n\n /\n Sets the danger state for the primary button.\n /\n @Prop({ reflect: true })\n readonly danger: boolean = false;\n\n /\n Sets the label for the cancel button.\n /\n @Prop({ reflect: true })\n readonly cancelLabel: string = 'Cancel';\n\n /\n Sets the label for the primary button.\n /\n @Prop({ reflect: true })\n readonly primaryLabel: string = 'Primary';\n\n /\n Sets the type of the primary button. If using a form, this will default to\n * 'submit' if nothing passed.\n /\n @Prop({ reflect: true, mutable: true })\n primaryButtonType: `${ButtonType}`;\n\n /\n A form inside the dialog can be submitted through the dialog footer by\n * giving the form an id and passing that id to the form attribute.\n /\n @Prop({ reflect: true })\n readonly form: string;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the cancel button is clicked. This will close the dialog.\n /\n @Event()\n dialogCanceled: EventEmitter<void>;\n\n /\n Emitted when the primary button is clicked. This allows to handle the\n * primary action and potential data capture before closing the dialog.\n /\n @Event()\n dialogPrimaryClicked: EventEmitter<void>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the primary action when the primary button is clicked.\n * @param {Event} event - The click event.\n /\n\n private handlePrimary = (event: Event) => {\n event.stopPropagation();\n this.dialogPrimaryClicked.emit();\n };\n\n /\n Handles the cancel action when the cancel button is clicked. This will close the dialog.\n * @param {Event} event - The click event.\n /\n private handleCancel = (event: Event) => {\n event.stopPropagation();\n this.dialogCanceled.emit();\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n // Check if there are any child elements that don't have a slot attribute\n this.hasSlot = Array.from(this.el.childNodes).some(node => {\n return (\n node.nodeType === Node.ELEMENT_NODE &&\n !(node as Element).hasAttribute('slot')\n );\n });\n }\n\n componentDidLoad() {\n // Set the default button type based on the form property\n this.primaryButtonType =\n this.primaryButtonType \|\| this.form\n ? ButtonType.Submit\n : ButtonType.Button;\n }\n\n //#endregion LIFECYCLE\n /*************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {!this.hasSlot ? (\n <Fragment>\n {!this.undismissable && (\n <nv-button onClick={this.handleCancel} emphasis=\"low\" size=\"sm\">\n {this.cancelLabel}\n </nv-button>\n )}\n <nv-button\n onClick={this.handlePrimary}\n disabled={this.disabled}\n danger={this.danger}\n size=\"sm\"\n emphasis=\"high\"\n form={this.form}\n type={this.primaryButtonType}\n >\n {this.leadingIcon && (\n <nv-icon\n slot=\"leading-icon\"\n name={this.leadingIcon}\n size=\"sm\"\n />\n )}\n {this.primaryLabel}\n {this.trailingIcon && (\n <nv-icon\n slot=\"trailing-icon\"\n name={this.trailingIcon}\n size=\"sm\"\n />\n )}\n </nv-button>\n </Fragment>\n ) : (\n <slot></slot>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n","nv-dialogheader {\n // calc(var(--dialog-header-padding-x, 24px) + var(--dialog-dismissible-position-right, 12px) + var(--button-sm-icon-size, 16px) + var(--button-sm-icon-button-padding, 8px))\n padding: var(--dialog-header-padding-top)\n var(--dialog-header-padding-x)\n var(--dialog-header-padding-bottom)\n var(--dialog-header-padding-x);\n justify-content: space-between;\n align-items: flex-start;\n align-self: stretch;\n\n .heading {\n color: var(--color-content-high-text);\n\n\n / heading/xs/medium /\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--font-size-lg);\n font-style: normal;\n font-weight: 500;\n padding-right: var(--spacing-7);\n line-height: var(--leading-px-6); / 133.333% /\n letter-spacing: var(--letter-spacing-heading-xs);\n }\n\n .subheading {\n color: var(--color-content-low-text);\n\n\n / text/sm/regular /\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--font-size-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--line-height-sm); / 142.857% /\n }\n}\n","import { Component, Host, Prop, h, Element, Fragment } from '@stencil/core';\n\n/\n @slot default - Custom content for the dialog header. When provided, the default header will not be rendered.\n /\n@Component({\n tag: 'nv-dialogheader',\n styleUrl: 'nv-dialogheader.scss',\n shadow: false,\n})\nexport class NvDialogheader {\n @Element() el: HTMLNvDialogheaderElement;\n private hasSlot = false;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the heading text for the dialog.\n /\n @Prop({ reflect: true })\n readonly heading: string = 'Dialog Title';\n\n /\n Sets the subheading text for the dialog.\n /\n @Prop({ reflect: true })\n readonly subheading: string;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n // Check if there are any child elements that don't have a slot attribute\n this.hasSlot = Array.from(this.el.childNodes).some(node => {\n return (\n node.nodeType === Node.ELEMENT_NODE &&\n !(node as Element).hasAttribute('slot')\n );\n });\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {!this.hasSlot ? (\n <Fragment>\n <div class=\"heading\">{this.heading}</div>\n <div class=\"subheading\">{this.subheading}</div>\n </Fragment>\n ) : (\n <slot></slot>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/cjs/nv-fieldcheckbox.cjs.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@ const index = require('./index-c56424e5.js');
 const clsx = require('./clsx-fc789adc.js');
 const v4 = require('./v4-7014b8b0.js');
-const nvFieldcheckboxCss = "nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(\n    --components-form-field-border-default\n  );--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(\n    --components-form-field-background-default\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-fieldcheckbox-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error>.input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled-error\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-error\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]:not([disabled=false]){opacity:0.5}nv-fieldcheckbox>.input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox>.input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox>.input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus,nv-fieldcheckbox>.input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox>.input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox>.input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox>.input-container input[type=checkbox]:checked,nv-fieldcheckbox>.input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox>.input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox>.input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox>.text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}nv-fieldcheckbox>.text-container label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox>.text-container label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-fieldcheckbox>.text-container .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox>.text-container .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const nvFieldcheckboxCss = "nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(\n    --components-form-field-border-default\n  );--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(\n    --components-form-field-background-default\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-fieldcheckbox-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error>.input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled-error\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-error\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]:not([disabled=false]){opacity:0.5}nv-fieldcheckbox>.input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox>.input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox>.input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus,nv-fieldcheckbox>.input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox>.input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox>.input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox>.input-container input[type=checkbox]:checked,nv-fieldcheckbox>.input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox>.input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox>.input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox>.text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}nv-fieldcheckbox>.text-container label{align-self:stretch;text-align:left;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox>.text-container label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-fieldcheckbox>.text-container .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox>.text-container .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
 const NvFieldcheckboxStyle0 = nvFieldcheckboxCss;
 const NvFieldcheckbox = class {

package/dist/cjs/nv-fieldcheckbox.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-fieldcheckbox.entry.cjs.js","mappings":"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","names":["uuidv4","h","Host","clsx"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import '../../styles/focus-ring';\n\n@mixin fieldcheckbox-variables() {\n --nv-fieldcheckbox-border-default: var(\n --components-form-field-border-default\n );\n --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n --nv-fieldcheckbox-background-default: var(\n --components-form-field-background-default\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-checked\n );\n --nv-fieldcheckbox-background-disabled: var(\n --components-form-field-background-disabled\n );\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n --nv-fieldcheckbox-color-checked: var(\n --components-form-shape-foreground-default\n );\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled-error\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-error\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--form-gap-x);\n position: relative;\n\n &:not([disabled], [readonly]) {\n input,\n label {\n cursor: pointer;\n }\n }\n}\n\n@mixin label-before-styles() {\n flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n align-self: stretch;\n color: var(--components-form-text-label-default);\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: var(--form-label-font-weight);\n line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n align-self: stretch;\n color: var(--components-form-text-description-default);\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n font-weight: var(--form-description-font-weight);\n line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n @include description-styles();\n\n color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n position: relative;\n color: var(--nv-fieldcheckbox-color-checked);\n\n input[type='checkbox'][readonly] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n\n &:has(input[type='checkbox']:disabled:not([readonly])) {\n color: var(--nv-fieldcheckbox-color-disabled);\n }\n}\n\n@mixin input-styles() {\n appearance: none;\n position: relative;\n display: flex;\n width: var(--form-checkbox-size);\n height: var(--form-checkbox-size);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--form-checkbox-radius);\n border-width: var(--form-checkbox-border-width);\n border-style: solid;\n border-color: var(--nv-fieldcheckbox-border-default);\n background: var(--nv-fieldcheckbox-background-default);\n\n &:hover {\n border-color: var(--nv-fieldcheckbox-border-hover);\n }\n\n &:focus {\n border-color: var(--nv-fieldcheckbox-border-focus);\n }\n\n @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n &:checked,\n &:indeterminate {\n background: var(--nv-fieldcheckbox-background-checked);\n border-color: var(--nv-fieldcheckbox-background-checked);\n }\n\n &:disabled:not([readonly]) {\n background: var(--nv-fieldcheckbox-background-disabled);\n border-color: var(--nv-fieldcheckbox-border-default);\n }\n\n &[readonly] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n}\n\n@mixin icon-styles() {\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n width: var(--form-checkbox-icon-size);\n height: var(--form-checkbox-icon-size);\n fill: none;\n stroke: currentcolor;\n stroke-width: var(--form-checkbox-icon-stroke);\n flex-shrink: 0;\n }\n}\n\nnv-fieldcheckbox {\n @include fieldcheckbox-variables();\n @include root-styles();\n\n &.error > .input-container {\n @include fieldcheckbox-error-variables();\n }\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled]:not([disabled='false']) {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n\n > .input-container {\n @include input-container-styles();\n\n input[type='checkbox'] {\n @include input-styles();\n }\n\n .icon {\n @include icon-styles();\n }\n }\n\n > .text-container {\n @include text-container-styles();\n\n label {\n @include label-styles();\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n }\n\n .description {\n @include description-styles();\n }\n\n .error-description {\n @include error-description-styles();\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/*\n @slot default - Next to the label and description.\n * @slot main - Replaces the label and description.\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 * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n /\n@Component({\n tag: 'nv-fieldcheckbox',\n styleUrl: 'nv-fieldcheckbox.scss',\n formAssociated: true,\n shadow: false,\n})\nexport class NvFieldcheckbox {\n @Element() el!: HTMLNvFieldcheckboxElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message define a 'hint ' message for the Field.\n * @deprecated Use `description` instead.\n * /\n @Prop({ reflect: true })\n readonly message?: string;\n\n /\n The text for the validation message.\n * @deprecated Use `errorDescription` and set the error prop instead.\n * /\n @Prop({ reflect: true })\n readonly validation?: string;\n\n /\n When true, the label will be placed before the checkbox.\n * @deprecated Use `labelPlacement = end` instead.\n * /\n @Prop({ reflect: true })\n readonly labelBefore?: boolean = false;\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n The name attribute for the checkbox input, used to reference the form data\n * after submission.\n /\n @Prop({ reflect: true })\n readonly name?: string;\n\n /\n The value attribute of the checkbox input, representing the value sent on\n * form submission when the checkbox is checked. When the form is submitted,\n * the data will consist of a name=value pair.\n /\n @Prop({ reflect: true })\n readonly value?: string;\n\n /\n The label displayed next to the checkbox.\n /\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n Determines the position of the label relative to the checkbox, either\n * 'start' (before) or 'end' (after).\n /\n @Prop({ reflect: true, mutable: true })\n labelPlacement: `${LabelPlacement}`;\n\n /\n Hides the label visually while still keeping it available for screen\n * readers.\n /\n @Prop({ reflect: true })\n readonly hideLabel: boolean = false;\n\n /\n A description providing additional context or information about the\n * checkbox.\n /\n @Prop({ reflect: true, mutable: true })\n description?: string;\n\n /\n Signals that there is an error associated with the checkbox, which can\n * trigger visual cues.\n * @validator error\n /\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /\n A description that appears when there is an error related to the checkbox.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /\n Indicates whether the checkbox is checked or not.\n /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n Indicates whether the checkbox is in an indeterminate state, typically used\n * for hierarchical checkboxes.\n /\n @Prop({ reflect: true, mutable: true })\n indeterminate: boolean = false;\n\n /\n Disables the checkbox, preventing user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Sets the checkbox to read-only, preventing user changes but still allowing\n * focus and selection of text.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the checkbox as required, indicating that it must be checked for\n * form submission.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on an <input>\n * element.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the checked state changes.\n * @bind checked\n /\n @Event()\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region LISTENERS\n\n /\n * Listens for the change event on the checkbox input element and updates the\n * checked state.\n * @param {Event} event - The change event.\n /\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion LISTENERS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n /\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.labelBefore) {\n this.labelPlacement = 'before';\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n this.error && 'error',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autofocus={this.autofocus}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled \|\| this.readonly}\n readonly={this.readonly && !this.required}\n required={this.required}\n indeterminate={this.indeterminate}\n ref={el => {\n if (el) {\n el.indeterminate = this.indeterminate;\n }\n }}\n />\n <span class=\"icon\">\n {this.checked && !this.indeterminate && (\n <slot name=\"checked-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n {this.indeterminate && (\n <slot name=\"indeterminate-icon\">\n <svg\n class=\"indeterminate-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M2.9165 7H11.0832\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n </span>\n </div>\n\n <slot></slot>\n\n <div class=\"text-container\">\n <slot name=\"main\">\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\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 </slot>\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 </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-fieldcheckbox.entry.cjs.js","mappings":"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","names":["uuidv4","h","Host","clsx"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import '../../styles/focus-ring';\n\n@mixin fieldcheckbox-variables() {\n --nv-fieldcheckbox-border-default: var(\n --components-form-field-border-default\n );\n --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n --nv-fieldcheckbox-background-default: var(\n --components-form-field-background-default\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-checked\n );\n --nv-fieldcheckbox-background-disabled: var(\n --components-form-field-background-disabled\n );\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n --nv-fieldcheckbox-color-checked: var(\n --components-form-shape-foreground-default\n );\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled-error\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-error\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--form-gap-x);\n position: relative;\n\n &:not([disabled], [readonly]) {\n input,\n label {\n cursor: pointer;\n }\n }\n}\n\n@mixin label-before-styles() {\n flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n align-self: stretch;\n text-align: left;\n color: var(--components-form-text-label-default);\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: var(--form-label-font-weight);\n line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n align-self: stretch;\n color: var(--components-form-text-description-default);\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n font-weight: var(--form-description-font-weight);\n line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n @include description-styles();\n\n color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n position: relative;\n color: var(--nv-fieldcheckbox-color-checked);\n\n input[type='checkbox'][readonly] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n\n &:has(input[type='checkbox']:disabled:not([readonly])) {\n color: var(--nv-fieldcheckbox-color-disabled);\n }\n}\n\n@mixin input-styles() {\n appearance: none;\n position: relative;\n display: flex;\n width: var(--form-checkbox-size);\n height: var(--form-checkbox-size);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--form-checkbox-radius);\n border-width: var(--form-checkbox-border-width);\n border-style: solid;\n border-color: var(--nv-fieldcheckbox-border-default);\n background: var(--nv-fieldcheckbox-background-default);\n\n &:hover {\n border-color: var(--nv-fieldcheckbox-border-hover);\n }\n\n &:focus {\n border-color: var(--nv-fieldcheckbox-border-focus);\n }\n\n @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n &:checked,\n &:indeterminate {\n background: var(--nv-fieldcheckbox-background-checked);\n border-color: var(--nv-fieldcheckbox-background-checked);\n }\n\n &:disabled:not([readonly]) {\n background: var(--nv-fieldcheckbox-background-disabled);\n border-color: var(--nv-fieldcheckbox-border-default);\n }\n\n &[readonly] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n}\n\n@mixin icon-styles() {\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n width: var(--form-checkbox-icon-size);\n height: var(--form-checkbox-icon-size);\n fill: none;\n stroke: currentcolor;\n stroke-width: var(--form-checkbox-icon-stroke);\n flex-shrink: 0;\n }\n}\n\nnv-fieldcheckbox {\n @include fieldcheckbox-variables();\n @include root-styles();\n\n &.error > .input-container {\n @include fieldcheckbox-error-variables();\n }\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled]:not([disabled='false']) {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n\n > .input-container {\n @include input-container-styles();\n\n input[type='checkbox'] {\n @include input-styles();\n }\n\n .icon {\n @include icon-styles();\n }\n }\n\n > .text-container {\n @include text-container-styles();\n\n label {\n @include label-styles();\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n }\n\n .description {\n @include description-styles();\n }\n\n .error-description {\n @include error-description-styles();\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/*\n @slot default - Next to the label and description.\n * @slot main - Replaces the label and description.\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 * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n /\n@Component({\n tag: 'nv-fieldcheckbox',\n styleUrl: 'nv-fieldcheckbox.scss',\n formAssociated: true,\n shadow: false,\n})\nexport class NvFieldcheckbox {\n @Element() el!: HTMLNvFieldcheckboxElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message define a 'hint ' message for the Field.\n * @deprecated Use `description` instead.\n * /\n @Prop({ reflect: true })\n readonly message?: string;\n\n /\n The text for the validation message.\n * @deprecated Use `errorDescription` and set the error prop instead.\n * /\n @Prop({ reflect: true })\n readonly validation?: string;\n\n /\n When true, the label will be placed before the checkbox.\n * @deprecated Use `labelPlacement = end` instead.\n * /\n @Prop({ reflect: true })\n readonly labelBefore?: boolean = false;\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n The name attribute for the checkbox input, used to reference the form data\n * after submission.\n /\n @Prop({ reflect: true })\n readonly name?: string;\n\n /\n The value attribute of the checkbox input, representing the value sent on\n * form submission when the checkbox is checked. When the form is submitted,\n * the data will consist of a name=value pair.\n /\n @Prop({ reflect: true })\n readonly value?: string;\n\n /\n The label displayed next to the checkbox.\n /\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n Determines the position of the label relative to the checkbox, either\n * 'start' (before) or 'end' (after).\n /\n @Prop({ reflect: true, mutable: true })\n labelPlacement: `${LabelPlacement}`;\n\n /\n Hides the label visually while still keeping it available for screen\n * readers.\n /\n @Prop({ reflect: true })\n readonly hideLabel: boolean = false;\n\n /\n A description providing additional context or information about the\n * checkbox.\n /\n @Prop({ reflect: true, mutable: true })\n description?: string;\n\n /\n Signals that there is an error associated with the checkbox, which can\n * trigger visual cues.\n * @validator error\n /\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /\n A description that appears when there is an error related to the checkbox.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /\n Indicates whether the checkbox is checked or not.\n /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n Indicates whether the checkbox is in an indeterminate state, typically used\n * for hierarchical checkboxes.\n /\n @Prop({ reflect: true, mutable: true })\n indeterminate: boolean = false;\n\n /\n Disables the checkbox, preventing user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Sets the checkbox to read-only, preventing user changes but still allowing\n * focus and selection of text.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the checkbox as required, indicating that it must be checked for\n * form submission.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on an <input>\n * element.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the checked state changes.\n * @bind checked\n /\n @Event()\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region LISTENERS\n\n /\n * Listens for the change event on the checkbox input element and updates the\n * checked state.\n * @param {Event} event - The change event.\n /\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion LISTENERS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n /\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.labelBefore) {\n this.labelPlacement = 'before';\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n this.error && 'error',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autofocus={this.autofocus}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled \|\| this.readonly}\n readonly={this.readonly && !this.required}\n required={this.required}\n indeterminate={this.indeterminate}\n ref={el => {\n if (el) {\n el.indeterminate = this.indeterminate;\n }\n }}\n />\n <span class=\"icon\">\n {this.checked && !this.indeterminate && (\n <slot name=\"checked-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n {this.indeterminate && (\n <slot name=\"indeterminate-icon\">\n <svg\n class=\"indeterminate-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M2.9165 7H11.0832\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n </span>\n </div>\n\n <slot></slot>\n\n <div class=\"text-container\">\n <slot name=\"main\">\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\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 </slot>\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 </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/cjs/nv-fieldmultiselect.cjs.entry.js CHANGED Viewed

@@ -128,7 +128,6 @@ const NvFieldmultiselect = class {
          * Handle badge close for options mode.
          */
         this.handleBadgeCloseOptions = () => {
-            console.info('handleBadgeCloseOptions:', this.value);
             this.value = [];
             this.valueChanged.emit(this.value);
             // Uncheck all elements
@@ -146,7 +145,6 @@ const NvFieldmultiselect = class {
          * Handle badge close for slots mode.
          */
         this.handleBadgeCloseSlots = () => {
-            console.info('handleBadgeCloseSlots:', this.value);
             this.value = [];
             this.valueChanged.emit(this.value);
             // Uncheck all elements
@@ -355,7 +353,6 @@ const NvFieldmultiselect = class {
             try {
                 // Get visible and enabled option values from DOM
                 const visibleOptionValues = this.getVisibleEnabledOptionItems();
-                console.info('[SelectAll][Options] toggleSelectAllOptions called. selectAll:', selectAll, 'visibleOptionValues:', visibleOptionValues, 'Current value:', this.value);
                 if (selectAll) {
                     // Select all visible options - merge with existing selections
                     this.value = [...new Set([...this.value, ...visibleOptionValues])];
@@ -364,7 +361,6 @@ const NvFieldmultiselect = class {
                     // Deselect only the visible options, keep others that might be filtered out
                     this.value = this.value.filter(val => !visibleOptionValues.includes(val));
                 }
-                console.info('[SelectAll][Options] New value after toggle:', this.value);
                 // Emit the change event
                 this.valueChanged.emit(this.value);
                 // Synchronize child components
@@ -390,7 +386,6 @@ const NvFieldmultiselect = class {
             try {
                 // Get visible and enabled items
                 const items = this.getVisibleEnabledSlotItems();
-                console.info('[SelectAll][Slots] toggleSelectAllSlots called. selectAll:', selectAll, 'visible slot items:', items.map(item => item.getAttribute('value') || item.getAttribute('label')), 'Current value:', this.value);
                 if (selectAll) {
                     // Select all visible items
                     const allActiveValues = items
@@ -405,7 +400,6 @@ const NvFieldmultiselect = class {
                         .filter(value => value !== '');
                     this.value = this.value.filter(val => !visibleValues.includes(val));
                 }
-                console.info('[SelectAll][Slots] New value after toggle:', this.value);
                 // Emit the change event
                 this.valueChanged.emit(this.value);
                 // Force synchronization with a small delay to ensure DOM is updated
@@ -428,15 +422,12 @@ const NvFieldmultiselect = class {
         this.handleSelectAllCheckboxOptionsClick = (event) => {
             event.stopPropagation();
             event.preventDefault();
-            console.info('[handleSelectAllCheckboxOptionsClick] event:', event);
             const currentState = this.getSelectAllCheckboxStateOptions();
-            console.info('[SelectAll][Options] Checkbox clicked. Current state:', currentState, 'Current value:', this.value);
             // Logic to handle the indeterminate state
             // - unchecked → select all
             // - indeterminate → select all (clicking on indeterminate will change to checked)
             // - checked → deselect all
             const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
-            console.info('[SelectAll][Options] shouldSelectAll:', shouldSelectAll);
             this.toggleSelectAllOptions(shouldSelectAll);
         };
         /**
@@ -446,15 +437,12 @@ const NvFieldmultiselect = class {
         this.handleSelectAllCheckboxSlotsClick = (event) => {
             event.stopPropagation();
             event.preventDefault();
-            console.info('[handleSelectAllCheckboxSlotsClick] event:', event);
             const currentState = this.getSelectAllCheckboxStateSlots();
-            console.info('[SelectAll][Slots] Checkbox clicked. Current state:', currentState, 'Current value:', this.value);
             // Logic to handle the indeterminate state
             // - unchecked → select all
             // - indeterminate → select all (clicking on indeterminate will change to checked)
             // - checked → deselect all
             const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
-            console.info('[SelectAll][Slots] shouldSelectAll:', shouldSelectAll);
             this.toggleSelectAllSlots(shouldSelectAll);
         };
         //#endregion METHODS
@@ -497,8 +485,6 @@ const NvFieldmultiselect = class {
     /****************************************************************************/
     //#region WATCHERS
     handleOptionsChange(newValue) {
-        console.info('[Watch:options] newValue:', newValue);
-        console.info('[Watch:options] current value before update:', this.value);
         if (!newValue)
             return;
         // If the parent has set a value prop, use it. Otherwise, derive from checked options.
@@ -507,22 +493,18 @@ const NvFieldmultiselect = class {
             this.value = newValue
                 .filter(option => option.checked)
                 .map(option => option.value);
-            console.info('[Watch:options] updated value from checked options:', this.value);
         }
         else {
             // If value is set, ensure checked states in options match value
             newValue.forEach(option => {
                 option.checked = this.value.includes(option.value);
             });
-            console.info('[Watch:options] options checked state synced to value:', newValue);
         }
         this.reorderOptionsContent();
     }
     watchValueHandler() {
-        console.info('[Watch:value] Value changed:', this.value, 'isBulkOperation:', this.isBulkOperation);
         // Skip processing during bulk operations
         if (this.isBulkOperation) {
-            console.info('[Watch:value] Skipping syncChildComponents and options update due to bulk operation');
             return;
         }
         // Synchronize child components when value changes programmatically
@@ -571,11 +553,9 @@ const NvFieldmultiselect = class {
     handleItemChecked(event) {
         if (this.disabled || this.readonly || this.isBulkOperation) {
             // Skip processing itemChecked events during bulk operations
-            console.info('[Event:itemChecked] Skipped due to bulk operation or disabled/readonly', event.detail);
             return;
         }
         const { value, checked } = event.detail;
-        console.info('[Event:itemChecked] value:', value, 'checked:', checked, 'current value:', this.value);
         if (value !== undefined && value !== null) {
             const newValue = [...this.value];
             const valueIndex = newValue.indexOf(value);
@@ -588,7 +568,6 @@ const NvFieldmultiselect = class {
                 newValue.splice(valueIndex, 1);
                 hasChanged = true;
             }
-            console.info('[Event:itemChecked] newValue after update:', newValue);
             if (hasChanged) {
                 this.value = newValue;
                 this.valueChanged.emit(this.value);
@@ -622,7 +601,6 @@ const NvFieldmultiselect = class {
      * Subscribe to click outside event.
      */
     connectedCallback() {
-        console.info('[Lifecycle] connectedCallback - value:', this.value);
         // Bind once and reuse the same reference for add/remove to avoid leaks
         if (!this._boundHandleClickOutside) {
             this._boundHandleClickOutside = this.handleClickOutside.bind(this);
@@ -634,7 +612,6 @@ const NvFieldmultiselect = class {
      */
     componentWillLoad() {
         var _a;
-        console.info('[Lifecycle] componentWillLoad - value:', this.value, 'options:', this.options);
         // Don't call handleOptionsChange if we are in slots mode
         if (this.options) {
             this.handleOptionsChange(this.options);
@@ -668,7 +645,6 @@ const NvFieldmultiselect = class {
      * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
      */
     componentDidLoad() {
-        console.info('[Lifecycle] componentDidLoad - value:', this.value, 'options:', this.options);
         if (this.options) {
             this.handleOptionsChange(this.options);
         }
@@ -684,7 +660,6 @@ const NvFieldmultiselect = class {
      * Unsubscribe from click outside event.
      */
     disconnectedCallback() {
-        console.info('[Lifecycle] disconnectedCallback - value:', this.value);
         if (this._boundHandleClickOutside) {
             document.removeEventListener('click', this._boundHandleClickOutside);
         }
@@ -729,7 +704,6 @@ const NvFieldmultiselect = class {
      * @returns {string[]} The selected values.
      */
     async getSelectedValues() {
-        console.info('getSelectedValues:', this.value);
         return this.value;
     }
     /**
@@ -1210,12 +1184,10 @@ const NvFieldmultiselect = class {
             return;
         }
         const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-        console.info('[syncChildComponents] value:', this.value);
         items.forEach(item => {
             // Get the effective value: use explicit value if present, otherwise use label
             const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
             const shouldBeChecked = this.value.includes(itemValue);
-            console.info('[syncChildComponents] itemValue:', itemValue, 'shouldBeChecked:', shouldBeChecked, 'item.checked(before):', item.checked);
             // Only update if the checked state differs to avoid triggering unnecessary events
             if (item.checked !== shouldBeChecked) {
                 // Set attribute and property, but avoid triggering itemChecked during bulk
@@ -1234,7 +1206,6 @@ const NvFieldmultiselect = class {
                     item.checked = shouldBeChecked;
                 }
             }
-            console.info('[syncChildComponents] itemValue:', itemValue, 'item.checked(after):', item.checked);
         });
     }
     /**
@@ -1332,7 +1303,6 @@ const NvFieldmultiselect = class {
             .map(item => item.getAttribute('value') || item.getAttribute('label') || '');
         // Combine with current this.value (set by code), ensuring uniqueness
         this.value = Array.from(new Set([...(this.value || []), ...checkedValues]));
-        console.info('[initializeValueFromSlots] checkedValues:', checkedValues, 'combined value:', this.value);
     }
     /**
      * Renders description and error description sections