@nova-design-system/nova-webcomponents 3.10.0 → 3.10.1-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.
- package/dist/cjs/nv-alert.cjs.entry.js +1 -1
- package/dist/cjs/nv-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-badge_2.cjs.entry.js +7 -1
- package/dist/cjs/nv-badge_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldmultiselect.cjs.entry.js +112 -72
- package/dist/cjs/nv-fieldmultiselect.cjs.entry.js.map +1 -1
- package/dist/collection/components/nv-alert/nv-alert.css +1 -0
- package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.js +7 -1
- package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.js.map +1 -1
- package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.js +112 -72
- package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.js.map +1 -1
- package/dist/components/nv-alert.js +1 -1
- package/dist/components/nv-alert.js.map +1 -1
- package/dist/components/nv-fielddropdownitemcheck.js +1 -1
- package/dist/components/nv-fieldmultiselect.js +113 -73
- package/dist/components/nv-fieldmultiselect.js.map +1 -1
- package/dist/components/{p-51a156ff.js → p-ec4558aa.js} +8 -2
- package/dist/components/p-ec4558aa.js.map +1 -0
- package/dist/esm/nv-alert.entry.js +1 -1
- package/dist/esm/nv-alert.entry.js.map +1 -1
- package/dist/esm/nv-badge_2.entry.js +7 -1
- package/dist/esm/nv-badge_2.entry.js.map +1 -1
- package/dist/esm/nv-fieldmultiselect.entry.js +112 -72
- package/dist/esm/nv-fieldmultiselect.entry.js.map +1 -1
- package/dist/native/native.esm.js +1 -1
- package/dist/native/p-019d164d.entry.js +2 -0
- package/dist/native/p-019d164d.entry.js.map +1 -0
- package/dist/native/p-4f4ed012.entry.js +2 -0
- package/dist/native/p-4f4ed012.entry.js.map +1 -0
- package/dist/native/{p-13032ec1.entry.js → p-9991116a.entry.js} +2 -2
- package/dist/native/{p-13032ec1.entry.js.map → p-9991116a.entry.js.map} +1 -1
- package/dist/types/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.d.ts +2 -0
- package/dist/types/components/nv-fieldmultiselect/nv-fieldmultiselect.d.ts +3 -0
- package/hydrate/index.js +121 -75
- package/hydrate/index.mjs +121 -75
- package/package.json +1 -1
- package/dist/components/p-51a156ff.js.map +0 -1
- package/dist/native/p-2a3325fb.entry.js +0 -2
- package/dist/native/p-2a3325fb.entry.js.map +0 -1
- package/dist/native/p-b2442d4b.entry.js +0 -2
- package/dist/native/p-b2442d4b.entry.js.map +0 -1
|
@@ -10,7 +10,7 @@ const fade_animation = require('./fade.animation-644b5c4d.js');
|
|
|
10
10
|
require('./stylefire.es-717e022a.js');
|
|
11
11
|
const timeline_animation = require('./timeline.animation-155e8839.js');
|
|
12
12
|
|
|
13
|
-
const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
|
|
13
|
+
const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-right:calc(var(--alert-padding) + var(--icon-md) + var(--spacing-1));padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
|
|
14
14
|
const NvAlertStyle0 = nvAlertCss;
|
|
15
15
|
|
|
16
16
|
const NvAlert = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nv-alert.entry.cjs.js","mappings":"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","names":["FeedbackColors","useFade","useCollapse","timeline","h","Host","clsx"],"sources":["src/components/nv-alert/nv-alert.scss?tag=nv-alert","src/components/nv-alert/nv-alert.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$alert-feedback: (\"information\", \"warning\", \"error\", \"success\", \"neutral\");\n\n/* Define maps for feedback-related variables */\n$components-alert-background: (\n \"information\": var(--components-alert-information-background),\n \"warning\": var(--components-alert-warning-background),\n \"error\": var(--components-alert-error-background),\n \"success\": var(--components-alert-success-background),\n \"neutral\": var(--components-alert-neutral-background)\n);\n\n$components-alert-border: (\n \"information\": var(--components-alert-information-border),\n \"warning\": var(--components-alert-warning-border),\n \"error\": var(--components-alert-error-border),\n \"success\": var(--components-alert-success-border),\n \"neutral\": var(--components-alert-neutral-border)\n);\n\n$components-alert-icon: (\n \"information\": var(--components-alert-information-icon),\n \"warning\": var(--components-alert-warning-icon),\n \"error\": var(--components-alert-error-icon),\n \"success\": var(--components-alert-success-icon),\n \"neutral\": var(--components-alert-neutral-icon)\n);\n\n@mixin root-styles() {\n display: flex !important; // override the display: none in [hidden] css\n align-items: flex-start;\n position: relative;\n gap: var(--alert-gap-x);\n border-radius: var(--alert-radius);\n font-family: \"TT Norms Pro\", \"Montserrat\", sans-serif;\n}\n\n@mixin content-styles() {\n display: flex;\n padding: var(--alert-padding);\n padding-left: 0;\n flex-direction: column;\n gap: var(--alert-gap-y);\n}\n\n@mixin feedback-color($feedback-type) {\n background-color: map.get($components-alert-background, $feedback-type);\n border: 1px solid map.get($components-alert-border, $feedback-type) !important;\n}\n\n@mixin icon-color($feedback-type) {\n color: map.get($components-alert-icon, $feedback-type);\n}\n\n@mixin icon-position {\n margin-left: var(--alert-icon-position-x);\n margin-top: var(--alert-icon-position-y);\n}\n\nnv-alert {\n @include root-styles();\n\n & > nv-icon {\n @include icon-position();\n }\n\n &.hidden {\n display: none!important;\n }\n\n @each $feedback in $alert-feedback {\n &.feedback-#{$feedback} {\n @include feedback-color($feedback);\n & > .close {\n @include focus-ring(map.get($components-alert-border, $feedback));\n }\n }\n }\n\n @each $feedback in $alert-feedback {\n & > nv-icon.icon-#{$feedback} {\n @include icon-color($feedback);\n }\n }\n\n & > .content {\n @include content-styles();\n\n & > .heading {\n color: var(--components-alert-content-title);\n font-size: var(--alert-heading-font-size);\n line-height: var(--alert-heading-line-height);\n font-weight: var(--alert-heading-font-weight);\n }\n & > .message {\n color: var(--components-alert-content-description);\n font-size: var(--alert-message-font-size);\n line-height: var(--alert-message-line-height);\n }\n }\n & > .close {\n border-radius: var(--alert-radius);\n position: absolute;\n display: flex;\n top: var(--alert-icon-position-y);\n right: var(--alert-icon-position-x);\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n DeprecatedSemanticColors,\n FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\n\n/**\n * @slot default - Use this slot to insert HTML into the alert content.\n */\n@Component({\n tag: 'nv-alert',\n styleUrl: 'nv-alert.scss',\n shadow: false,\n})\nexport class NvAlert {\n @Element() ref: HTMLNvAlertElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Defines color of the alert.\n * @deprecated use feedback instead.\n */\n @Prop({ reflect: true })\n readonly color: `${DeprecatedSemanticColors}`;\n\n componentWillRender() {\n if (this.color) {\n switch (this.color) {\n case 'primary' as DeprecatedSemanticColors:\n this.feedback = 'warning' as FeedbackColors;\n break;\n case 'secondary' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n case 'neutral' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n default:\n this.feedback = this.color as FeedbackColors;\n }\n }\n }\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Specifies the alert type which determines the color and default icon.\n */\n @Prop({ reflect: true, mutable: true })\n feedback: `${FeedbackColors}` = 'information';\n\n /**\n * Main content of the alert. For more complex content, use the default slot\n * instead.\n */\n @Prop({ reflect: true })\n readonly message: string;\n\n /**\n * Short and concise text for the alert title.\n */\n @Prop({ reflect: true })\n readonly heading: string;\n\n /**\n * Icon associated with the alert, defaults vary based on the feedback type.\n */\n @Prop({ reflect: true })\n readonly icon: string;\n\n /**\n * Allows the alert to be dismissed via a close button (x). The alert is not\n * dismissible unless explicitly enabled.\n */\n @Prop({ reflect: true })\n readonly dismissible: boolean = false;\n\n /**\n * When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n */\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n /**\n * Controls the visibility of the alert. Will animate with fade and collapse.\n */\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n /**\n * When true, the alert will not animate when it is hidden or shown.\n */\n @Prop({ reflect: true })\n readonly hasNoAnimations: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n * @bind hidden\n */\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /**\n * Emitted when the animations complete, detail includes the hidden value.\n */\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n /**\n * Emitted when the close button is clicked.\n */\n @Event()\n closeClicked: EventEmitter<void>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * Used for 2 way binding with the hidden property.\n * Triggers open and close animations.\n * @param {boolean} hidden - The visibility state of the alert.\n */\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n\n await this.updateVisibility(hidden);\n this.hiddenChangedComplete.emit(hidden);\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles the dismissal of the alert, considering the preventAutoClose prop.\n * Passes the original event from the close button to the close event detail.\n * @param {MouseEvent} originalEvent - The original event from the close button.\n */\n private handleDismiss = () => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit();\n };\n\n /**\n * By default an icon is linked to the feedback type\n * @returns {string} - The default icon name.\n */\n private getDefaultIcon = () => {\n switch (this.feedback) {\n case FeedbackColors.Warning:\n return 'alert-circle';\n case FeedbackColors.Information:\n return 'info-circle';\n case FeedbackColors.Success:\n return 'circle-check';\n case FeedbackColors.Error:\n return 'alert-circle';\n case FeedbackColors.Neutral:\n return 'help';\n default:\n return 'info-circle';\n }\n };\n\n /**\n * Updates the visibility state of the alert with optional animations\n * @param {boolean} hidden - Whether the alert should be hidden\n */\n private async updateVisibility(hidden: boolean) {\n if (this.hasNoAnimations) {\n this.toggleHiddenClass(hidden);\n return;\n }\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden) {\n await timeline(fadeOut, collapse).start();\n this.toggleHiddenClass(true);\n } else {\n this.toggleHiddenClass(false);\n await timeline(expand, fadeIn).start();\n }\n }\n\n /**\n * Toggles the 'hidden' class on the element\n * @param {boolean} hidden - Whether to add or remove the hidden class\n */\n private toggleHiddenClass(hidden: boolean) {\n this.ref.classList.toggle('hidden', hidden);\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.color) {\n switch (this.color) {\n case 'primary' as DeprecatedSemanticColors:\n this.feedback = 'warning' as FeedbackColors;\n break;\n case 'secondary' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n case 'neutral' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n default:\n this.feedback = this.color as FeedbackColors;\n }\n }\n\n if (this.hidden) {\n this.ref.classList.add('hidden');\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n <nv-icon\n name={this.icon ?? this.getDefaultIcon()}\n class={`icon-${this.feedback}`}\n size=\"md\"\n ></nv-icon>\n\n <div class=\"content\">\n {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n {this.message && <p class=\"message\">{this.message}</p>}\n\n <slot></slot>\n </div>\n\n {this.dismissible && (\n <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
|
|
1
|
+
{"file":"nv-alert.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,UAAU,GAAG,46HAA46H,CAAC;AACh8H,sBAAe,UAAU;;MCyBZ,OAAO;IALpB;;;;;;;;;;;QA4CE,aAAQ,GAAwB,aAAa,CAAC;;;;;QA0BrC,gBAAW,GAAY,KAAK,CAAC;;;;;QAO7B,qBAAgB,GAAY,KAAK,CAAC;;;;QAM3C,WAAM,GAAY,KAAK,CAAC;;;;QAMf,oBAAe,GAAY,KAAK,CAAC;;;;;;;;;QAoDlC,kBAAa,GAAG;YACtB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;gBAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;aACpB;YAED,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;SAC1B,CAAC;;;;;QAMM,mBAAc,GAAG;YACvB,QAAQ,IAAI,CAAC,QAAQ;gBACnB,KAAKA,wBAAc,CAAC,OAAO;oBACzB,OAAO,cAAc,CAAC;gBACxB,KAAKA,wBAAc,CAAC,WAAW;oBAC7B,OAAO,aAAa,CAAC;gBACvB,KAAKA,wBAAc,CAAC,OAAO;oBACzB,OAAO,cAAc,CAAC;gBACxB,KAAKA,wBAAc,CAAC,KAAK;oBACvB,OAAO,cAAc,CAAC;gBACxB,KAAKA,wBAAc,CAAC,OAAO;oBACzB,OAAO,MAAM,CAAC;gBAChB;oBACE,OAAO,aAAa,CAAC;aACxB;SACF,CAAC;KAyFH;IA/OC,mBAAmB;QACjB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QAAQ,IAAI,CAAC,KAAK;gBAChB,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,SAA2B,CAAC;oBAC5C,MAAM;gBACR,KAAK,WAAuC;oBAC1C,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR;oBACE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAuB,CAAC;aAChD;SACF;KACF;;;;;;;;;IA2FD,MAAM,kBAAkB,CAAC,MAAe;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAEhC,MAAM,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACpC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACzC;;;;;IA4CO,MAAM,gBAAgB,CAAC,MAAe;QAC5C,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;YAC/B,OAAO;SACR;QAED,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAGC,sBAAO,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QACjE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAGC,8BAAW,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QAEtE,IAAI,MAAM,EAAE;YACV,MAAMC,2BAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;YAC1C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;SAC9B;aAAM;YACL,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;YAC9B,MAAMA,2BAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;SACxC;KACF;;;;;IAMO,iBAAiB,CAAC,MAAe;QACvC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;KAC7C;;;;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QAAQ,IAAI,CAAC,KAAK;gBAChB,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,SAA2B,CAAC;oBAC5C,MAAM;gBACR,KAAK,WAAuC;oBAC1C,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR;oBACE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAuB,CAAC;aAChD;SACF;QAED,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;SAClC;KACF;;;;IAMD,MAAM;;QACJ,QACEC,QAACC,UAAI,qDAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAEC,SAAI,CAAC,MAAM,EAAE,YAAY,IAAI,CAAC,QAAQ,EAAE,CAAC,IACjEF,sEACE,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,CAAC,cAAc,EAAE,EACxC,KAAK,EAAE,QAAQ,IAAI,CAAC,QAAQ,EAAE,EAC9B,IAAI,EAAC,IAAI,GACA,EAEXA,kEAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,IAAIA,gEAAG,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EAErD,IAAI,CAAC,OAAO,IAAIA,gEAAG,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EAEtDA,oEAAa,CACT,EAEL,IAAI,CAAC,WAAW,KACfA,qEAAQ,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IAC7DA,sEAAS,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,GAAG,CACvB,CACV,CACI,EACP;KACH;;;;;;;;;;","names":["FeedbackColors","useFade","useCollapse","timeline","h","Host","clsx"],"sources":["src/components/nv-alert/nv-alert.scss?tag=nv-alert","src/components/nv-alert/nv-alert.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$alert-feedback: (\"information\", \"warning\", \"error\", \"success\", \"neutral\");\n\n/* Define maps for feedback-related variables */\n$components-alert-background: (\n \"information\": var(--components-alert-information-background),\n \"warning\": var(--components-alert-warning-background),\n \"error\": var(--components-alert-error-background),\n \"success\": var(--components-alert-success-background),\n \"neutral\": var(--components-alert-neutral-background)\n);\n\n$components-alert-border: (\n \"information\": var(--components-alert-information-border),\n \"warning\": var(--components-alert-warning-border),\n \"error\": var(--components-alert-error-border),\n \"success\": var(--components-alert-success-border),\n \"neutral\": var(--components-alert-neutral-border)\n);\n\n$components-alert-icon: (\n \"information\": var(--components-alert-information-icon),\n \"warning\": var(--components-alert-warning-icon),\n \"error\": var(--components-alert-error-icon),\n \"success\": var(--components-alert-success-icon),\n \"neutral\": var(--components-alert-neutral-icon)\n);\n\n@mixin root-styles() {\n display: flex !important; // override the display: none in [hidden] css\n align-items: flex-start;\n position: relative;\n gap: var(--alert-gap-x);\n border-radius: var(--alert-radius);\n font-family: \"TT Norms Pro\", \"Montserrat\", sans-serif;\n}\n\n@mixin content-styles() {\n display: flex;\n padding: var(--alert-padding);\n padding-right: calc(var(--alert-padding) + var(--icon-md) + var(--spacing-1));\n padding-left: 0;\n flex-direction: column;\n gap: var(--alert-gap-y);\n}\n\n@mixin feedback-color($feedback-type) {\n background-color: map.get($components-alert-background, $feedback-type);\n border: 1px solid map.get($components-alert-border, $feedback-type) !important;\n}\n\n@mixin icon-color($feedback-type) {\n color: map.get($components-alert-icon, $feedback-type);\n}\n\n@mixin icon-position {\n margin-left: var(--alert-icon-position-x);\n margin-top: var(--alert-icon-position-y);\n}\n\nnv-alert {\n @include root-styles();\n\n & > nv-icon {\n @include icon-position();\n }\n\n &.hidden {\n display: none!important;\n }\n\n @each $feedback in $alert-feedback {\n &.feedback-#{$feedback} {\n @include feedback-color($feedback);\n & > .close {\n @include focus-ring(map.get($components-alert-border, $feedback));\n }\n }\n }\n\n @each $feedback in $alert-feedback {\n & > nv-icon.icon-#{$feedback} {\n @include icon-color($feedback);\n }\n }\n\n & > .content {\n @include content-styles();\n\n & > .heading {\n color: var(--components-alert-content-title);\n font-size: var(--alert-heading-font-size);\n line-height: var(--alert-heading-line-height);\n font-weight: var(--alert-heading-font-weight);\n }\n & > .message {\n color: var(--components-alert-content-description);\n font-size: var(--alert-message-font-size);\n line-height: var(--alert-message-line-height);\n }\n }\n & > .close {\n border-radius: var(--alert-radius);\n position: absolute;\n display: flex;\n top: var(--alert-icon-position-y);\n right: var(--alert-icon-position-x);\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n DeprecatedSemanticColors,\n FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\n\n/**\n * @slot default - Use this slot to insert HTML into the alert content.\n */\n@Component({\n tag: 'nv-alert',\n styleUrl: 'nv-alert.scss',\n shadow: false,\n})\nexport class NvAlert {\n @Element() ref: HTMLNvAlertElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Defines color of the alert.\n * @deprecated use feedback instead.\n */\n @Prop({ reflect: true })\n readonly color: `${DeprecatedSemanticColors}`;\n\n componentWillRender() {\n if (this.color) {\n switch (this.color) {\n case 'primary' as DeprecatedSemanticColors:\n this.feedback = 'warning' as FeedbackColors;\n break;\n case 'secondary' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n case 'neutral' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n default:\n this.feedback = this.color as FeedbackColors;\n }\n }\n }\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Specifies the alert type which determines the color and default icon.\n */\n @Prop({ reflect: true, mutable: true })\n feedback: `${FeedbackColors}` = 'information';\n\n /**\n * Main content of the alert. For more complex content, use the default slot\n * instead.\n */\n @Prop({ reflect: true })\n readonly message: string;\n\n /**\n * Short and concise text for the alert title.\n */\n @Prop({ reflect: true })\n readonly heading: string;\n\n /**\n * Icon associated with the alert, defaults vary based on the feedback type.\n */\n @Prop({ reflect: true })\n readonly icon: string;\n\n /**\n * Allows the alert to be dismissed via a close button (x). The alert is not\n * dismissible unless explicitly enabled.\n */\n @Prop({ reflect: true })\n readonly dismissible: boolean = false;\n\n /**\n * When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n */\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n /**\n * Controls the visibility of the alert. Will animate with fade and collapse.\n */\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n /**\n * When true, the alert will not animate when it is hidden or shown.\n */\n @Prop({ reflect: true })\n readonly hasNoAnimations: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n * @bind hidden\n */\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /**\n * Emitted when the animations complete, detail includes the hidden value.\n */\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n /**\n * Emitted when the close button is clicked.\n */\n @Event()\n closeClicked: EventEmitter<void>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * Used for 2 way binding with the hidden property.\n * Triggers open and close animations.\n * @param {boolean} hidden - The visibility state of the alert.\n */\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n\n await this.updateVisibility(hidden);\n this.hiddenChangedComplete.emit(hidden);\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles the dismissal of the alert, considering the preventAutoClose prop.\n * Passes the original event from the close button to the close event detail.\n * @param {MouseEvent} originalEvent - The original event from the close button.\n */\n private handleDismiss = () => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit();\n };\n\n /**\n * By default an icon is linked to the feedback type\n * @returns {string} - The default icon name.\n */\n private getDefaultIcon = () => {\n switch (this.feedback) {\n case FeedbackColors.Warning:\n return 'alert-circle';\n case FeedbackColors.Information:\n return 'info-circle';\n case FeedbackColors.Success:\n return 'circle-check';\n case FeedbackColors.Error:\n return 'alert-circle';\n case FeedbackColors.Neutral:\n return 'help';\n default:\n return 'info-circle';\n }\n };\n\n /**\n * Updates the visibility state of the alert with optional animations\n * @param {boolean} hidden - Whether the alert should be hidden\n */\n private async updateVisibility(hidden: boolean) {\n if (this.hasNoAnimations) {\n this.toggleHiddenClass(hidden);\n return;\n }\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden) {\n await timeline(fadeOut, collapse).start();\n this.toggleHiddenClass(true);\n } else {\n this.toggleHiddenClass(false);\n await timeline(expand, fadeIn).start();\n }\n }\n\n /**\n * Toggles the 'hidden' class on the element\n * @param {boolean} hidden - Whether to add or remove the hidden class\n */\n private toggleHiddenClass(hidden: boolean) {\n this.ref.classList.toggle('hidden', hidden);\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.color) {\n switch (this.color) {\n case 'primary' as DeprecatedSemanticColors:\n this.feedback = 'warning' as FeedbackColors;\n break;\n case 'secondary' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n case 'neutral' as DeprecatedSemanticColors:\n this.feedback = 'information' as FeedbackColors;\n break;\n default:\n this.feedback = this.color as FeedbackColors;\n }\n }\n\n if (this.hidden) {\n this.ref.classList.add('hidden');\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n <nv-icon\n name={this.icon ?? this.getDefaultIcon()}\n class={`icon-${this.feedback}`}\n size=\"md\"\n ></nv-icon>\n\n <div class=\"content\">\n {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n {this.message && <p class=\"message\">{this.message}</p>}\n\n <slot></slot>\n </div>\n\n {this.dismissible && (\n <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
|
|
@@ -168,6 +168,9 @@ const NvFielddropdownitemcheck = class {
|
|
|
168
168
|
* Disables the item, preventing any user interaction.
|
|
169
169
|
*/
|
|
170
170
|
this.disabled = false;
|
|
171
|
+
//#endregion EVENTS
|
|
172
|
+
/****************************************************************************/
|
|
173
|
+
//#region METHODS
|
|
171
174
|
/**
|
|
172
175
|
* when the child <nv-fieldcheckbox> change its `checked` state,
|
|
173
176
|
* update `this.checked` and emit `itemChecked`.
|
|
@@ -196,8 +199,11 @@ const NvFielddropdownitemcheck = class {
|
|
|
196
199
|
}
|
|
197
200
|
};
|
|
198
201
|
}
|
|
202
|
+
//#endregion METHODS
|
|
203
|
+
/****************************************************************************/
|
|
204
|
+
//#region RENDER
|
|
199
205
|
render() {
|
|
200
|
-
return (index.h(index.Host, { key: '
|
|
206
|
+
return (index.h(index.Host, { key: 'cb922f0c0224c950ab5a87783028f2909eb1e39c', onClick: this.handleClick }, index.h("nv-fieldcheckbox", { key: '6f8748022131a8cd31b0f69851313f80c330172a', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, index.h("slot", { key: '20d1014accc6cfc00658703057b25037175287af' }), index.h("slot", { key: 'a7e61eed6bc72d3a14096cac2c195629a0ce2928', name: "main" }), index.h("slot", { key: '93f6bce370ac36f1ce3e0f2c1d9cdd598c14cb14', name: "label" }), index.h("slot", { key: '837359fc1fea49e0dea221039dc7466cdc86b757', name: "description" }))));
|
|
201
207
|
}
|
|
202
208
|
get el() { return index.getElement(this); }
|
|
203
209
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nv-badge.nv-fielddropdownitemcheck.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,UAAU,GAAG,0sbAA0sb,CAAC;AAC9tb,sBAAe,UAAU;;MCsBZ,OAAO;IALpB;;;;;;;;;;;QAgBW,cAAS,GAAY,KAAK,CAAC;;;;;;;;;;;QA4B3B,UAAK,GAAY,GAAG,CAAC;;;;QAMrB,UAAK,GAAmB,IAAI,CAAC;;;;QAMtC,aAAQ,GAAmB,IAAI,CAAC;;;;QAMhC,gBAAW,GAAY,KAAK,CAAC;;;;QAM7B,WAAM,GAAY,KAAK,CAAC;;;;;QASf,qBAAgB,GAAY,KAAK,CAAC;;;;;QAOlC,eAAU,GAAa,KAAK,CAAC;;;;;;;QAoGrB,gBAAW,GAAG;YAC7B,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;gBAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;aACpB;YAED,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;SAC1B,CAAC;KAmCH;;;;;;;;IA3GC,qBAAqB,CAAC,SAAkB;QACtC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;KAC9B;;;;;IAOD,gBAAgB,CAAC,IAAY;QAC3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;;;;;IAOD,MAAM,kBAAkB,CAAC,MAAe;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI;YAAE,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;QAErD,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAGA,sBAAO,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QACjE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAGC,8BAAW,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QAEtE,IAAI,MAAM,KAAK,IAAI;YAAE,MAAMC,2BAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;QAC/D,IAAI,MAAM,KAAK,KAAK;YAAE,MAAMA,2BAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;QAE7D,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAExC,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK;YAAE,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;KACvD;;;;;;;IASD,iBAAiB;QACf,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;SACnC;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE;YACxC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;SAC3B;QAED,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,MAAM,EAAE,YAAY,EAAE,GAAGD,8BAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,MAAM,EAAE,UAAU,EAAE,GAAGD,sBAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAEzC,YAAY,EAAE,CAAC;YACf,UAAU,EAAE,CAAC;SACd;KACF;;;;IAqBD,MAAM;QACJ,QACEG,QAACC,UAAI,qDACH,KAAK,EAAEC,SAAI,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,EAAE;gBACjC,WAAW,EAAE,IAAI,CAAC,WAAW;gBAC7B,UAAU,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK;gBAC1C,iBAAiB,EAAE,IAAI,CAAC,SAAS;gBACjC,cAAc,EAAE,IAAI,CAAC,UAAU;aAChC,CAAC,IAEFF,mEAAM,IAAI,EAAC,cAAc,IACtB,IAAI,CAAC,QAAQ,IAAIA,sEAAS,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,IAAI,GAAW,CAC/D,EAEPA,mEAAM,KAAK,EAAEE,SAAI,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,IACtD,IAAI,CAAC,KAAK,EACXF,oEAAa,CACR,EAEN,IAAI,CAAC,WAAW,KACfA,qEAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,IAC5DA,sEAAS,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,GAAG,CACvB,CACV,CACI,EACP;KACH;;;;;;;;;;AChPH,MAAM,2BAA2B,GAAG,yWAAyW,CAAC;AAC9Y,uCAAe,2BAA2B;;MCoB7B,wBAAwB;IALrC;;;;;;;;QAeE,YAAO,GAAY,KAAK,CAAC;;;;QA+BhB,aAAQ,GAAY,KAAK,CAAC;;;;;;QA+B3B,2BAAsB,GAAG,CAAC,KAA2B;YAC3D,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;;YAE1B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;YAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAC;;QAGM,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE;gBAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;aACtB;iBAAM;gBACL,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;aACrB;SACF,CAAC;KAuBH;IArBC,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAC7BD,+EACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAC/B,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAC,IAAI,EACb,gBAAgB,EAAE,IAAI,CAAC,sBAAsB,IAE7CA,oEAAa,EACbA,mEAAM,IAAI,EAAC,MAAM,GAAQ,EACzBA,mEAAM,IAAI,EAAC,OAAO,GAAQ,EAC1BA,mEAAM,IAAI,EAAC,aAAa,GAAQ,CACf,CACd,EACP;KACH;;;;;;;;","names":["useFade","useCollapse","timeline","h","Host","clsx"],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.scss?tag=nv-fielddropdownitemcheck","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../nv-icon/styles/mixins' as icon;\n@use '../../styles/utils' as utils;\n@import '../../styles/focus-ring';\n\n/* Variants */\n$badge-colors: (\n '1',\n '2',\n '3',\n '4',\n '5',\n '6',\n '7',\n '8',\n '9',\n '10',\n 'error',\n 'information',\n 'neutral',\n 'success',\n 'warning',\n 'amber',\n 'orange',\n 'turquoise',\n 'crimson',\n 'lime',\n 'petrol',\n);\n\n/* Define maps for color-related variables */\n$color-rainbow-text: (\n '1': var(--color-rainbow-1-text),\n '2': var(--color-rainbow-2-text),\n '3': var(--color-rainbow-3-text),\n '4': var(--color-rainbow-4-text),\n '5': var(--color-rainbow-5-text),\n '6': var(--color-rainbow-6-text),\n '7': var(--color-rainbow-7-text),\n '8': var(--color-rainbow-8-text),\n '9': var(--color-rainbow-9-text),\n '10': var(--color-rainbow-10-text),\n 'error': var(--color-feedback-error-low-text),\n 'information': var(--color-feedback-information-low-text),\n 'neutral': var(--color-feedback-neutral-low-text),\n 'success': var(--color-feedback-success-low-text),\n 'warning': var(--color-feedback-warning-low-text),\n 'amber': var(--color-rainbow-1-text),\n 'orange': var(--color-rainbow-2-text),\n 'turquoise': var(--color-rainbow-5-text),\n 'crimson': var(--color-rainbow-6-text),\n 'lime': var(--color-rainbow-9-text),\n 'petrol': var(--color-rainbow-8-text),\n);\n\n$color-rainbow-icon: (\n '1': var(--color-rainbow-1-icon),\n '2': var(--color-rainbow-2-icon),\n '3': var(--color-rainbow-3-icon),\n '4': var(--color-rainbow-4-icon),\n '5': var(--color-rainbow-5-icon),\n '6': var(--color-rainbow-6-icon),\n '7': var(--color-rainbow-7-icon),\n '8': var(--color-rainbow-8-icon),\n '9': var(--color-rainbow-9-icon),\n '10': var(--color-rainbow-10-icon),\n 'error': var(--color-feedback-error-low-icon),\n 'information': var(--color-feedback-information-low-icon),\n 'neutral': var(--color-feedback-neutral-low-icon),\n 'success': var(--color-feedback-success-low-icon),\n 'warning': var(--color-feedback-warning-low-icon),\n 'amber': var(--color-rainbow-1-icon),\n 'orange': var(--color-rainbow-2-icon),\n 'turquoise': var(--color-rainbow-5-icon),\n 'crimson': var(--color-rainbow-6-icon),\n 'lime': var(--color-rainbow-9-icon),\n 'petrol': var(--color-rainbow-8-icon),\n);\n\n$color-rainbow-background: (\n '1': var(--color-rainbow-1-background),\n '2': var(--color-rainbow-2-background),\n '3': var(--color-rainbow-3-background),\n '4': var(--color-rainbow-4-background),\n '5': var(--color-rainbow-5-background),\n '6': var(--color-rainbow-6-background),\n '7': var(--color-rainbow-7-background),\n '8': var(--color-rainbow-8-background),\n '9': var(--color-rainbow-9-background),\n '10': var(--color-rainbow-10-background),\n 'error': var(--color-feedback-error-low-background),\n 'information': var(--color-feedback-information-low-background),\n 'neutral': var(--color-feedback-neutral-low-background),\n 'success': var(--color-feedback-success-low-background),\n 'warning': var(--color-feedback-warning-low-background),\n 'amber': var(--color-rainbow-1-background),\n 'orange': var(--color-rainbow-2-background),\n 'turquoise': var(--color-rainbow-5-background),\n 'crimson': var(--color-rainbow-6-background),\n 'lime': var(--color-rainbow-9-background),\n 'petrol': var(--color-rainbow-8-background),\n);\n$color-rainbow-border: (\n '1': var(--color-rainbow-1-border),\n '2': var(--color-rainbow-2-border),\n '3': var(--color-rainbow-3-border),\n '4': var(--color-rainbow-4-border),\n '5': var(--color-rainbow-5-border),\n '6': var(--color-rainbow-6-border),\n '7': var(--color-rainbow-7-border),\n '8': var(--color-rainbow-8-border),\n '9': var(--color-rainbow-9-border),\n '10': var(--color-rainbow-10-border),\n 'error': var(--color-feedback-error-low-border),\n 'information': var(--color-feedback-information-low-border),\n 'neutral': var(--color-feedback-neutral-low-border),\n 'success': var(--color-feedback-success-low-border),\n 'warning': var(--color-feedback-warning-low-border),\n 'amber': var(--color-rainbow-1-border),\n 'orange': var(--color-rainbow-2-border),\n 'turquoise': var(--color-rainbow-5-border),\n 'crimson': var(--color-rainbow-6-border),\n 'lime': var(--color-rainbow-9-border),\n 'petrol': var(--color-rainbow-8-border),\n);\n\n@mixin root-styles() {\n padding: var(--badge-padding-y) var(--badge-padding-x);\n display: inline-flex !important; // override the display: none in [hidden] css\n gap: var(--badge-gap-x);\n vertical-align: middle;\n align-items: center;\n border-radius: var(--radius-rounded-full);\n border-style: solid;\n border-width: 0.5px;\n height: fit-content;\n width: fit-content;\n\n &.is-icon-only {\n padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);\n gap: var(--badge-gap-icon-only-x);\n }\n}\n\n@mixin root-styles-with-gap() {\n @include root-styles();\n}\n\n@mixin badge-color($color-key) {\n color: map.get($color-rainbow-text, $color-key);\n background-color: map.get($color-rainbow-background, $color-key);\n border-color: map.get($color-rainbow-border, $color-key);\n .close {\n @include focus-ring(\n if(\n str-index('error information neutral success warning', $color-key),\n var(\n --color-feedback-#{$color-key}-low-content,\n map.get($color-rainbow-text, $color-key)\n ),\n if(\n type-of($color-key) == 'string' and not (str-length($color-key) <= 2)\n and not\n str-index('error information neutral success warning', $color-key),\n var(\n --color-#{$color-key}-content,\n map.get($color-rainbow-text, $color-key)\n ),\n var(--color-rainbow-#{$color-key}-content)\n )\n ),\n 0.2\n );\n }\n}\n\n@mixin icon-color($color-key) {\n color: map.get($color-rainbow-icon, $color-key);\n}\n\n@mixin type-settings($font-size, $line-height) {\n font-size: var(--font-size-xs);\n line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n @include root-styles();\n\n //gap styles\n &.with-gap {\n @include root-styles-with-gap();\n }\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n\n &:not(.with-gap) {\n @include root-styles();\n }\n\n // color styles\n @each $i in $badge-colors {\n &.badge-#{$i} {\n @include badge-color($i);\n nv-icon {\n @include icon-color($i);\n }\n }\n }\n\n //label styles\n & span {\n @include type-settings(xs, xs);\n text-align: center;\n }\n\n // nv-icon styles\n & nv-icon > svg {\n @each $size, $config in icon.$size-variants {\n &.icon-#{$size} {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$size-variants, 'xs'), size),\n map.get(map.get(icon.$size-variants, 'xs'), stroke)\n );\n }\n }\n }\n\n .close {\n padding: 0;\n line-height: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: inherit;\n display: inline-flex;\n align-items: center;\n aspect-ratio: 1/1;\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n * @slot default - for custom content, for pure text use label instead.\n */\n@Component({\n tag: 'nv-badge',\n styleUrl: 'nv-badge.scss',\n shadow: false,\n})\nexport class NvBadge {\n @Element() ref: HTMLNvBadgeElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Whether the badge is dismissible.\n * @deprecated use dismissible instead.\n */\n @Prop({ reflect: true })\n readonly dismissal: boolean = false;\n\n /**\n * The icon to display in the badge.\n * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n */\n @Prop({ reflect: true })\n readonly icon: string;\n\n /**\n * The location of the icon in the badge.\n * @deprecated only leadIcon now.\n */\n @Prop({ reflect: true })\n readonly iconLocation: 'left' | 'right';\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * The color of the badge.\n * deprecated Use status values or named colors instead.\n * Use a string between 1 to 10\n * or one of the status values: error, information, neutral, success, warning\n * or one of the color names: amber, orange, turquoise, crimson, lime\n */\n @Prop({ reflect: true })\n readonly color?: string = '1';\n\n /**\n * Main content of the badge.\n */\n @Prop({ reflect: true })\n readonly label?: string | null = null;\n\n /**\n * The lead icon of the badge.\n */\n @Prop({ reflect: true, mutable: true })\n leadIcon?: string | null = null;\n\n /**\n * Whether the badge is dismissible.\n */\n @Prop({ reflect: true, mutable: true })\n dismissible: boolean = false;\n\n /**\n * Controls the visibility of the badge. Will animate with fade and collapse.\n */\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n @State()\n private _isHidden: boolean;\n\n /**\n * When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n */\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n /**\n * When true, the badge will only display an icon without label.\n * The label will be visually hidden but still accessible for screen readers.\n */\n @Prop({ reflect: true })\n readonly isIconOnly?: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the badge is dismissed.\n */\n @Event()\n closeClicked: EventEmitter<void>;\n\n /**\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n */\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /**\n * Emitted when the animations complete, detail includes the hidden value.\n */\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * Handles the dismissal prop change.\n * @param {boolean} dismissal - The new dismissal value.\n */\n @Watch('dismissal')\n handleDismissalChange(dismissal: boolean) {\n this.dismissible = dismissal;\n }\n\n /**\n * Handles the icon prop change.\n * @param {string} icon - The new icon value.\n */\n @Watch('icon')\n handleIconChange(icon: string) {\n this.leadIcon = icon;\n }\n\n /**\n * Handles the hidden prop change.\n * @param {boolean} hidden - The new hidden value.\n */\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n if (this._isHidden === true) this._isHidden = hidden;\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden === true) await timeline(fadeOut, collapse).start();\n if (hidden === false) await timeline(expand, fadeIn).start();\n\n this.hiddenChangedComplete.emit(hidden);\n\n if (this._isHidden === false) this._isHidden = hidden;\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n /**\n * Component will load.\n */\n componentWillLoad() {\n if (this.dismissal) {\n this.dismissible = this.dismissal;\n }\n\n if (this.icon != null && this.icon != '') {\n this.leadIcon = this.icon;\n }\n\n if (this.hidden) {\n this._isHidden = true;\n const { setCollapsed } = useCollapse(this.ref);\n const { setFadeOut } = useFade(this.ref);\n\n setCollapsed();\n setFadeOut();\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles the close button click.\n */\n private readonly handleClose = () => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit();\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`badge-${this.color}`, {\n 'has-close': this.dismissible,\n 'with-gap': this.dismissible || this.label,\n 'visually-hidden': this._isHidden,\n 'is-icon-only': this.isIconOnly,\n })}\n >\n <slot name=\"leading-icon\">\n {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n </slot>\n\n <span class={clsx({ 'visually-hidden': this.isIconOnly })}>\n {this.label}\n <slot></slot>\n </span>\n\n {this.dismissible && (\n <button onClick={this.handleClose} class=\"close\" type=\"button\">\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n","nv-fielddropdownitemcheck {\n slot-fb,\n span {\n all: unset;\n }\n\n cursor: pointer;\n display: flex;\n padding: var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);\n border-radius: var(--list-dropdown-item-radius);\n\n &:hover {\n background-color: var(--components-list-dropdown-item-background-hover);\n }\n}","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\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 */\n@Component({\n tag: 'nv-fielddropdownitemcheck',\n styleUrl: 'nv-fielddropdownitemcheck.scss',\n shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Indicates whether the checkbox is selected.\n */\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /**\n * The value associated with this item.\n */\n @Prop({ reflect: true })\n readonly value?: string;\n\n /**\n * The label displayed alongside the checkbox.\n */\n @Prop({ reflect: true })\n readonly label?: string;\n\n /**\n * A description providing additional context or information about the\n * checkbox.\n */\n @Prop({ reflect: true })\n readonly description?: string;\n\n /**\n * The group this item belongs to, if applicable.\n */\n @Prop({ reflect: true })\n readonly group?: string;\n\n /**\n * Disables the item, preventing any user interaction.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Event emitted when the checkbox is toggled.\n * It provides details about the current state of the item.\n */\n @Event()\n itemChecked: EventEmitter<{\n /**\n * The value associated with this item\n */\n value: string | undefined;\n /**\n * Whether the checkbox is currently checked\n */\n checked: boolean;\n /**\n * The group this item belongs to, if any\n */\n group?: string | undefined;\n }>;\n\n /**\n * when the child <nv-fieldcheckbox> change its `checked` state,\n * update `this.checked` and emit `itemChecked`.\n * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n */\n private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n if (this.disabled) return;\n // NvFieldcheckbox has emitted checkedChanged\n this.checked = event.detail; // get the new state\n this.itemChecked.emit({\n value: this.value,\n checked: this.checked,\n group: this.group,\n });\n };\n\n /** Make sure the checkbox is checked when clicked anywhere in the item. */\n private handleClick = () => {\n if (this.disabled) return;\n if (this.el.querySelector('input').checked) {\n this.checked = false;\n } else {\n this.checked = true;\n }\n };\n\n render() {\n return (\n <Host onClick={this.handleClick}>\n <nv-fieldcheckbox\n checked={this.checked}\n name={this.label || this.value}\n label={this.label || this.value}\n labelPlacement=\"after\"\n description={this.description}\n disabled={this.disabled}\n tabindex=\"-1\"\n onCheckedChanged={this.onFieldcheckboxChanged}\n >\n <slot></slot>\n <slot name=\"main\"></slot>\n <slot name=\"label\"></slot>\n <slot name=\"description\"></slot>\n </nv-fieldcheckbox>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"nv-badge.nv-fielddropdownitemcheck.entry.cjs.js","mappings":"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","names":["useFade","useCollapse","timeline","h","Host","clsx"],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.scss?tag=nv-fielddropdownitemcheck","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../nv-icon/styles/mixins' as icon;\n@use '../../styles/utils' as utils;\n@import '../../styles/focus-ring';\n\n/* Variants */\n$badge-colors: (\n '1',\n '2',\n '3',\n '4',\n '5',\n '6',\n '7',\n '8',\n '9',\n '10',\n 'error',\n 'information',\n 'neutral',\n 'success',\n 'warning',\n 'amber',\n 'orange',\n 'turquoise',\n 'crimson',\n 'lime',\n 'petrol',\n);\n\n/* Define maps for color-related variables */\n$color-rainbow-text: (\n '1': var(--color-rainbow-1-text),\n '2': var(--color-rainbow-2-text),\n '3': var(--color-rainbow-3-text),\n '4': var(--color-rainbow-4-text),\n '5': var(--color-rainbow-5-text),\n '6': var(--color-rainbow-6-text),\n '7': var(--color-rainbow-7-text),\n '8': var(--color-rainbow-8-text),\n '9': var(--color-rainbow-9-text),\n '10': var(--color-rainbow-10-text),\n 'error': var(--color-feedback-error-low-text),\n 'information': var(--color-feedback-information-low-text),\n 'neutral': var(--color-feedback-neutral-low-text),\n 'success': var(--color-feedback-success-low-text),\n 'warning': var(--color-feedback-warning-low-text),\n 'amber': var(--color-rainbow-1-text),\n 'orange': var(--color-rainbow-2-text),\n 'turquoise': var(--color-rainbow-5-text),\n 'crimson': var(--color-rainbow-6-text),\n 'lime': var(--color-rainbow-9-text),\n 'petrol': var(--color-rainbow-8-text),\n);\n\n$color-rainbow-icon: (\n '1': var(--color-rainbow-1-icon),\n '2': var(--color-rainbow-2-icon),\n '3': var(--color-rainbow-3-icon),\n '4': var(--color-rainbow-4-icon),\n '5': var(--color-rainbow-5-icon),\n '6': var(--color-rainbow-6-icon),\n '7': var(--color-rainbow-7-icon),\n '8': var(--color-rainbow-8-icon),\n '9': var(--color-rainbow-9-icon),\n '10': var(--color-rainbow-10-icon),\n 'error': var(--color-feedback-error-low-icon),\n 'information': var(--color-feedback-information-low-icon),\n 'neutral': var(--color-feedback-neutral-low-icon),\n 'success': var(--color-feedback-success-low-icon),\n 'warning': var(--color-feedback-warning-low-icon),\n 'amber': var(--color-rainbow-1-icon),\n 'orange': var(--color-rainbow-2-icon),\n 'turquoise': var(--color-rainbow-5-icon),\n 'crimson': var(--color-rainbow-6-icon),\n 'lime': var(--color-rainbow-9-icon),\n 'petrol': var(--color-rainbow-8-icon),\n);\n\n$color-rainbow-background: (\n '1': var(--color-rainbow-1-background),\n '2': var(--color-rainbow-2-background),\n '3': var(--color-rainbow-3-background),\n '4': var(--color-rainbow-4-background),\n '5': var(--color-rainbow-5-background),\n '6': var(--color-rainbow-6-background),\n '7': var(--color-rainbow-7-background),\n '8': var(--color-rainbow-8-background),\n '9': var(--color-rainbow-9-background),\n '10': var(--color-rainbow-10-background),\n 'error': var(--color-feedback-error-low-background),\n 'information': var(--color-feedback-information-low-background),\n 'neutral': var(--color-feedback-neutral-low-background),\n 'success': var(--color-feedback-success-low-background),\n 'warning': var(--color-feedback-warning-low-background),\n 'amber': var(--color-rainbow-1-background),\n 'orange': var(--color-rainbow-2-background),\n 'turquoise': var(--color-rainbow-5-background),\n 'crimson': var(--color-rainbow-6-background),\n 'lime': var(--color-rainbow-9-background),\n 'petrol': var(--color-rainbow-8-background),\n);\n$color-rainbow-border: (\n '1': var(--color-rainbow-1-border),\n '2': var(--color-rainbow-2-border),\n '3': var(--color-rainbow-3-border),\n '4': var(--color-rainbow-4-border),\n '5': var(--color-rainbow-5-border),\n '6': var(--color-rainbow-6-border),\n '7': var(--color-rainbow-7-border),\n '8': var(--color-rainbow-8-border),\n '9': var(--color-rainbow-9-border),\n '10': var(--color-rainbow-10-border),\n 'error': var(--color-feedback-error-low-border),\n 'information': var(--color-feedback-information-low-border),\n 'neutral': var(--color-feedback-neutral-low-border),\n 'success': var(--color-feedback-success-low-border),\n 'warning': var(--color-feedback-warning-low-border),\n 'amber': var(--color-rainbow-1-border),\n 'orange': var(--color-rainbow-2-border),\n 'turquoise': var(--color-rainbow-5-border),\n 'crimson': var(--color-rainbow-6-border),\n 'lime': var(--color-rainbow-9-border),\n 'petrol': var(--color-rainbow-8-border),\n);\n\n@mixin root-styles() {\n padding: var(--badge-padding-y) var(--badge-padding-x);\n display: inline-flex !important; // override the display: none in [hidden] css\n gap: var(--badge-gap-x);\n vertical-align: middle;\n align-items: center;\n border-radius: var(--radius-rounded-full);\n border-style: solid;\n border-width: 0.5px;\n height: fit-content;\n width: fit-content;\n\n &.is-icon-only {\n padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);\n gap: var(--badge-gap-icon-only-x);\n }\n}\n\n@mixin root-styles-with-gap() {\n @include root-styles();\n}\n\n@mixin badge-color($color-key) {\n color: map.get($color-rainbow-text, $color-key);\n background-color: map.get($color-rainbow-background, $color-key);\n border-color: map.get($color-rainbow-border, $color-key);\n .close {\n @include focus-ring(\n if(\n str-index('error information neutral success warning', $color-key),\n var(\n --color-feedback-#{$color-key}-low-content,\n map.get($color-rainbow-text, $color-key)\n ),\n if(\n type-of($color-key) == 'string' and not (str-length($color-key) <= 2)\n and not\n str-index('error information neutral success warning', $color-key),\n var(\n --color-#{$color-key}-content,\n map.get($color-rainbow-text, $color-key)\n ),\n var(--color-rainbow-#{$color-key}-content)\n )\n ),\n 0.2\n );\n }\n}\n\n@mixin icon-color($color-key) {\n color: map.get($color-rainbow-icon, $color-key);\n}\n\n@mixin type-settings($font-size, $line-height) {\n font-size: var(--font-size-xs);\n line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n @include root-styles();\n\n //gap styles\n &.with-gap {\n @include root-styles-with-gap();\n }\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n\n &:not(.with-gap) {\n @include root-styles();\n }\n\n // color styles\n @each $i in $badge-colors {\n &.badge-#{$i} {\n @include badge-color($i);\n nv-icon {\n @include icon-color($i);\n }\n }\n }\n\n //label styles\n & span {\n @include type-settings(xs, xs);\n text-align: center;\n }\n\n // nv-icon styles\n & nv-icon > svg {\n @each $size, $config in icon.$size-variants {\n &.icon-#{$size} {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$size-variants, 'xs'), size),\n map.get(map.get(icon.$size-variants, 'xs'), stroke)\n );\n }\n }\n }\n\n .close {\n padding: 0;\n line-height: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: inherit;\n display: inline-flex;\n align-items: center;\n aspect-ratio: 1/1;\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n * @slot default - for custom content, for pure text use label instead.\n */\n@Component({\n tag: 'nv-badge',\n styleUrl: 'nv-badge.scss',\n shadow: false,\n})\nexport class NvBadge {\n @Element() ref: HTMLNvBadgeElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Whether the badge is dismissible.\n * @deprecated use dismissible instead.\n */\n @Prop({ reflect: true })\n readonly dismissal: boolean = false;\n\n /**\n * The icon to display in the badge.\n * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n */\n @Prop({ reflect: true })\n readonly icon: string;\n\n /**\n * The location of the icon in the badge.\n * @deprecated only leadIcon now.\n */\n @Prop({ reflect: true })\n readonly iconLocation: 'left' | 'right';\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * The color of the badge.\n * deprecated Use status values or named colors instead.\n * Use a string between 1 to 10\n * or one of the status values: error, information, neutral, success, warning\n * or one of the color names: amber, orange, turquoise, crimson, lime\n */\n @Prop({ reflect: true })\n readonly color?: string = '1';\n\n /**\n * Main content of the badge.\n */\n @Prop({ reflect: true })\n readonly label?: string | null = null;\n\n /**\n * The lead icon of the badge.\n */\n @Prop({ reflect: true, mutable: true })\n leadIcon?: string | null = null;\n\n /**\n * Whether the badge is dismissible.\n */\n @Prop({ reflect: true, mutable: true })\n dismissible: boolean = false;\n\n /**\n * Controls the visibility of the badge. Will animate with fade and collapse.\n */\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n @State()\n private _isHidden: boolean;\n\n /**\n * When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n */\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n /**\n * When true, the badge will only display an icon without label.\n * The label will be visually hidden but still accessible for screen readers.\n */\n @Prop({ reflect: true })\n readonly isIconOnly?: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the badge is dismissed.\n */\n @Event()\n closeClicked: EventEmitter<void>;\n\n /**\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n */\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /**\n * Emitted when the animations complete, detail includes the hidden value.\n */\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * Handles the dismissal prop change.\n * @param {boolean} dismissal - The new dismissal value.\n */\n @Watch('dismissal')\n handleDismissalChange(dismissal: boolean) {\n this.dismissible = dismissal;\n }\n\n /**\n * Handles the icon prop change.\n * @param {string} icon - The new icon value.\n */\n @Watch('icon')\n handleIconChange(icon: string) {\n this.leadIcon = icon;\n }\n\n /**\n * Handles the hidden prop change.\n * @param {boolean} hidden - The new hidden value.\n */\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n if (this._isHidden === true) this._isHidden = hidden;\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden === true) await timeline(fadeOut, collapse).start();\n if (hidden === false) await timeline(expand, fadeIn).start();\n\n this.hiddenChangedComplete.emit(hidden);\n\n if (this._isHidden === false) this._isHidden = hidden;\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n /**\n * Component will load.\n */\n componentWillLoad() {\n if (this.dismissal) {\n this.dismissible = this.dismissal;\n }\n\n if (this.icon != null && this.icon != '') {\n this.leadIcon = this.icon;\n }\n\n if (this.hidden) {\n this._isHidden = true;\n const { setCollapsed } = useCollapse(this.ref);\n const { setFadeOut } = useFade(this.ref);\n\n setCollapsed();\n setFadeOut();\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles the close button click.\n */\n private readonly handleClose = () => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit();\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`badge-${this.color}`, {\n 'has-close': this.dismissible,\n 'with-gap': this.dismissible || this.label,\n 'visually-hidden': this._isHidden,\n 'is-icon-only': this.isIconOnly,\n })}\n >\n <slot name=\"leading-icon\">\n {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n </slot>\n\n <span class={clsx({ 'visually-hidden': this.isIconOnly })}>\n {this.label}\n <slot></slot>\n </span>\n\n {this.dismissible && (\n <button onClick={this.handleClose} class=\"close\" type=\"button\">\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n","nv-fielddropdownitemcheck {\n slot-fb,\n span {\n all: unset;\n }\n\n cursor: pointer;\n display: flex;\n padding: var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);\n border-radius: var(--list-dropdown-item-radius);\n\n &:hover {\n background-color: var(--components-list-dropdown-item-background-hover);\n }\n}","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\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 */\n@Component({\n tag: 'nv-fielddropdownitemcheck',\n styleUrl: 'nv-fielddropdownitemcheck.scss',\n shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Indicates whether the checkbox is selected.\n */\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /**\n * The value associated with this item.\n */\n @Prop({ reflect: true })\n readonly value?: string;\n\n /**\n * The label displayed alongside the checkbox.\n */\n @Prop({ reflect: true })\n readonly label?: string;\n\n /**\n * A description providing additional context or information about the\n * checkbox.\n */\n @Prop({ reflect: true })\n readonly description?: string;\n\n /**\n * The group this item belongs to, if applicable.\n */\n @Prop({ reflect: true })\n readonly group?: string;\n\n /**\n * Disables the item, preventing any user interaction.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Event emitted when the checkbox is toggled.\n * It provides details about the current state of the item.\n */\n @Event()\n itemChecked: EventEmitter<{\n /**\n * The value associated with this item\n */\n value: string | undefined;\n /**\n * Whether the checkbox is currently checked\n */\n checked: boolean;\n /**\n * The group this item belongs to, if any\n */\n group?: string | undefined;\n }>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * when the child <nv-fieldcheckbox> change its `checked` state,\n * update `this.checked` and emit `itemChecked`.\n * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n */\n private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n if (this.disabled) return;\n\n // NvFieldcheckbox has emitted checkedChanged\n this.checked = event.detail; // get the new state\n this.itemChecked.emit({\n value: this.value,\n checked: this.checked,\n group: this.group,\n });\n };\n\n /** Make sure the checkbox is checked when clicked anywhere in the item. */\n private handleClick = () => {\n if (this.disabled) return;\n\n if (this.el.querySelector('input').checked) {\n this.checked = false;\n } else {\n this.checked = true;\n }\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host onClick={this.handleClick}>\n <nv-fieldcheckbox\n checked={this.checked}\n name={this.label || this.value}\n label={this.label || this.value}\n labelPlacement=\"after\"\n description={this.description}\n disabled={this.disabled}\n tabindex=\"-1\"\n onCheckedChanged={this.onFieldcheckboxChanged}\n >\n <slot></slot>\n <slot name=\"main\"></slot>\n <slot name=\"label\"></slot>\n <slot name=\"description\"></slot>\n </nv-fieldcheckbox>\n </Host>\n );\n }\n\n //#endregion RENDER\n /****************************************************************************/\n}\n"],"version":3}
|
|
@@ -13,6 +13,7 @@ const NvFieldmultiselect = class {
|
|
|
13
13
|
index.registerInstance(this, hostRef);
|
|
14
14
|
this.valueChanged = index.createEvent(this, "valueChanged", 7);
|
|
15
15
|
this.filterTextChanged = index.createEvent(this, "filterTextChanged", 7);
|
|
16
|
+
this.isBulkOperation = false;
|
|
16
17
|
/**
|
|
17
18
|
* Sets the ID for the input element and the for attribute of the associated
|
|
18
19
|
* label. If no ID is provided, a random one will be automatically generated
|
|
@@ -120,6 +121,9 @@ const NvFieldmultiselect = class {
|
|
|
120
121
|
this.isSelectAllSectionVisible = true;
|
|
121
122
|
// Add the flag to the class
|
|
122
123
|
this.preventBlurClose = false;
|
|
124
|
+
this.handleMouseDownPreventBlur = () => {
|
|
125
|
+
this.preventBlurClose = true;
|
|
126
|
+
};
|
|
123
127
|
/**
|
|
124
128
|
* Handle badge close for options mode.
|
|
125
129
|
*/
|
|
@@ -306,6 +310,11 @@ const NvFieldmultiselect = class {
|
|
|
306
310
|
*/
|
|
307
311
|
this.handleInputBlurSlots = () => {
|
|
308
312
|
setTimeout(() => {
|
|
313
|
+
// Honor preventBlurClose to avoid closing when interacting inside the popover
|
|
314
|
+
if (this.preventBlurClose) {
|
|
315
|
+
this.preventBlurClose = false;
|
|
316
|
+
return; // Don't close the popover
|
|
317
|
+
}
|
|
309
318
|
if (!this.el.contains(document.activeElement)) {
|
|
310
319
|
// Close the popover without affecting the divider
|
|
311
320
|
this.open = false;
|
|
@@ -342,24 +351,33 @@ const NvFieldmultiselect = class {
|
|
|
342
351
|
this.toggleSelectAllOptions = (selectAll) => {
|
|
343
352
|
if (!this.options)
|
|
344
353
|
return;
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
354
|
+
this.isBulkOperation = true; // Set flag to suppress individual emissions
|
|
355
|
+
try {
|
|
356
|
+
// Get visible and enabled option values from DOM
|
|
357
|
+
const visibleOptionValues = this.getVisibleEnabledOptionItems();
|
|
358
|
+
console.info('[SelectAll][Options] toggleSelectAllOptions called. selectAll:', selectAll, 'visibleOptionValues:', visibleOptionValues, 'Current value:', this.value);
|
|
359
|
+
if (selectAll) {
|
|
360
|
+
// Select all visible options - merge with existing selections
|
|
361
|
+
this.value = [...new Set([...this.value, ...visibleOptionValues])];
|
|
362
|
+
}
|
|
363
|
+
else {
|
|
364
|
+
// Deselect only the visible options, keep others that might be filtered out
|
|
365
|
+
this.value = this.value.filter(val => !visibleOptionValues.includes(val));
|
|
366
|
+
}
|
|
367
|
+
console.info('[SelectAll][Options] New value after toggle:', this.value);
|
|
368
|
+
// Emit the change event
|
|
369
|
+
this.valueChanged.emit(this.value);
|
|
370
|
+
// Synchronize child components
|
|
371
|
+
this.syncChildComponents();
|
|
372
|
+
// Reorder content to move selected items to top
|
|
373
|
+
this.reorderOptionsContent();
|
|
351
374
|
}
|
|
352
|
-
|
|
353
|
-
//
|
|
354
|
-
|
|
375
|
+
finally {
|
|
376
|
+
// Defer reset to next frame to ensure any async child emissions are ignored
|
|
377
|
+
requestAnimationFrame(() => {
|
|
378
|
+
this.isBulkOperation = false; // Reset flag
|
|
379
|
+
});
|
|
355
380
|
}
|
|
356
|
-
console.info('[SelectAll][Options] New value after toggle:', this.value);
|
|
357
|
-
// Emit the change event
|
|
358
|
-
this.valueChanged.emit(this.value);
|
|
359
|
-
// Synchronize child components
|
|
360
|
-
this.syncChildComponents();
|
|
361
|
-
// Reorder content to move selected items to top
|
|
362
|
-
this.reorderOptionsContent();
|
|
363
381
|
};
|
|
364
382
|
/**
|
|
365
383
|
* Toggles the selection state of all non-disabled slot items.
|
|
@@ -368,31 +386,40 @@ const NvFieldmultiselect = class {
|
|
|
368
386
|
this.toggleSelectAllSlots = (selectAll) => {
|
|
369
387
|
if (this.options)
|
|
370
388
|
return; // Only for slots mode
|
|
371
|
-
//
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
389
|
+
this.isBulkOperation = true; // Set flag to suppress individual emissions
|
|
390
|
+
try {
|
|
391
|
+
// Get visible and enabled items
|
|
392
|
+
const items = this.getVisibleEnabledSlotItems();
|
|
393
|
+
console.info('[SelectAll][Slots] toggleSelectAllSlots called. selectAll:', selectAll, 'visible slot items:', items.map(item => item.getAttribute('value') || item.getAttribute('label')), 'Current value:', this.value);
|
|
394
|
+
if (selectAll) {
|
|
395
|
+
// Select all visible items
|
|
396
|
+
const allActiveValues = items
|
|
397
|
+
.map(item => item.getAttribute('value') || item.getAttribute('label') || '')
|
|
398
|
+
.filter(value => value !== '');
|
|
399
|
+
this.value = [...new Set([...this.value, ...allActiveValues])];
|
|
400
|
+
}
|
|
401
|
+
else {
|
|
402
|
+
// Deselect only the visible items, keep others that might be filtered out
|
|
403
|
+
const visibleValues = items
|
|
404
|
+
.map(item => item.getAttribute('value') || item.getAttribute('label') || '')
|
|
405
|
+
.filter(value => value !== '');
|
|
406
|
+
this.value = this.value.filter(val => !visibleValues.includes(val));
|
|
407
|
+
}
|
|
408
|
+
console.info('[SelectAll][Slots] New value after toggle:', this.value);
|
|
409
|
+
// Emit the change event
|
|
410
|
+
this.valueChanged.emit(this.value);
|
|
411
|
+
// Force synchronization with a small delay to ensure DOM is updated
|
|
412
|
+
requestAnimationFrame(() => {
|
|
413
|
+
this.syncChildComponents();
|
|
414
|
+
this.reorderSlotContent();
|
|
415
|
+
});
|
|
380
416
|
}
|
|
381
|
-
|
|
382
|
-
//
|
|
383
|
-
|
|
384
|
-
.
|
|
385
|
-
|
|
386
|
-
this.value = this.value.filter(val => !visibleValues.includes(val));
|
|
417
|
+
finally {
|
|
418
|
+
// Defer reset to next frame to ensure any async child emissions are ignored
|
|
419
|
+
requestAnimationFrame(() => {
|
|
420
|
+
this.isBulkOperation = false; // Reset flag
|
|
421
|
+
});
|
|
387
422
|
}
|
|
388
|
-
console.info('[SelectAll][Slots] New value after toggle:', this.value);
|
|
389
|
-
// Emit the change event
|
|
390
|
-
this.valueChanged.emit(this.value);
|
|
391
|
-
// Force synchronization with a small delay to ensure DOM is updated
|
|
392
|
-
requestAnimationFrame(() => {
|
|
393
|
-
this.syncChildComponents();
|
|
394
|
-
this.reorderSlotContent();
|
|
395
|
-
});
|
|
396
423
|
};
|
|
397
424
|
/**
|
|
398
425
|
* Handle click on the select all checkbox in options mode.
|
|
@@ -444,16 +471,10 @@ const NvFieldmultiselect = class {
|
|
|
444
471
|
width: '0',
|
|
445
472
|
height: '0',
|
|
446
473
|
pointerEvents: 'none',
|
|
447
|
-
}, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusOptions }), index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, "aria-label": this.label, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, index.h("span", null, this.placeholder)))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (index.h("nv-iconbutton", { "data-scope": "clear-filter", name: "x", size: "md", emphasis: "lower", "aria-label": "Clear filter text", tabindex: "-1", title: "Clear filter text", onMouseDown: ()
|
|
448
|
-
this.preventBlurClose = true;
|
|
449
|
-
}, onClick: this.clearFilterText })), index.h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: () => {
|
|
450
|
-
this.preventBlurClose = true;
|
|
451
|
-
}, onClick: this.togglePopoverOptions })), index.h("slot", { name: "after-input" })), index.h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.shouldShowToggleAllOptionsButton() && (index.h("div", { class: "select-all-container" }, index.h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (index.h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateOptions() === 'checked', indeterminate: this.getSelectAllCheckboxStateOptions() ===
|
|
474
|
+
}, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusOptions }), index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, "aria-label": this.label, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, index.h("span", null, this.placeholder)))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (index.h("nv-iconbutton", { "data-scope": "clear-filter", name: "x", size: "md", emphasis: "lower", "aria-label": "Clear filter text", tabindex: "-1", title: "Clear filter text", onMouseDown: this.handleMouseDownPreventBlur, onClick: this.clearFilterText })), index.h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: this.handleMouseDownPreventBlur, onClick: this.togglePopoverOptions })), index.h("slot", { name: "after-input" })), index.h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {}, onMouseDown: this.handleMouseDownPreventBlur }, this.shouldShowToggleAllOptionsButton() && (index.h("div", { class: "select-all-container" }, index.h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (index.h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateOptions() === 'checked', indeterminate: this.getSelectAllCheckboxStateOptions() ===
|
|
452
475
|
'indeterminate', label: this.getSelectAllCheckboxStateOptions() === 'unchecked'
|
|
453
476
|
? this.selectAllLabel
|
|
454
|
-
: this.deselectAllLabel, onMouseDown:
|
|
455
|
-
this.preventBlurClose = true;
|
|
456
|
-
}, onClick: this.handleSelectAllCheckboxOptionsClick }))))), index.h("ul", { role: "listbox", "aria-multiselectable": "true" }, this.options.map(option => (index.h("nv-fielddropdownitemcheck", { role: "option", label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled })))))), this.renderDescriptions()));
|
|
477
|
+
: this.deselectAllLabel, onMouseDown: this.handleMouseDownPreventBlur, onClick: this.handleSelectAllCheckboxOptionsClick }))))), index.h("ul", { role: "listbox", "aria-multiselectable": "true" }, this.options.map(option => (index.h("nv-fielddropdownitemcheck", { role: "option", label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled })))))), this.renderDescriptions()));
|
|
457
478
|
};
|
|
458
479
|
/**
|
|
459
480
|
* Renders the component in slots mode
|
|
@@ -466,16 +487,10 @@ const NvFieldmultiselect = class {
|
|
|
466
487
|
width: '0',
|
|
467
488
|
height: '0',
|
|
468
489
|
pointerEvents: 'none',
|
|
469
|
-
}, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusSlots }), index.h("p", { id: this.inputId, class: "non-filterable-text", "aria-label": this.label, onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, index.h("span", null, this.placeholder)))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (index.h("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onMouseDown: ()
|
|
470
|
-
this.preventBlurClose = true;
|
|
471
|
-
}, onClick: this.clearFilterText, "aria-label": "Clear filter text" })), index.h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: () => {
|
|
472
|
-
this.preventBlurClose = true;
|
|
473
|
-
}, onClick: this.togglePopoverSlots })), index.h("slot", { name: "after-input" })), index.h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.shouldShowToggleAllSlotButton() && (index.h("div", { class: "select-all-container" }, index.h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (index.h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateSlots() === 'checked', indeterminate: this.getSelectAllCheckboxStateSlots() ===
|
|
490
|
+
}, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusSlots }), index.h("p", { id: this.inputId, class: "non-filterable-text", "aria-label": this.label, onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, index.h("span", null, this.placeholder)))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (index.h("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onMouseDown: this.handleMouseDownPreventBlur, onClick: this.clearFilterText, "aria-label": "Clear filter text" })), index.h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: this.handleMouseDownPreventBlur, onClick: this.togglePopoverSlots })), index.h("slot", { name: "after-input" })), index.h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {}, onMouseDown: this.handleMouseDownPreventBlur }, this.shouldShowToggleAllSlotButton() && (index.h("div", { class: "select-all-container" }, index.h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (index.h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateSlots() === 'checked', indeterminate: this.getSelectAllCheckboxStateSlots() ===
|
|
474
491
|
'indeterminate', label: this.getSelectAllCheckboxStateSlots() === 'unchecked'
|
|
475
492
|
? this.selectAllLabel
|
|
476
|
-
: this.deselectAllLabel, onMouseDown:
|
|
477
|
-
this.preventBlurClose = true;
|
|
478
|
-
}, onClick: this.handleSelectAllCheckboxSlotsClick }))))), index.h("slot", { name: "content" }))), this.renderDescriptions()));
|
|
493
|
+
: this.deselectAllLabel, onMouseDown: this.handleMouseDownPreventBlur, onClick: this.handleSelectAllCheckboxSlotsClick }))))), index.h("slot", { name: "content" }))), this.renderDescriptions()));
|
|
479
494
|
};
|
|
480
495
|
}
|
|
481
496
|
//#endregion EVENTS
|
|
@@ -504,7 +519,12 @@ const NvFieldmultiselect = class {
|
|
|
504
519
|
this.reorderOptionsContent();
|
|
505
520
|
}
|
|
506
521
|
watchValueHandler() {
|
|
507
|
-
console.info('[Watch:value] Value changed:', this.value);
|
|
522
|
+
console.info('[Watch:value] Value changed:', this.value, 'isBulkOperation:', this.isBulkOperation);
|
|
523
|
+
// Skip processing during bulk operations
|
|
524
|
+
if (this.isBulkOperation) {
|
|
525
|
+
console.info('[Watch:value] Skipping syncChildComponents and options update due to bulk operation');
|
|
526
|
+
return;
|
|
527
|
+
}
|
|
508
528
|
// Synchronize child components when value changes programmatically
|
|
509
529
|
if (this.el && this.el.isConnected) {
|
|
510
530
|
this.syncChildComponents();
|
|
@@ -549,7 +569,9 @@ const NvFieldmultiselect = class {
|
|
|
549
569
|
* @param {CustomEvent} event - The event object containing the selected value and its checked state.
|
|
550
570
|
*/
|
|
551
571
|
handleItemChecked(event) {
|
|
552
|
-
if (this.disabled || this.readonly) {
|
|
572
|
+
if (this.disabled || this.readonly || this.isBulkOperation) {
|
|
573
|
+
// Skip processing itemChecked events during bulk operations
|
|
574
|
+
console.info('[Event:itemChecked] Skipped due to bulk operation or disabled/readonly', event.detail);
|
|
553
575
|
return;
|
|
554
576
|
}
|
|
555
577
|
const { value, checked } = event.detail;
|
|
@@ -557,21 +579,23 @@ const NvFieldmultiselect = class {
|
|
|
557
579
|
if (value !== undefined && value !== null) {
|
|
558
580
|
const newValue = [...this.value];
|
|
559
581
|
const valueIndex = newValue.indexOf(value);
|
|
582
|
+
let hasChanged = false;
|
|
560
583
|
if (checked && valueIndex === -1) {
|
|
561
584
|
newValue.push(value);
|
|
585
|
+
hasChanged = true;
|
|
562
586
|
}
|
|
563
587
|
else if (!checked && valueIndex > -1) {
|
|
564
588
|
newValue.splice(valueIndex, 1);
|
|
589
|
+
hasChanged = true;
|
|
565
590
|
}
|
|
566
591
|
console.info('[Event:itemChecked] newValue after update:', newValue);
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
592
|
+
if (hasChanged) {
|
|
593
|
+
this.value = newValue;
|
|
594
|
+
this.valueChanged.emit(this.value);
|
|
595
|
+
this.syncChildComponents();
|
|
596
|
+
}
|
|
572
597
|
// Preserve the filter text in the input
|
|
573
598
|
if (this.filterable && this.inputElement) {
|
|
574
|
-
// Keep the current filter text in the input
|
|
575
599
|
this.inputElement.value = this.filterText;
|
|
576
600
|
}
|
|
577
601
|
}
|
|
@@ -599,7 +623,11 @@ const NvFieldmultiselect = class {
|
|
|
599
623
|
*/
|
|
600
624
|
connectedCallback() {
|
|
601
625
|
console.info('[Lifecycle] connectedCallback - value:', this.value);
|
|
602
|
-
|
|
626
|
+
// Bind once and reuse the same reference for add/remove to avoid leaks
|
|
627
|
+
if (!this._boundHandleClickOutside) {
|
|
628
|
+
this._boundHandleClickOutside = this.handleClickOutside.bind(this);
|
|
629
|
+
}
|
|
630
|
+
document.addEventListener('click', this._boundHandleClickOutside);
|
|
603
631
|
}
|
|
604
632
|
/**
|
|
605
633
|
* Set the mode state and handle options change.
|
|
@@ -657,7 +685,9 @@ const NvFieldmultiselect = class {
|
|
|
657
685
|
*/
|
|
658
686
|
disconnectedCallback() {
|
|
659
687
|
console.info('[Lifecycle] disconnectedCallback - value:', this.value);
|
|
660
|
-
|
|
688
|
+
if (this._boundHandleClickOutside) {
|
|
689
|
+
document.removeEventListener('click', this._boundHandleClickOutside);
|
|
690
|
+
}
|
|
661
691
|
}
|
|
662
692
|
//#endregion LIFECYCLE
|
|
663
693
|
/****************************************************************************/
|
|
@@ -1186,13 +1216,23 @@ const NvFieldmultiselect = class {
|
|
|
1186
1216
|
const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
|
|
1187
1217
|
const shouldBeChecked = this.value.includes(itemValue);
|
|
1188
1218
|
console.info('[syncChildComponents] itemValue:', itemValue, 'shouldBeChecked:', shouldBeChecked, 'item.checked(before):', item.checked);
|
|
1189
|
-
if
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1219
|
+
// Only update if the checked state differs to avoid triggering unnecessary events
|
|
1220
|
+
if (item.checked !== shouldBeChecked) {
|
|
1221
|
+
// Set attribute and property, but avoid triggering itemChecked during bulk
|
|
1222
|
+
if (this.isBulkOperation) {
|
|
1223
|
+
// Directly update the DOM attribute to avoid triggering the setter
|
|
1224
|
+
if (shouldBeChecked) {
|
|
1225
|
+
item.setAttribute('checked', '');
|
|
1226
|
+
}
|
|
1227
|
+
else {
|
|
1228
|
+
item.removeAttribute('checked');
|
|
1229
|
+
}
|
|
1230
|
+
// Update internal state without emitting events (assumes nv-fielddropdownitemcheck respects this)
|
|
1231
|
+
item.checked = shouldBeChecked;
|
|
1232
|
+
}
|
|
1233
|
+
else {
|
|
1234
|
+
item.checked = shouldBeChecked;
|
|
1235
|
+
}
|
|
1196
1236
|
}
|
|
1197
1237
|
console.info('[syncChildComponents] itemValue:', itemValue, 'item.checked(after):', item.checked);
|
|
1198
1238
|
});
|