@ngxviewbuilder/runtime 0.12.3 → 0.12.4

package/fesm2022/{ngxviewbuilder-runtime-message-card-element-MG1HDIgX.mjs → ngxviewbuilder-runtime-message-card-element-60xyNliB.mjs}

@@ -1 +1 @@
-import{t as m}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{cn as g,f as p,n as l,on as u}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{Z as _}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import{o as d,r as x,t as b}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs";import*as r from"@angular/core";import{ChangeDetectionStrategy as h,Component as f,computed as t,inject as i,input as k,signal as y}from"@angular/core";import{NgClass as v}from"@angular/common";var w=m({MessageCardElement:()=>o});var o=class c{model=k.required(...ngDevMode?[{debugName:"model"}]:[]);tid=x(this.model,"nvb-message-card","message-card");visible=y(true,...ngDevMode?[{debugName:"visible"}]:[]);elementActionService=i(_);expressionService=i(p);uiTranslationService=i(g);variantClass=t(()=>`nvb-message-card--${this.resolveVariant()}`,...ngDevMode?[{debugName:"variantClass"}]:[]);cardClasses=t(()=>{const e=String(this.model()?.appearance??"soft");return{[this.variantClass()]:true,[`nvb-message-card--appearance-${e==="card"||e==="accent"?e:"soft"}`]:true,"nvb-message-card--actions-inline":this.model()?.actionsLayout==="inline","nvb-message-card--dismissible":Boolean(this.model()?.dismissible),"nvb-message-card--no-icon":!this.model()?.showIcon}},...ngDevMode?[{debugName:"cardClasses"}]:[]);iconName=t(()=>{const e=String(this.model()?.icon??"").trim();if(e)return e;switch(this.resolveVariant()){case"primary":return"bolt";case"success":return"check_circle";case"warn":return"warning";case"risk":return"error";case"neutral":return"info_outline";default:return"info"}},...ngDevMode?[{debugName:"iconName"}]:[]);buttonActions=t(()=>(Array.isArray(this.model()?.events)?this.model().events:[]).filter(e=>String(e?.trigger??"click").trim().toLowerCase()==="click"&&String(e?.label??"").trim().length>0).map((e,n)=>this.normalizeButtonAction(e,n)),...ngDevMode?[{debugName:"buttonActions"}]:[]);ngOnInit(){this.visible.set(Boolean(this.model()?.initiallyVisible??true));if(u.isEditor())this.visible.set(true)}onActionClick(e,n){e.preventDefault();e.stopPropagation();const a=this.buildRuntimeContext("click");this.elementActionService.runAction(this.model(),n,a)}onDismiss(e){e.preventDefault();e.stopPropagation();if(this.model().dismissible)this.visible.set(false);this.elementActionService.runActions(this.model(),this.model().events??[],"click",this.buildRuntimeContext("dismiss"))}resolvedTitle(){const e=String(this.model()?.title??"").trim();return e==="Information"?this.uiTranslationService.translate("messageCard.titleDefault","Information"):e}resolvedDescription(){const e=String(this.model()?.descriptionText??"").trim();return e==="Message details"?this.uiTranslationService.translate("messageCard.descriptionDefault","Message details"):e}dismissLabel(){return this.uiTranslationService.translate("common.dismiss","Dismiss")}messageAriaLive(){const e=this.resolveVariant();return e==="risk"||e==="warn"?"assertive":"polite"}messageRole(){return this.messageAriaLive()==="assertive"?"alert":"status"}resolveActionButtonClass(e,n=0){const a=this.normalizeActionButtonVariant(e?.buttonVariant);const s=String(e?.buttonTone??"accent");return{"nvb-message-card__button--accent":s==="accent","nvb-message-card__button--filled":a==="filled","nvb-message-card__button--outlined":a==="outlined","nvb-message-card__button--text":a==="text","nvb-message-card__button--primary":s==="primary","nvb-message-card__button--risk":s==="risk","nvb-message-card__button--neutral":s==="neutral"}}buildRuntimeContext(e){const n={action:e,value:this.model().value,item:null,row:null};const a=String(this.model().name??"").trim();if(a)n[a]=this.model().value;return n}resolveVariant(){const e=this.resolveConditionalVariant()||this.resolveExpressionValue(this.model()?.variantExpression)||String(this.model()?.variant??"info");const n=String(e).trim().toLowerCase();if(n==="neutral")return"neutral";if(n==="success")return"success";if(n==="warn"||n==="warning")return"warn";if(n==="risk"||n==="danger"||n==="error")return"risk";if(n==="primary")return"primary";return"info"}resolveConditionalVariant(){if(String(this.model()?.variantMode??"static").trim().toLowerCase()!=="conditional")return"";const e=Array.isArray(this.model()?.variantRules)?this.model().variantRules:[];for(const n of e){const a=String(n?.condition??"").trim();if(!a)continue;if(Boolean(this.expressionService.evaluateInlineExpression(a,this.model())))return String(n?.variant??"").trim()}return""}resolveExpressionValue(e){const n=String(e??"").trim();if(!n)return"";const a=this.expressionService.evaluateInlineExpression(n,this.model());return String(a??"").trim()}normalizeButtonAction(e,n){const a=String(e?.buttonVariant??"").trim().length>0;const s=String(e?.buttonTone??"").trim().length>0;return{...e,label:String(e?.label??"").trim(),trigger:"click",buttonVariant:a?this.normalizeActionButtonVariant(e?.buttonVariant):n===0?"filled":"outlined",buttonTone:s?this.normalizeActionButtonTone(e?.buttonTone):n===0?"accent":"neutral"}}normalizeActionButtonVariant(e){const n=String(e??"").trim().toLowerCase();if(n==="filled"||n==="solid")return"filled";if(n==="text")return"text";return"outlined"}normalizeActionButtonTone(e){const n=String(e??"").trim().toLowerCase();if(n==="primary")return"primary";if(n==="risk"||n==="danger"||n==="error")return"risk";return"neutral"}static ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:c,deps:[],target:r.ɵɵFactoryTarget.Component});static ɵcmp=r.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:c,isStandalone:true,selector:"message-card-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:r,template:"<element-wrapper [model]=\"model()\">\n  @if (visible()) {\n    <article\n      class=\"nvb-message-card\"\n      [ngClass]=\"cardClasses()\"\n      [attr.data-testid]=\"tid('root')\"\n      [attr.role]=\"messageRole()\"\n      [attr.aria-live]=\"messageAriaLive()\"\n    >\n      @if (model().showIcon) {\n        <span class=\"nvb-message-card__icon\" aria-hidden=\"true\">\n          <nvb-icon [name]=\"iconName()\"></nvb-icon>\n        </span>\n      }\n\n      <div class=\"nvb-message-card__body\">\n        <div class=\"nvb-message-card__text\">\n          @if (resolvedTitle()) {\n            <h4 class=\"nvb-message-card__title\">{{ resolvedTitle() | dynamicText: model() }}</h4>\n          }\n          <!-- No whitespace inside: the description keeps line breaks (pre-line) and the\n               template's own indentation used to push it right of the title. -->\n          @if (resolvedDescription()) {\n            <p class=\"nvb-message-card__description\">{{ resolvedDescription() | dynamicText: model() }}</p>\n          }\n        </div>\n\n        @if (buttonActions().length) {\n          <div class=\"nvb-message-card__actions\" [attr.data-testid]=\"tid('actions')\">\n            @for (action of buttonActions(); track action.id || $index) {\n              <button\n                type=\"button\"\n                class=\"nvb-message-card__button\"\n                [ngClass]=\"resolveActionButtonClass(action, $index)\"\n                (click)=\"onActionClick($event, action)\"\n                [attr.data-testid]=\"tid('action', $index)\"\n              >\n                @if (action.icon) {\n                  <nvb-icon [name]=\"action.icon\"></nvb-icon>\n                }\n                <span>{{ action.label | dynamicText: model() }}</span>\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      @if (model().dismissible) {\n        <button\n          type=\"button\"\n          class=\"nvb-message-card__dismiss\"\n          (click)=\"onDismiss($event)\"\n          [attr.aria-label]=\"dismissLabel()\"\n          [attr.title]=\"dismissLabel()\"\n          [attr.data-testid]=\"tid('dismiss')\"\n        >\n          <nvb-icon name=\"close\"></nvb-icon>\n        </button>\n      }\n    </article>\n  }\n</element-wrapper>\n",styles:['@charset "UTF-8";:host{display:block;width:100%;container-type:inline-size;container-name:nvb-message}.nvb-message-card{--nvb-message-accent: var(--nvb-color-primary-600);--nvb-message-tint: var(--nvb-color-primary-500);--nvb-message-bg: var(--nvb-color-neutral-000);--nvb-message-border: var(--nvb-color-neutral-200);position:relative;width:100%;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--nvb-message-border);border-radius:var(--nvb-radius-md, var(--nvb-radius-lg));background:var(--nvb-message-bg);color:var(--nvb-color-neutral-700)}.nvb-message-card--no-icon{grid-template-columns:minmax(0,1fr)}.nvb-message-card--dismissible{padding-right:44px}.nvb-message-card__icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--nvb-message-accent)}.nvb-message-card__icon nvb-icon{width:20px;height:20px;display:inline-flex}.nvb-message-card__body{min-width:0;display:flex;flex-direction:column;gap:10px}.nvb-message-card__text{min-width:0;display:flex;flex-direction:column;gap:2px}.nvb-message-card__title{margin:0;color:var(--nvb-color-neutral-900);font-size:14px;line-height:20px;font-weight:600}.nvb-message-card__description{margin:0;font-size:13px;line-height:1.5;color:var(--nvb-color-neutral-600);white-space:pre-line;overflow-wrap:anywhere}.nvb-message-card--appearance-soft .nvb-message-card__icon,.nvb-message-card--appearance-accent .nvb-message-card__icon{margin-top:0}.nvb-message-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.nvb-message-card__button{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-button-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-800);font:inherit;font-size:12px;line-height:18px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease}.nvb-message-card__button nvb-icon{width:14px;height:14px;display:inline-flex}.nvb-message-card__button:hover{background:var(--nvb-color-neutral-050)}.nvb-message-card__button:focus-visible,.nvb-message-card__dismiss:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-message-card__button--filled{color:var(--nvb-color-neutral-000)}.nvb-message-card__button--filled.nvb-message-card__button--accent{background:var(--nvb-message-accent);border-color:var(--nvb-message-accent)}.nvb-message-card__button--filled.nvb-message-card__button--primary{background:var(--nvb-color-primary-600);border-color:var(--nvb-color-primary-600)}.nvb-message-card__button--filled.nvb-message-card__button--risk{background:var(--nvb-color-risk-600);border-color:var(--nvb-color-risk-600)}.nvb-message-card__button--filled.nvb-message-card__button--neutral{background:var(--nvb-color-neutral-800);border-color:var(--nvb-color-neutral-800)}.nvb-message-card__button--filled:hover{background:color-mix(in oklab,var(--nvb-message-accent) 88%,var(--nvb-color-neutral-950))}.nvb-message-card__button--filled.nvb-message-card__button--primary:hover{background:var(--nvb-color-primary-700)}.nvb-message-card__button--filled.nvb-message-card__button--risk:hover{background:var(--nvb-color-risk-700)}.nvb-message-card__button--filled.nvb-message-card__button--neutral:hover{background:var(--nvb-color-neutral-900)}.nvb-message-card__button--outlined.nvb-message-card__button--accent,.nvb-message-card__button--text.nvb-message-card__button--accent{color:var(--nvb-message-accent)}.nvb-message-card__button--outlined.nvb-message-card__button--primary,.nvb-message-card__button--text.nvb-message-card__button--primary{color:var(--nvb-color-primary-700)}.nvb-message-card__button--outlined.nvb-message-card__button--risk,.nvb-message-card__button--text.nvb-message-card__button--risk{color:var(--nvb-color-risk-700)}.nvb-message-card__button--outlined.nvb-message-card__button--risk{border-color:color-mix(in oklab,var(--nvb-color-risk-500) 45%,var(--nvb-color-neutral-300))}.nvb-message-card__button--text{border-color:transparent;background:transparent;padding-inline:6px}.nvb-message-card__button--text:first-child{margin-left:-6px}.nvb-message-card__button--text:hover{background:color-mix(in oklab,var(--nvb-message-tint) 10%,transparent)}.nvb-message-card__dismiss{position:absolute;top:8px;right:8px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:transparent;color:var(--nvb-color-neutral-500);cursor:pointer}.nvb-message-card__dismiss nvb-icon{width:16px;height:16px;display:inline-flex}.nvb-message-card__dismiss:hover{background:color-mix(in oklab,var(--nvb-color-neutral-900) 7%,transparent);color:var(--nvb-color-neutral-800)}.nvb-message-card--appearance-soft{--nvb-message-bg: color-mix(in oklab, var(--nvb-message-tint) 7%, var(--nvb-color-neutral-000));--nvb-message-border: color-mix(in oklab, var(--nvb-message-tint) 26%, var(--nvb-color-neutral-200))}.nvb-message-card--appearance-card{grid-template-columns:minmax(0,1fr);row-gap:14px;padding:18px;border-color:var(--nvb-color-neutral-200);background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-2, 0 1px 2px rgba(0, 0, 0, .06))}.nvb-message-card--appearance-card.nvb-message-card--dismissible{padding-right:18px}.nvb-message-card--appearance-card .nvb-message-card__icon{width:36px;height:36px;border-radius:var(--nvb-radius-lg);background:color-mix(in oklab,var(--nvb-message-tint) 12%,var(--nvb-color-neutral-000))}.nvb-message-card--appearance-card .nvb-message-card__title{font-size:15px;line-height:22px}.nvb-message-card--appearance-card .nvb-message-card__text{gap:4px}.nvb-message-card--appearance-card .nvb-message-card__body{gap:14px}.nvb-message-card--appearance-accent{padding:2px 0 2px 14px;border:0;border-left:3px solid var(--nvb-message-accent);border-radius:0;background:transparent}.nvb-message-card--appearance-accent.nvb-message-card--dismissible{padding-right:36px}.nvb-message-card--appearance-accent .nvb-message-card__dismiss{top:-2px;right:0}@container nvb-message (min-width: 560px){.nvb-message-card--actions-inline .nvb-message-card__body{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}.nvb-message-card--actions-inline .nvb-message-card__actions{flex-wrap:nowrap;flex-shrink:0}}.nvb-message-card--info,.nvb-message-card--primary{--nvb-message-accent: var(--nvb-color-primary-600);--nvb-message-tint: var(--nvb-color-primary-500)}.nvb-message-card--neutral{--nvb-message-accent: var(--nvb-color-neutral-600);--nvb-message-tint: var(--nvb-color-neutral-500)}.nvb-message-card--success{--nvb-message-accent: var(--nvb-color-success-700);--nvb-message-tint: var(--nvb-color-success-500)}.nvb-message-card--warn,.nvb-message-card--warning{--nvb-message-accent: var(--nvb-color-warning-700);--nvb-message-tint: var(--nvb-color-warning-500)}.nvb-message-card--risk,.nvb-message-card--error{--nvb-message-accent: var(--nvb-color-risk-700);--nvb-message-tint: var(--nvb-color-risk-500)}.nvb-message-card--neutral.nvb-message-card--appearance-soft{--nvb-message-bg: var(--nvb-color-neutral-000);--nvb-message-border: var(--nvb-color-neutral-200)}@media(prefers-reduced-motion:reduce){.nvb-message-card__button{transition:none}}\n'],dependencies:[{kind:"component",type:b,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:v,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"component",type:d,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"pipe",type:l,name:"dynamicText"}],changeDetection:r.ChangeDetectionStrategy.OnPush})};r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:o,decorators:[{type:f,args:[{selector:"message-card-element",changeDetection:h.OnPush,imports:[b,v,l,d],template:"<element-wrapper [model]=\"model()\">\n  @if (visible()) {\n    <article\n      class=\"nvb-message-card\"\n      [ngClass]=\"cardClasses()\"\n      [attr.data-testid]=\"tid('root')\"\n      [attr.role]=\"messageRole()\"\n      [attr.aria-live]=\"messageAriaLive()\"\n    >\n      @if (model().showIcon) {\n        <span class=\"nvb-message-card__icon\" aria-hidden=\"true\">\n          <nvb-icon [name]=\"iconName()\"></nvb-icon>\n        </span>\n      }\n\n      <div class=\"nvb-message-card__body\">\n        <div class=\"nvb-message-card__text\">\n          @if (resolvedTitle()) {\n            <h4 class=\"nvb-message-card__title\">{{ resolvedTitle() | dynamicText: model() }}</h4>\n          }\n          <!-- No whitespace inside: the description keeps line breaks (pre-line) and the\n               template's own indentation used to push it right of the title. -->\n          @if (resolvedDescription()) {\n            <p class=\"nvb-message-card__description\">{{ resolvedDescription() | dynamicText: model() }}</p>\n          }\n        </div>\n\n        @if (buttonActions().length) {\n          <div class=\"nvb-message-card__actions\" [attr.data-testid]=\"tid('actions')\">\n            @for (action of buttonActions(); track action.id || $index) {\n              <button\n                type=\"button\"\n                class=\"nvb-message-card__button\"\n                [ngClass]=\"resolveActionButtonClass(action, $index)\"\n                (click)=\"onActionClick($event, action)\"\n                [attr.data-testid]=\"tid('action', $index)\"\n              >\n                @if (action.icon) {\n                  <nvb-icon [name]=\"action.icon\"></nvb-icon>\n                }\n                <span>{{ action.label | dynamicText: model() }}</span>\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      @if (model().dismissible) {\n        <button\n          type=\"button\"\n          class=\"nvb-message-card__dismiss\"\n          (click)=\"onDismiss($event)\"\n          [attr.aria-label]=\"dismissLabel()\"\n          [attr.title]=\"dismissLabel()\"\n          [attr.data-testid]=\"tid('dismiss')\"\n        >\n          <nvb-icon name=\"close\"></nvb-icon>\n        </button>\n      }\n    </article>\n  }\n</element-wrapper>\n",styles:['@charset "UTF-8";:host{display:block;width:100%;container-type:inline-size;container-name:nvb-message}.nvb-message-card{--nvb-message-accent: var(--nvb-color-primary-600);--nvb-message-tint: var(--nvb-color-primary-500);--nvb-message-bg: var(--nvb-color-neutral-000);--nvb-message-border: var(--nvb-color-neutral-200);position:relative;width:100%;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--nvb-message-border);border-radius:var(--nvb-radius-md, var(--nvb-radius-lg));background:var(--nvb-message-bg);color:var(--nvb-color-neutral-700)}.nvb-message-card--no-icon{grid-template-columns:minmax(0,1fr)}.nvb-message-card--dismissible{padding-right:44px}.nvb-message-card__icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--nvb-message-accent)}.nvb-message-card__icon nvb-icon{width:20px;height:20px;display:inline-flex}.nvb-message-card__body{min-width:0;display:flex;flex-direction:column;gap:10px}.nvb-message-card__text{min-width:0;display:flex;flex-direction:column;gap:2px}.nvb-message-card__title{margin:0;color:var(--nvb-color-neutral-900);font-size:14px;line-height:20px;font-weight:600}.nvb-message-card__description{margin:0;font-size:13px;line-height:1.5;color:var(--nvb-color-neutral-600);white-space:pre-line;overflow-wrap:anywhere}.nvb-message-card--appearance-soft .nvb-message-card__icon,.nvb-message-card--appearance-accent .nvb-message-card__icon{margin-top:0}.nvb-message-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.nvb-message-card__button{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-button-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-800);font:inherit;font-size:12px;line-height:18px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease}.nvb-message-card__button nvb-icon{width:14px;height:14px;display:inline-flex}.nvb-message-card__button:hover{background:var(--nvb-color-neutral-050)}.nvb-message-card__button:focus-visible,.nvb-message-card__dismiss:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-message-card__button--filled{color:var(--nvb-color-neutral-000)}.nvb-message-card__button--filled.nvb-message-card__button--accent{background:var(--nvb-message-accent);border-color:var(--nvb-message-accent)}.nvb-message-card__button--filled.nvb-message-card__button--primary{background:var(--nvb-color-primary-600);border-color:var(--nvb-color-primary-600)}.nvb-message-card__button--filled.nvb-message-card__button--risk{background:var(--nvb-color-risk-600);border-color:var(--nvb-color-risk-600)}.nvb-message-card__button--filled.nvb-message-card__button--neutral{background:var(--nvb-color-neutral-800);border-color:var(--nvb-color-neutral-800)}.nvb-message-card__button--filled:hover{background:color-mix(in oklab,var(--nvb-message-accent) 88%,var(--nvb-color-neutral-950))}.nvb-message-card__button--filled.nvb-message-card__button--primary:hover{background:var(--nvb-color-primary-700)}.nvb-message-card__button--filled.nvb-message-card__button--risk:hover{background:var(--nvb-color-risk-700)}.nvb-message-card__button--filled.nvb-message-card__button--neutral:hover{background:var(--nvb-color-neutral-900)}.nvb-message-card__button--outlined.nvb-message-card__button--accent,.nvb-message-card__button--text.nvb-message-card__button--accent{color:var(--nvb-message-accent)}.nvb-message-card__button--outlined.nvb-message-card__button--primary,.nvb-message-card__button--text.nvb-message-card__button--primary{color:var(--nvb-color-primary-700)}.nvb-message-card__button--outlined.nvb-message-card__button--risk,.nvb-message-card__button--text.nvb-message-card__button--risk{color:var(--nvb-color-risk-700)}.nvb-message-card__button--outlined.nvb-message-card__button--risk{border-color:color-mix(in oklab,var(--nvb-color-risk-500) 45%,var(--nvb-color-neutral-300))}.nvb-message-card__button--text{border-color:transparent;background:transparent;padding-inline:6px}.nvb-message-card__button--text:first-child{margin-left:-6px}.nvb-message-card__button--text:hover{background:color-mix(in oklab,var(--nvb-message-tint) 10%,transparent)}.nvb-message-card__dismiss{position:absolute;top:8px;right:8px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:transparent;color:var(--nvb-color-neutral-500);cursor:pointer}.nvb-message-card__dismiss nvb-icon{width:16px;height:16px;display:inline-flex}.nvb-message-card__dismiss:hover{background:color-mix(in oklab,var(--nvb-color-neutral-900) 7%,transparent);color:var(--nvb-color-neutral-800)}.nvb-message-card--appearance-soft{--nvb-message-bg: color-mix(in oklab, var(--nvb-message-tint) 7%, var(--nvb-color-neutral-000));--nvb-message-border: color-mix(in oklab, var(--nvb-message-tint) 26%, var(--nvb-color-neutral-200))}.nvb-message-card--appearance-card{grid-template-columns:minmax(0,1fr);row-gap:14px;padding:18px;border-color:var(--nvb-color-neutral-200);background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-2, 0 1px 2px rgba(0, 0, 0, .06))}.nvb-message-card--appearance-card.nvb-message-card--dismissible{padding-right:18px}.nvb-message-card--appearance-card .nvb-message-card__icon{width:36px;height:36px;border-radius:var(--nvb-radius-lg);background:color-mix(in oklab,var(--nvb-message-tint) 12%,var(--nvb-color-neutral-000))}.nvb-message-card--appearance-card .nvb-message-card__title{font-size:15px;line-height:22px}.nvb-message-card--appearance-card .nvb-message-card__text{gap:4px}.nvb-message-card--appearance-card .nvb-message-card__body{gap:14px}.nvb-message-card--appearance-accent{padding:2px 0 2px 14px;border:0;border-left:3px solid var(--nvb-message-accent);border-radius:0;background:transparent}.nvb-message-card--appearance-accent.nvb-message-card--dismissible{padding-right:36px}.nvb-message-card--appearance-accent .nvb-message-card__dismiss{top:-2px;right:0}@container nvb-message (min-width: 560px){.nvb-message-card--actions-inline .nvb-message-card__body{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}.nvb-message-card--actions-inline .nvb-message-card__actions{flex-wrap:nowrap;flex-shrink:0}}.nvb-message-card--info,.nvb-message-card--primary{--nvb-message-accent: var(--nvb-color-primary-600);--nvb-message-tint: var(--nvb-color-primary-500)}.nvb-message-card--neutral{--nvb-message-accent: var(--nvb-color-neutral-600);--nvb-message-tint: var(--nvb-color-neutral-500)}.nvb-message-card--success{--nvb-message-accent: var(--nvb-color-success-700);--nvb-message-tint: var(--nvb-color-success-500)}.nvb-message-card--warn,.nvb-message-card--warning{--nvb-message-accent: var(--nvb-color-warning-700);--nvb-message-tint: var(--nvb-color-warning-500)}.nvb-message-card--risk,.nvb-message-card--error{--nvb-message-accent: var(--nvb-color-risk-700);--nvb-message-tint: var(--nvb-color-risk-500)}.nvb-message-card--neutral.nvb-message-card--appearance-soft{--nvb-message-bg: var(--nvb-color-neutral-000);--nvb-message-border: var(--nvb-color-neutral-200)}@media(prefers-reduced-motion:reduce){.nvb-message-card__button{transition:none}}\n']}]}],propDecorators:{model:[{type:r.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{w as n,o as t};
+import{t as m}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{cn as g,f as p,n as l,un as u}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-WxfEoWah.mjs";import{Z as _}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-BYA8UfCA.mjs";import{o as d,r as x,t as b}from"./ngxviewbuilder-runtime-element-wrapper-EBaWVZvf.mjs";import*as r from"@angular/core";import{ChangeDetectionStrategy as h,Component as f,computed as t,inject as i,input as k,signal as y}from"@angular/core";import{NgClass as v}from"@angular/common";var w=m({MessageCardElement:()=>o});var o=class c{model=k.required(...ngDevMode?[{debugName:"model"}]:[]);tid=x(this.model,"nvb-message-card","message-card");visible=y(true,...ngDevMode?[{debugName:"visible"}]:[]);elementActionService=i(_);expressionService=i(p);uiTranslationService=i(u);variantClass=t(()=>`nvb-message-card--${this.resolveVariant()}`,...ngDevMode?[{debugName:"variantClass"}]:[]);cardClasses=t(()=>{const e=String(this.model()?.appearance??"soft");return{[this.variantClass()]:true,[`nvb-message-card--appearance-${e==="card"||e==="accent"?e:"soft"}`]:true,"nvb-message-card--actions-inline":this.model()?.actionsLayout==="inline","nvb-message-card--dismissible":Boolean(this.model()?.dismissible),"nvb-message-card--no-icon":!this.model()?.showIcon}},...ngDevMode?[{debugName:"cardClasses"}]:[]);iconName=t(()=>{const e=String(this.model()?.icon??"").trim();if(e)return e;switch(this.resolveVariant()){case"primary":return"bolt";case"success":return"check_circle";case"warn":return"warning";case"risk":return"error";case"neutral":return"info_outline";default:return"info"}},...ngDevMode?[{debugName:"iconName"}]:[]);buttonActions=t(()=>(Array.isArray(this.model()?.events)?this.model().events:[]).filter(e=>String(e?.trigger??"click").trim().toLowerCase()==="click"&&String(e?.label??"").trim().length>0).map((e,n)=>this.normalizeButtonAction(e,n)),...ngDevMode?[{debugName:"buttonActions"}]:[]);ngOnInit(){this.visible.set(Boolean(this.model()?.initiallyVisible??true));if(g.isEditor())this.visible.set(true)}onActionClick(e,n){e.preventDefault();e.stopPropagation();const a=this.buildRuntimeContext("click");this.elementActionService.runAction(this.model(),n,a)}onDismiss(e){e.preventDefault();e.stopPropagation();if(this.model().dismissible)this.visible.set(false);this.elementActionService.runActions(this.model(),this.model().events??[],"click",this.buildRuntimeContext("dismiss"))}resolvedTitle(){const e=String(this.model()?.title??"").trim();return e==="Information"?this.uiTranslationService.translate("messageCard.titleDefault","Information"):e}resolvedDescription(){const e=String(this.model()?.descriptionText??"").trim();return e==="Message details"?this.uiTranslationService.translate("messageCard.descriptionDefault","Message details"):e}dismissLabel(){return this.uiTranslationService.translate("common.dismiss","Dismiss")}messageAriaLive(){const e=this.resolveVariant();return e==="risk"||e==="warn"?"assertive":"polite"}messageRole(){return this.messageAriaLive()==="assertive"?"alert":"status"}resolveActionButtonClass(e,n=0){const a=this.normalizeActionButtonVariant(e?.buttonVariant);const s=String(e?.buttonTone??"accent");return{"nvb-message-card__button--accent":s==="accent","nvb-message-card__button--filled":a==="filled","nvb-message-card__button--outlined":a==="outlined","nvb-message-card__button--text":a==="text","nvb-message-card__button--primary":s==="primary","nvb-message-card__button--risk":s==="risk","nvb-message-card__button--neutral":s==="neutral"}}buildRuntimeContext(e){const n={action:e,value:this.model().value,item:null,row:null};const a=String(this.model().name??"").trim();if(a)n[a]=this.model().value;return n}resolveVariant(){const e=this.resolveConditionalVariant()||this.resolveExpressionValue(this.model()?.variantExpression)||String(this.model()?.variant??"info");const n=String(e).trim().toLowerCase();if(n==="neutral")return"neutral";if(n==="success")return"success";if(n==="warn"||n==="warning")return"warn";if(n==="risk"||n==="danger"||n==="error")return"risk";if(n==="primary")return"primary";return"info"}resolveConditionalVariant(){if(String(this.model()?.variantMode??"static").trim().toLowerCase()!=="conditional")return"";const e=Array.isArray(this.model()?.variantRules)?this.model().variantRules:[];for(const n of e){const a=String(n?.condition??"").trim();if(!a)continue;if(Boolean(this.expressionService.evaluateInlineExpression(a,this.model())))return String(n?.variant??"").trim()}return""}resolveExpressionValue(e){const n=String(e??"").trim();if(!n)return"";const a=this.expressionService.evaluateInlineExpression(n,this.model());return String(a??"").trim()}normalizeButtonAction(e,n){const a=String(e?.buttonVariant??"").trim().length>0;const s=String(e?.buttonTone??"").trim().length>0;return{...e,label:String(e?.label??"").trim(),trigger:"click",buttonVariant:a?this.normalizeActionButtonVariant(e?.buttonVariant):n===0?"filled":"outlined",buttonTone:s?this.normalizeActionButtonTone(e?.buttonTone):n===0?"accent":"neutral"}}normalizeActionButtonVariant(e){const n=String(e??"").trim().toLowerCase();if(n==="filled"||n==="solid")return"filled";if(n==="text")return"text";return"outlined"}normalizeActionButtonTone(e){const n=String(e??"").trim().toLowerCase();if(n==="primary")return"primary";if(n==="risk"||n==="danger"||n==="error")return"risk";return"neutral"}static ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:c,deps:[],target:r.ɵɵFactoryTarget.Component});static ɵcmp=r.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:c,isStandalone:true,selector:"message-card-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:r,template:"<element-wrapper [model]=\"model()\">\n  @if (visible()) {\n    <article\n      class=\"nvb-message-card\"\n      [ngClass]=\"cardClasses()\"\n      [attr.data-testid]=\"tid('root')\"\n      [attr.role]=\"messageRole()\"\n      [attr.aria-live]=\"messageAriaLive()\"\n    >\n      @if (model().showIcon) {\n        <span class=\"nvb-message-card__icon\" aria-hidden=\"true\">\n          <nvb-icon [name]=\"iconName()\"></nvb-icon>\n        </span>\n      }\n\n      <div class=\"nvb-message-card__body\">\n        <div class=\"nvb-message-card__text\">\n          @if (resolvedTitle()) {\n            <h4 class=\"nvb-message-card__title\">{{ resolvedTitle() | dynamicText: model() }}</h4>\n          }\n          <!-- No whitespace inside: the description keeps line breaks (pre-line) and the\n               template's own indentation used to push it right of the title. -->\n          @if (resolvedDescription()) {\n            <p class=\"nvb-message-card__description\">{{ resolvedDescription() | dynamicText: model() }}</p>\n          }\n        </div>\n\n        @if (buttonActions().length) {\n          <div class=\"nvb-message-card__actions\" [attr.data-testid]=\"tid('actions')\">\n            @for (action of buttonActions(); track action.id || $index) {\n              <button\n                type=\"button\"\n                class=\"nvb-message-card__button\"\n                [ngClass]=\"resolveActionButtonClass(action, $index)\"\n                (click)=\"onActionClick($event, action)\"\n                [attr.data-testid]=\"tid('action', $index)\"\n              >\n                @if (action.icon) {\n                  <nvb-icon [name]=\"action.icon\"></nvb-icon>\n                }\n                <span>{{ action.label | dynamicText: model() }}</span>\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      @if (model().dismissible) {\n        <button\n          type=\"button\"\n          class=\"nvb-message-card__dismiss\"\n          (click)=\"onDismiss($event)\"\n          [attr.aria-label]=\"dismissLabel()\"\n          [attr.title]=\"dismissLabel()\"\n          [attr.data-testid]=\"tid('dismiss')\"\n        >\n          <nvb-icon name=\"close\"></nvb-icon>\n        </button>\n      }\n    </article>\n  }\n</element-wrapper>\n",styles:['@charset "UTF-8";:host{display:block;width:100%;container-type:inline-size;container-name:nvb-message}.nvb-message-card{--nvb-message-accent: var(--nvb-color-primary-600);--nvb-message-tint: var(--nvb-color-primary-500);--nvb-message-bg: var(--nvb-color-neutral-000);--nvb-message-border: var(--nvb-color-neutral-200);position:relative;width:100%;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--nvb-message-border);border-radius:var(--nvb-radius-md, var(--nvb-radius-lg));background:var(--nvb-message-bg);color:var(--nvb-color-neutral-700)}.nvb-message-card--no-icon{grid-template-columns:minmax(0,1fr)}.nvb-message-card--dismissible{padding-right:44px}.nvb-message-card__icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--nvb-message-accent)}.nvb-message-card__icon nvb-icon{width:20px;height:20px;display:inline-flex}.nvb-message-card__body{min-width:0;display:flex;flex-direction:column;gap:10px}.nvb-message-card__text{min-width:0;display:flex;flex-direction:column;gap:2px}.nvb-message-card__title{margin:0;color:var(--nvb-color-neutral-900);font-size:14px;line-height:20px;font-weight:600}.nvb-message-card__description{margin:0;font-size:13px;line-height:1.5;color:var(--nvb-color-neutral-600);white-space:pre-line;overflow-wrap:anywhere}.nvb-message-card--appearance-soft .nvb-message-card__icon,.nvb-message-card--appearance-accent .nvb-message-card__icon{margin-top:0}.nvb-message-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.nvb-message-card__button{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-button-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-800);font:inherit;font-size:12px;line-height:18px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease}.nvb-message-card__button nvb-icon{width:14px;height:14px;display:inline-flex}.nvb-message-card__button:hover{background:var(--nvb-color-neutral-050)}.nvb-message-card__button:focus-visible,.nvb-message-card__dismiss:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-message-card__button--filled{color:var(--nvb-color-neutral-000)}.nvb-message-card__button--filled.nvb-message-card__button--accent{background:var(--nvb-message-accent);border-color:var(--nvb-message-accent)}.nvb-message-card__button--filled.nvb-message-card__button--primary{background:var(--nvb-color-primary-600);border-color:var(--nvb-color-primary-600)}.nvb-message-card__button--filled.nvb-message-card__button--risk{background:var(--nvb-color-risk-600);border-color:var(--nvb-color-risk-600)}.nvb-message-card__button--filled.nvb-message-card__button--neutral{background:var(--nvb-color-neutral-800);border-color:var(--nvb-color-neutral-800)}.nvb-message-card__button--filled:hover{background:color-mix(in oklab,var(--nvb-message-accent) 88%,var(--nvb-color-neutral-950))}.nvb-message-card__button--filled.nvb-message-card__button--primary:hover{background:var(--nvb-color-primary-700)}.nvb-message-card__button--filled.nvb-message-card__button--risk:hover{background:var(--nvb-color-risk-700)}.nvb-message-card__button--filled.nvb-message-card__button--neutral:hover{background:var(--nvb-color-neutral-900)}.nvb-message-card__button--outlined.nvb-message-card__button--accent,.nvb-message-card__button--text.nvb-message-card__button--accent{color:var(--nvb-message-accent)}.nvb-message-card__button--outlined.nvb-message-card__button--primary,.nvb-message-card__button--text.nvb-message-card__button--primary{color:var(--nvb-color-primary-700)}.nvb-message-card__button--outlined.nvb-message-card__button--risk,.nvb-message-card__button--text.nvb-message-card__button--risk{color:var(--nvb-color-risk-700)}.nvb-message-card__button--outlined.nvb-message-card__button--risk{border-color:color-mix(in oklab,var(--nvb-color-risk-500) 45%,var(--nvb-color-neutral-300))}.nvb-message-card__button--text{border-color:transparent;background:transparent;padding-inline:6px}.nvb-message-card__button--text:first-child{margin-left:-6px}.nvb-message-card__button--text:hover{background:color-mix(in oklab,var(--nvb-message-tint) 10%,transparent)}.nvb-message-card__dismiss{position:absolute;top:8px;right:8px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:transparent;color:var(--nvb-color-neutral-500);cursor:pointer}.nvb-message-card__dismiss nvb-icon{width:16px;height:16px;display:inline-flex}.nvb-message-card__dismiss:hover{background:color-mix(in oklab,var(--nvb-color-neutral-900) 7%,transparent);color:var(--nvb-color-neutral-800)}.nvb-message-card--appearance-soft{--nvb-message-bg: color-mix(in oklab, var(--nvb-message-tint) 7%, var(--nvb-color-neutral-000));--nvb-message-border: color-mix(in oklab, var(--nvb-message-tint) 26%, var(--nvb-color-neutral-200))}.nvb-message-card--appearance-card{grid-template-columns:minmax(0,1fr);row-gap:14px;padding:18px;border-color:var(--nvb-color-neutral-200);background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-2, 0 1px 2px rgba(0, 0, 0, .06))}.nvb-message-card--appearance-card.nvb-message-card--dismissible{padding-right:18px}.nvb-message-card--appearance-card .nvb-message-card__icon{width:36px;height:36px;border-radius:var(--nvb-radius-lg);background:color-mix(in oklab,var(--nvb-message-tint) 12%,var(--nvb-color-neutral-000))}.nvb-message-card--appearance-card .nvb-message-card__title{font-size:15px;line-height:22px}.nvb-message-card--appearance-card .nvb-message-card__text{gap:4px}.nvb-message-card--appearance-card .nvb-message-card__body{gap:14px}.nvb-message-card--appearance-accent{padding:2px 0 2px 14px;border:0;border-left:3px solid var(--nvb-message-accent);border-radius:0;background:transparent}.nvb-message-card--appearance-accent.nvb-message-card--dismissible{padding-right:36px}.nvb-message-card--appearance-accent .nvb-message-card__dismiss{top:-2px;right:0}@container nvb-message (min-width: 560px){.nvb-message-card--actions-inline .nvb-message-card__body{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}.nvb-message-card--actions-inline .nvb-message-card__actions{flex-wrap:nowrap;flex-shrink:0}}.nvb-message-card--info,.nvb-message-card--primary{--nvb-message-accent: var(--nvb-color-primary-600);--nvb-message-tint: var(--nvb-color-primary-500)}.nvb-message-card--neutral{--nvb-message-accent: var(--nvb-color-neutral-600);--nvb-message-tint: var(--nvb-color-neutral-500)}.nvb-message-card--success{--nvb-message-accent: var(--nvb-color-success-700);--nvb-message-tint: var(--nvb-color-success-500)}.nvb-message-card--warn,.nvb-message-card--warning{--nvb-message-accent: var(--nvb-color-warning-700);--nvb-message-tint: var(--nvb-color-warning-500)}.nvb-message-card--risk,.nvb-message-card--error{--nvb-message-accent: var(--nvb-color-risk-700);--nvb-message-tint: var(--nvb-color-risk-500)}.nvb-message-card--neutral.nvb-message-card--appearance-soft{--nvb-message-bg: var(--nvb-color-neutral-000);--nvb-message-border: var(--nvb-color-neutral-200)}@media(prefers-reduced-motion:reduce){.nvb-message-card__button{transition:none}}\n'],dependencies:[{kind:"component",type:b,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:v,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"component",type:d,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"pipe",type:l,name:"dynamicText"}],changeDetection:r.ChangeDetectionStrategy.OnPush})};r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:o,decorators:[{type:f,args:[{selector:"message-card-element",changeDetection:h.OnPush,imports:[b,v,l,d],template:"<element-wrapper [model]=\"model()\">\n  @if (visible()) {\n    <article\n      class=\"nvb-message-card\"\n      [ngClass]=\"cardClasses()\"\n      [attr.data-testid]=\"tid('root')\"\n      [attr.role]=\"messageRole()\"\n      [attr.aria-live]=\"messageAriaLive()\"\n    >\n      @if (model().showIcon) {\n        <span class=\"nvb-message-card__icon\" aria-hidden=\"true\">\n          <nvb-icon [name]=\"iconName()\"></nvb-icon>\n        </span>\n      }\n\n      <div class=\"nvb-message-card__body\">\n        <div class=\"nvb-message-card__text\">\n          @if (resolvedTitle()) {\n            <h4 class=\"nvb-message-card__title\">{{ resolvedTitle() | dynamicText: model() }}</h4>\n          }\n          <!-- No whitespace inside: the description keeps line breaks (pre-line) and the\n               template's own indentation used to push it right of the title. -->\n          @if (resolvedDescription()) {\n            <p class=\"nvb-message-card__description\">{{ resolvedDescription() | dynamicText: model() }}</p>\n          }\n        </div>\n\n        @if (buttonActions().length) {\n          <div class=\"nvb-message-card__actions\" [attr.data-testid]=\"tid('actions')\">\n            @for (action of buttonActions(); track action.id || $index) {\n              <button\n                type=\"button\"\n                class=\"nvb-message-card__button\"\n                [ngClass]=\"resolveActionButtonClass(action, $index)\"\n                (click)=\"onActionClick($event, action)\"\n                [attr.data-testid]=\"tid('action', $index)\"\n              >\n                @if (action.icon) {\n                  <nvb-icon [name]=\"action.icon\"></nvb-icon>\n                }\n                <span>{{ action.label | dynamicText: model() }}</span>\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      @if (model().dismissible) {\n        <button\n          type=\"button\"\n          class=\"nvb-message-card__dismiss\"\n          (click)=\"onDismiss($event)\"\n          [attr.aria-label]=\"dismissLabel()\"\n          [attr.title]=\"dismissLabel()\"\n          [attr.data-testid]=\"tid('dismiss')\"\n        >\n          <nvb-icon name=\"close\"></nvb-icon>\n        </button>\n      }\n    </article>\n  }\n</element-wrapper>\n",styles:['@charset "UTF-8";:host{display:block;width:100%;container-type:inline-size;container-name:nvb-message}.nvb-message-card{--nvb-message-accent: var(--nvb-color-primary-600);--nvb-message-tint: var(--nvb-color-primary-500);--nvb-message-bg: var(--nvb-color-neutral-000);--nvb-message-border: var(--nvb-color-neutral-200);position:relative;width:100%;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--nvb-message-border);border-radius:var(--nvb-radius-md, var(--nvb-radius-lg));background:var(--nvb-message-bg);color:var(--nvb-color-neutral-700)}.nvb-message-card--no-icon{grid-template-columns:minmax(0,1fr)}.nvb-message-card--dismissible{padding-right:44px}.nvb-message-card__icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--nvb-message-accent)}.nvb-message-card__icon nvb-icon{width:20px;height:20px;display:inline-flex}.nvb-message-card__body{min-width:0;display:flex;flex-direction:column;gap:10px}.nvb-message-card__text{min-width:0;display:flex;flex-direction:column;gap:2px}.nvb-message-card__title{margin:0;color:var(--nvb-color-neutral-900);font-size:14px;line-height:20px;font-weight:600}.nvb-message-card__description{margin:0;font-size:13px;line-height:1.5;color:var(--nvb-color-neutral-600);white-space:pre-line;overflow-wrap:anywhere}.nvb-message-card--appearance-soft .nvb-message-card__icon,.nvb-message-card--appearance-accent .nvb-message-card__icon{margin-top:0}.nvb-message-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.nvb-message-card__button{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-button-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-800);font:inherit;font-size:12px;line-height:18px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease}.nvb-message-card__button nvb-icon{width:14px;height:14px;display:inline-flex}.nvb-message-card__button:hover{background:var(--nvb-color-neutral-050)}.nvb-message-card__button:focus-visible,.nvb-message-card__dismiss:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-message-card__button--filled{color:var(--nvb-color-neutral-000)}.nvb-message-card__button--filled.nvb-message-card__button--accent{background:var(--nvb-message-accent);border-color:var(--nvb-message-accent)}.nvb-message-card__button--filled.nvb-message-card__button--primary{background:var(--nvb-color-primary-600);border-color:var(--nvb-color-primary-600)}.nvb-message-card__button--filled.nvb-message-card__button--risk{background:var(--nvb-color-risk-600);border-color:var(--nvb-color-risk-600)}.nvb-message-card__button--filled.nvb-message-card__button--neutral{background:var(--nvb-color-neutral-800);border-color:var(--nvb-color-neutral-800)}.nvb-message-card__button--filled:hover{background:color-mix(in oklab,var(--nvb-message-accent) 88%,var(--nvb-color-neutral-950))}.nvb-message-card__button--filled.nvb-message-card__button--primary:hover{background:var(--nvb-color-primary-700)}.nvb-message-card__button--filled.nvb-message-card__button--risk:hover{background:var(--nvb-color-risk-700)}.nvb-message-card__button--filled.nvb-message-card__button--neutral:hover{background:var(--nvb-color-neutral-900)}.nvb-message-card__button--outlined.nvb-message-card__button--accent,.nvb-message-card__button--text.nvb-message-card__button--accent{color:var(--nvb-message-accent)}.nvb-message-card__button--outlined.nvb-message-card__button--primary,.nvb-message-card__button--text.nvb-message-card__button--primary{color:var(--nvb-color-primary-700)}.nvb-message-card__button--outlined.nvb-message-card__button--risk,.nvb-message-card__button--text.nvb-message-card__button--risk{color:var(--nvb-color-risk-700)}.nvb-message-card__button--outlined.nvb-message-card__button--risk{border-color:color-mix(in oklab,var(--nvb-color-risk-500) 45%,var(--nvb-color-neutral-300))}.nvb-message-card__button--text{border-color:transparent;background:transparent;padding-inline:6px}.nvb-message-card__button--text:first-child{margin-left:-6px}.nvb-message-card__button--text:hover{background:color-mix(in oklab,var(--nvb-message-tint) 10%,transparent)}.nvb-message-card__dismiss{position:absolute;top:8px;right:8px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:transparent;color:var(--nvb-color-neutral-500);cursor:pointer}.nvb-message-card__dismiss nvb-icon{width:16px;height:16px;display:inline-flex}.nvb-message-card__dismiss:hover{background:color-mix(in oklab,var(--nvb-color-neutral-900) 7%,transparent);color:var(--nvb-color-neutral-800)}.nvb-message-card--appearance-soft{--nvb-message-bg: color-mix(in oklab, var(--nvb-message-tint) 7%, var(--nvb-color-neutral-000));--nvb-message-border: color-mix(in oklab, var(--nvb-message-tint) 26%, var(--nvb-color-neutral-200))}.nvb-message-card--appearance-card{grid-template-columns:minmax(0,1fr);row-gap:14px;padding:18px;border-color:var(--nvb-color-neutral-200);background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-2, 0 1px 2px rgba(0, 0, 0, .06))}.nvb-message-card--appearance-card.nvb-message-card--dismissible{padding-right:18px}.nvb-message-card--appearance-card .nvb-message-card__icon{width:36px;height:36px;border-radius:var(--nvb-radius-lg);background:color-mix(in oklab,var(--nvb-message-tint) 12%,var(--nvb-color-neutral-000))}.nvb-message-card--appearance-card .nvb-message-card__title{font-size:15px;line-height:22px}.nvb-message-card--appearance-card .nvb-message-card__text{gap:4px}.nvb-message-card--appearance-card .nvb-message-card__body{gap:14px}.nvb-message-card--appearance-accent{padding:2px 0 2px 14px;border:0;border-left:3px solid var(--nvb-message-accent);border-radius:0;background:transparent}.nvb-message-card--appearance-accent.nvb-message-card--dismissible{padding-right:36px}.nvb-message-card--appearance-accent .nvb-message-card__dismiss{top:-2px;right:0}@container nvb-message (min-width: 560px){.nvb-message-card--actions-inline .nvb-message-card__body{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}.nvb-message-card--actions-inline .nvb-message-card__actions{flex-wrap:nowrap;flex-shrink:0}}.nvb-message-card--info,.nvb-message-card--primary{--nvb-message-accent: var(--nvb-color-primary-600);--nvb-message-tint: var(--nvb-color-primary-500)}.nvb-message-card--neutral{--nvb-message-accent: var(--nvb-color-neutral-600);--nvb-message-tint: var(--nvb-color-neutral-500)}.nvb-message-card--success{--nvb-message-accent: var(--nvb-color-success-700);--nvb-message-tint: var(--nvb-color-success-500)}.nvb-message-card--warn,.nvb-message-card--warning{--nvb-message-accent: var(--nvb-color-warning-700);--nvb-message-tint: var(--nvb-color-warning-500)}.nvb-message-card--risk,.nvb-message-card--error{--nvb-message-accent: var(--nvb-color-risk-700);--nvb-message-tint: var(--nvb-color-risk-500)}.nvb-message-card--neutral.nvb-message-card--appearance-soft{--nvb-message-bg: var(--nvb-color-neutral-000);--nvb-message-border: var(--nvb-color-neutral-200)}@media(prefers-reduced-motion:reduce){.nvb-message-card__button{transition:none}}\n']}]}],propDecorators:{model:[{type:r.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{w as n,o as t};

package/fesm2022/{ngxviewbuilder-runtime-multi-select-element-BWJx77Pg.mjs → ngxviewbuilder-runtime-multi-select-element-DHqMGyjB.mjs}

@@ -1 +1 @@
-import{t as _}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{_ as V,bt as M,cn as E,f as A,n as y,on as k,r as O,sn as z}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{X as P,Z as $,at as N,lt as H,ot as B}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import{a as W,i as h,r as F,t as T}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs";import{t as G}from"./ngxviewbuilder-runtime-dropdown-coordinator.service-CDJcQkrB.mjs";import{t as C}from"./ngxviewbuilder-runtime-nvb-style-outlet-CVovePT_.mjs";import*as p from"@angular/core";import{ChangeDetectionStrategy as q,Component as R,HostListener as g,ViewChild as f,computed as l,inject as c,input as j,signal as s}from"@angular/core";import*as U from"@angular/common";import{CommonModule as D,DOCUMENT as K}from"@angular/common";import{FormsModule as L}from"@angular/forms";var Y=_({MultiSelectElement:()=>x});var x=class w{dropdownTemplateScopeId=`nvb-multi-select-template-${Math.random().toString(36).slice(2,11)}`;dropdownOptionsId=`nvb-multi-select-options-${Math.random().toString(36).slice(2,11)}`;dropdownTemplateScopeSelector=`[data-nvb-template-scope="${this.dropdownTemplateScopeId}"]`;model=j.required(...ngDevMode?[{debugName:"model"}]:[]);tid=F(this.model,"nvb-multi-select","multi-select");dropdownContainer;selectButton;dropdownPanel;isOpen=s(false,...ngDevMode?[{debugName:"isOpen"}]:[]);searchTerm=s("",...ngDevMode?[{debugName:"searchTerm"}]:[]);selectedValues=s([],...ngDevMode?[{debugName:"selectedValues"}]:[]);dataSourceLoaded=s(false,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);isEditorView=s(k.isEditor(),...ngDevMode?[{debugName:"isEditorView"}]:[]);dropdownPosition=s("bottom",...ngDevMode?[{debugName:"dropdownPosition"}]:[]);dropdownMaxHeight=s(300,...ngDevMode?[{debugName:"dropdownMaxHeight"}]:[]);dropdownLeft=s(0,...ngDevMode?[{debugName:"dropdownLeft"}]:[]);dropdownTop=s(0,...ngDevMode?[{debugName:"dropdownTop"}]:[]);dropdownMinWidth=s(0,...ngDevMode?[{debugName:"dropdownMinWidth"}]:[]);useCompactStyle=s(false,...ngDevMode?[{debugName:"useCompactStyle"}]:[]);dataVersion=s(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);documentRef=c(K);dataService=c(z);eventService=c(V);expressionService=c(A);elementActionService=c($);templateEngineService=c(P);markupSecurityService=c(H);validatorService=c(N);dropdownCoordinatorService=c(G);uiTranslationService=c(E);dropdownId=`multi-select-${Math.random().toString(36).slice(2,11)}`;dropdownCoordinatorSubscription=null;defaultDropdownHeight=300;minDropdownHeight=96;dropdownVerticalGap=4;dropdownBoundaryPadding=8;dropdownLayoutFrame=null;normalizedOptionTemplate=l(()=>this.normalizeOptionTemplate(this.templateEngineService.resolveTemplateContentByName(String(this.model().optionTemplateName??"").trim(),String(this.model().optionTemplate??"").trim())),...ngDevMode?[{debugName:"normalizedOptionTemplate"}]:[]);visibleOptions=l(()=>{this.dataVersion();return this.filterOptionsByVisibility(this.model().options||[])},...ngDevMode?[{debugName:"visibleOptions"}]:[]);usesGroupedOptions=l(()=>this.hasGroupedOptions(this.model().options||[]),...ngDevMode?[{debugName:"usesGroupedOptions"}]:[]);filteredOptions=l(()=>{const t=this.visibleOptions();const e=this.searchTerm().toLowerCase();if(!e)return t;if(this.usesGroupedOptions())return t.map(n=>({...n,items:n.items.filter(o=>o.label.toLowerCase().includes(e))})).filter(n=>n.items.length>0);return t.filter(n=>n.label.toLowerCase().includes(e))},...ngDevMode?[{debugName:"filteredOptions"}]:[]);hasCustomTemplate=l(()=>this.normalizedOptionTemplate()!==null,...ngDevMode?[{debugName:"hasCustomTemplate"}]:[]);customDropdownState=l(()=>{if(!this.hasCustomTemplate())return{html:null,error:null};const t=this.normalizedOptionTemplate();if(!t)return{html:null,error:null};const e=this.flattenCurrentOptions();if(e.length===0)return{html:`<div class="nvb-no-results">${this.uiTranslationService.translate("multiSelect.empty","No results found")}</div>`,error:null};try{const n=this.shouldRenderCollectionTemplate(t);let o=n?this.renderCollectionTemplate(t,e,this.selectedValues()):this.renderTemplate(t,e,this.selectedValues());if(n&&(this.isMarkupEffectivelyEmpty(o)||!this.hasSelectableOptionMarkup(o)))o=this.renderTemplate(t,e,this.selectedValues());o=this.sanitizeCustomDropdownHtml(o);o=this.hydrateSelectableOptionMarkup(o,e,this.selectedValues());if(this.isMarkupEffectivelyEmpty(o)||!this.hasSelectableOptionMarkup(o)||!this.hasMeaningfulOptionContent(o))o=this.renderDefaultDropdownHtml(e,this.selectedValues());return{html:o,error:null}}catch(n){const o=n instanceof Error?n.message:this.uiTranslationService.translate("multiSelect.templateError","Template render error");return{html:`<div class="nvb-no-results">${this.templateEngineService.escapeHtml(o)}</div>`,error:o}}},...ngDevMode?[{debugName:"customDropdownState"}]:[]);templateError=l(()=>this.customDropdownState().error,...ngDevMode?[{debugName:"templateError"}]:[]);customDropdownHtml=l(()=>this.customDropdownState().html,...ngDevMode?[{debugName:"customDropdownHtml"}]:[]);customDropdownCss=l(()=>{const t=this.normalizedOptionTemplate();if(!t)return"";return this.templateEngineService.resolveTemplateCss(t,this.dropdownTemplateScopeSelector)},...ngDevMode?[{debugName:"customDropdownCss"}]:[]);hasValue=l(()=>this.selectedValues().length>0,...ngDevMode?[{debugName:"hasValue"}]:[]);displayValue=l(()=>{const t=this.selectedValues();if(t.length===0)return this.uiTranslationService.translate("multiSelect.placeholder","Select...");const e=this.flattenAllOptions().filter(o=>t.some(r=>this.isSameValue(r,o.value))).map(o=>o.label);if(e.length<=2)return e.join(", ");const n=e.length-2;return`${e.slice(0,2).join(", ")} +${n}`},...ngDevMode?[{debugName:"displayValue"}]:[]);dataSourceLoading=l(()=>Boolean(this.model().dataSource)&&!this.dataSourceLoaded()&&!this.isEditorView(),...ngDevMode?[{debugName:"dataSourceLoading"}]:[]);onDataSourceLoadedHandler=()=>{this.dataSourceLoaded.set(true);this.dataVersion.update(t=>t+1)};onDataValueChangedHandler=()=>{this.dataVersion.update(t=>t+1)};ngOnInit(){const t=!this.model().dataSource||!!this.model().dataSourceLoaded;this.dataSourceLoaded.set(t);if(this.model().dataSource)this.model().afterDataSourceLoad.add(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.add(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.add(this.onDataValueChangedHandler);this.isEditorView.set(k.isEditor());if(Array.isArray(this.model().value))this.selectedValues.set([...this.model().value]);if(this.model()?.parentElement&&this.model()?.parentElement instanceof M)this.useCompactStyle.set(this.model()?.parentElement["useCompactStyle"]);this.dropdownCoordinatorSubscription=this.dropdownCoordinatorService.activeDropdownId$.subscribe(e=>{if(!this.isOpen())return;if(e===this.dropdownId)return;this.closeDropdown()})}ngOnDestroy(){this.model().afterDataSourceLoad.remove(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.remove(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.remove(this.onDataValueChangedHandler);this.dropdownCoordinatorSubscription?.unsubscribe();this.dropdownCoordinatorSubscription=null;this.cancelScheduledDropdownCalculation();this.dropdownCoordinatorService.requestClose(this.dropdownId)}toggleDropdown(){if(this.isInteractionLocked()){this.closeDropdown();return}if(!this.isOpen()){this.openDropdown();return}this.closeDropdown()}clearSelection(t){t.stopPropagation();if(this.isInteractionLocked())return;this.selectedValues.set([]);this.searchTerm.set("");this.model().setValue([],"change");this.validatorService.handleElementBlur(this.model());this.runActions("change",[])}clearSearch(t){t.stopPropagation();this.searchTerm.set("");this.scheduleDropdownPositionCalculation()}onSearchInput(t){if(this.isInteractionLocked())return;const e=t.target.value;this.searchTerm.set(e);this.scheduleDropdownPositionCalculation()}toggleOption(t,e){e?.stopPropagation();if(this.isInteractionLocked())return;const n=[...this.selectedValues()];const o=n.findIndex(r=>this.isSameValue(r,t));if(o>=0)n.splice(o,1);else n.push(t);this.selectedValues.set(n);this.model().setValue(n,"change");this.runActions("change",n)}toggleGroup(t,e){e?.stopPropagation();if(this.isInteractionLocked())return;const n=this.resolveGroupValues(t);if(n.length===0)return;const o=[...this.selectedValues()];const r=n.every(a=>o.some(i=>this.isSameValue(i,a)))?o.filter(a=>!n.some(i=>this.isSameValue(i,a))):this.mergeSelectedGroupValues(o,n);this.selectedValues.set(r);this.model().setValue(r,"change");this.runActions("change",r)}isSelected(t){return this.selectedValues().some(e=>this.isSameValue(e,t))}isGroupSelected(t){const e=this.resolveGroupValues(t);return e.length>0&&e.every(n=>this.selectedValues().some(o=>this.isSameValue(o,n)))}isGroupPartiallySelected(t){const e=this.resolveGroupValues(t);if(e.length===0)return false;const n=e.filter(o=>this.selectedValues().some(r=>this.isSameValue(r,o))).length;return n>0&&n<e.length}resolveOptionTestId(t,e,n){const o=h(String(this.model()?.dataPath??"").trim()||String(this.model()?.name??"").trim()||"multi-select");const r=h(String(t??e).trim()||String(e+1));const a=h(String(n??"").trim());return a?`nvb-${o}-option-${a}-${r}`:`nvb-${o}-option-${r}`}resolveOptionAriaLabel(t,e){const n=String(t??"").trim();if(n)return n;return String(e??this.uiTranslationService.translate("multiSelect.optionFallback","Option"))}calculateDropdownPosition(){if(!this.selectButton){this.dropdownPosition.set("bottom");this.dropdownMaxHeight.set(this.defaultDropdownHeight);this.dropdownLeft.set(0);this.dropdownTop.set(0);this.dropdownMinWidth.set(0);return}const t=this.selectButton.nativeElement;const e=t.getBoundingClientRect();const n=Math.max(this.documentRef.documentElement?.clientWidth??0,window.innerWidth??0);const o=Math.max(this.documentRef.documentElement?.clientHeight??0,window.innerHeight??0);const r=Math.max(Math.round(e.width),84);const a=this.dropdownBoundaryPadding;const i=Math.max(a,n-r-this.dropdownBoundaryPadding);const d=Math.min(Math.max(e.left,a),i);const u=Math.max(0,o-e.bottom-this.dropdownBoundaryPadding-this.dropdownVerticalGap);const v=Math.max(0,e.top-this.dropdownBoundaryPadding-this.dropdownVerticalGap);const b=u<Math.min(this.defaultDropdownHeight,220)&&v>u;const m=b?v:u;const I=Math.min(this.defaultDropdownHeight,Math.max(this.minDropdownHeight,m));const S=W(t);this.dropdownPosition.set(b?"top":"bottom");this.dropdownMaxHeight.set(I);this.dropdownLeft.set(d-S.left);this.dropdownTop.set((b?e.top:e.bottom+this.dropdownVerticalGap)-S.top);this.dropdownMinWidth.set(r)}onTriggerFocus(){if(this.isInteractionLocked())return;this.runActions("focus")}onTriggerBlur(){if(this.isInteractionLocked())return;if(this.isOpen())return;this.validatorService.handleElementBlur(this.model());this.runActions("blur")}onTriggerKeydown(t){if(this.isInteractionLocked())return;switch(t.key){case"Enter":case" ":case"ArrowDown":case"ArrowUp":t.preventDefault();if(!this.isOpen())this.openDropdown();return;case"Escape":if(!this.isOpen())return;t.preventDefault();this.closeDropdown(true);return;default:return}}onCustomOptionsClick(t){if(this.isInteractionLocked())return;const e=t.target?.closest("[data-option-index], [data-value]");if(!e)return;const n=this.resolveOptionValueFromIndex(e.getAttribute("data-option-index"));if(n.found){this.toggleOption(n.value,t);return}const o=this.resolveOptionValueFromDomOrder(e);if(o.found){this.toggleOption(o.value,t);return}const r=e.getAttribute("data-value");if(r===null)return;const a=this.resolveOptionValue(r);this.toggleOption(a,t)}onDocumentClick(t){if(!this.isOpen())return;const e=this.dropdownContainer?.nativeElement;if(!e)return;const n=t.target;const o=typeof t.composedPath==="function"?t.composedPath():[];if(!((n?e.contains(n):false)||o.includes(e)))this.closeDropdown(true)}openDropdown(){this.calculateDropdownPosition();this.dropdownCoordinatorService.requestClose();this.dropdownCoordinatorService.requestOpen(this.dropdownId);this.isOpen.set(true);this.scheduleDropdownPositionCalculation()}closeDropdown(t=false){this.isOpen.set(false);this.searchTerm.set("");this.cancelScheduledDropdownCalculation();this.dropdownCoordinatorService.requestClose(this.dropdownId);if(t){this.validatorService.handleElementBlur(this.model());this.runActions("blur")}}runActions(t,e){const n=e!==void 0?e:this.selectedValues();const o=String(this.model().name??"").trim();const r={value:n,item:null,row:null};if(o)r[o]=n;this.elementActionService.runActions(this.model(),this.model().events??[],t,r)}isInteractionLocked(){const t=this.model();if(!t)return false;if(Boolean(t["__pfInteractionLocked"]))return true;if(this.dataSourceLoading())return true;return Boolean(t.disabled)||Boolean(t.readOnly)}onDocumentScroll(){if(!this.isOpen())return;this.calculateDropdownPosition()}onWindowResize(){if(!this.isOpen())return;this.calculateDropdownPosition()}flattenCurrentOptions(){const t=this.filteredOptions();if(this.usesGroupedOptions()){const e=[];t.forEach(n=>{(n?.items??[]).forEach(o=>{e.push({...o??{},label:String(o?.label??""),value:o?.value,groupLabel:String(n?.label??"").trim()||void 0})})});return e}return(t??[]).map(e=>({...e??{},label:String(e?.label??""),value:e?.value}))}showSearchBox(){return this.model()?.showSearch!==false&&this.flattenAllOptions().length>10}flattenAllOptions(){const t=this.filterOptionsByVisibility(this.model().options??[]);if(this.usesGroupedOptions()){const e=[];t.forEach(n=>{(n?.items??[]).forEach(o=>{e.push({...o??{},label:String(o?.label??""),value:o?.value,groupLabel:String(n?.label??"").trim()||void 0})})});return e}return t.map(e=>({...e??{},label:String(e?.label??""),value:e?.value}))}renderTemplate(t,e,n){const o=t.toLowerCase();if(o.includes("<script")||o.includes("onerror=")||o.includes("onload="))throw new Error(this.uiTranslationService.translate("multiSelect.templateUnsupportedHtml","Template contains unsupported HTML."));return e.map((r,a)=>this.renderOptionTemplate(t,r,a,n)).join("")}renderCollectionTemplate(t,e,n){const o=e.map(r=>{const a=this.applyOptionTemplateAliases(r);return{...a,selected:n.some(i=>this.isSameValue(i,a.value)),checked:n.some(i=>this.isSameValue(i,a.value))}});return this.templateEngineService.renderTemplate(t,this.buildTemplateContext(o,n,{selectedItems:o.filter(r=>n.some(a=>this.isSameValue(a,r.value)))}))}renderOptionTemplate(t,e,n,o){const r=this.applyOptionTemplateAliases(e);const a=String(e.value??"");const i=o.some(v=>this.isSameValue(v,e.value));const d=this.templateEngineService.renderTemplate(t,this.buildTemplateContext(this.flattenCurrentOptions(),o,{...r??{},option:r,item:r,row:r,label:r.label,value:r.value,index:n,groupLabel:r.groupLabel??null,selected:i,checked:i,selectedClass:i?"selected":"",selectedValues:o}));const u=this.isMarkupEffectivelyEmpty(d)?this.templateEngineService.escapeHtml(String(r.label??"")):d;if(/data-value\s*=/.test(d))return d;return`<div class="nvb-multi-select-template-option${i?" nvb-multi-select-template-option--selected":""}" data-option-index="${n}" data-value="${this.escapeAttribute(a)}"><input type="checkbox" class="nvb-control__checkbox-input nvb-option-checkbox" ${i?"checked":""} tabindex="-1" aria-hidden="true" /><div class="nvb-option__content">${u}</div></div>`}buildTemplateContext(t,e,n={}){const o=t.map(a=>this.applyOptionTemplateAliases(a));const r={...this.dataService.getData()??{},model:this.model(),element:this.model(),field:this.model(),items:o,options:o,filteredOptions:o,selectedValues:e,value:e,...n};return this.templateEngineService.applyTemplateFieldMap(r,this.resolveOptionTemplateFieldMap())}resolveOptionTemplateFieldMap(){const t=this.model()["optionTemplateFieldMap"];return t&&typeof t==="object"&&!Array.isArray(t)?t:null}applyOptionTemplateAliases(t){const e=t??{};const n=e["label"];const o=e["value"];return{...e,label:String(n??""),value:o,display:e["display"]??n??"",key:e["key"]??o,text:e["text"]??n??"",title:e["title"]??n??""}}renderDefaultDropdownHtml(t,e){return t.map((n,o)=>{const r=e.some(a=>this.isSameValue(a,n.value));return`<div class="${r?"nvb-multi-select-fallback-option nvb-multi-select-fallback-option--selected":"nvb-multi-select-fallback-option"}" data-option-index="${o}" data-value="${this.escapeAttribute(String(n.value??""))}"><input type="checkbox" class="nvb-control__checkbox-input nvb-option-checkbox" ${r?"checked":""} tabindex="-1" aria-hidden="true" /><div class="nvb-option__content">${this.templateEngineService.escapeHtml(n.label)}</div></div>`}).join("")}isMarkupEffectivelyEmpty(t){return String(t??"").replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi,"").replace(/<!--[\s\S]*?-->/g,"").trim().length===0}sanitizeCustomDropdownHtml(t){return this.markupSecurityService.sanitizeHtml(String(t??""))}hasSelectableOptionMarkup(t){return/data-value\s*=/.test(String(t??""))}hydrateSelectableOptionMarkup(t,e,n){const o=String(t??"").trim();if(!o||this.hasSelectableOptionMarkup(o))return o;const r=this.documentRef;if(!r||typeof r.createElement!=="function")return o;const a=r.createElement("div");a.innerHTML=o;const i=this.resolveTemplateOptionNodes(a,e.length);if(!i||i.length!==e.length)return o;i.forEach((d,u)=>{const v=e[u];const b=n.some(m=>this.isSameValue(m,v?.value));d.setAttribute("data-option-index",String(u));d.setAttribute("data-value",String(v?.value??""));d.classList.add("nvb-multi-select-template-option");if(b)d.classList.add("nvb-multi-select-template-option--selected")});return a.innerHTML}resolveTemplateOptionNodes(t,e){const n=Array.from(t.children);if(n.length===e)return n;if(n.length===1){const o=Array.from(n[0].children);if(o.length===e)return o}return null}hasMeaningfulOptionContent(t){const e=String(t??"").trim();if(!e)return false;const n=this.documentRef;if(!n||typeof n.createElement!=="function")return e.replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi,"").replace(/<[^>]+>/g,"").replace(/\s+/g,"").trim().length>0;const o=n.createElement("div");o.innerHTML=e;const r=Array.from(o.querySelectorAll("[data-value]"));if(r.length===0)return false;return r.some(a=>{if(String(a.textContent??"").replace(/\s+/g," ").trim().length>0)return true;return Boolean(a.querySelector("img,svg,video,canvas,nvb-icon,.nvb-icon-svg,[data-icon]"))})}resolveOptionValue(t){const e=this.flattenAllOptions().find(n=>String(n.value??"")===t);return e?e.value:t}resolveOptionValueFromIndex(t){const e=Number.parseInt(String(t??""),10);if(!Number.isInteger(e)||e<0)return{found:false,value:null};const n=this.flattenCurrentOptions();if(e>=n.length)return{found:false,value:null};return{found:true,value:n[e]?.value}}resolveOptionValueFromDomOrder(t){const e=t.closest(".nvb-options-container__custom");if(!e)return{found:false,value:null};const n=Array.from(e.querySelectorAll("[data-option-index], [data-value]")).filter(o=>{return!o.parentElement?.closest("[data-option-index], [data-value]")}).indexOf(t);if(n<0)return{found:false,value:null};return this.resolveOptionValueFromIndex(String(n))}escapeAttribute(t){return t.replaceAll("&","&amp;").replaceAll('"',"&quot;").replaceAll("<","&lt;").replaceAll(">","&gt;")}normalizeOptionTemplate(t){if(typeof t!=="string")return null;const e=t.trim();if(!e)return null;const n=e.toLowerCase();if(n==="null"||n==="undefined")return null;return e}shouldRenderCollectionTemplate(t){const e=String(t??"");return/@for\s*\(/.test(e)||/@(?:if|let|switch)\s*\([^)]*\b(?:items|options|filteredOptions|selectedItem|selectedItems)\b[^)]*\)/.test(e)||/(?:\{\{|\{)\s*[^{}]*\b(?:items|options|filteredOptions|selectedItem|selectedItems)\b[^{}]*\s*(?:\}\}|\})/.test(e)}isSameValue(t,e){return String(t??"")===String(e??"")}filterOptionsByVisibility(t){if(!Array.isArray(t))return[];if(this.hasGroupedOptions(t))return t.map(e=>{if(!this.isOptionVisible(e))return null;const n=(Array.isArray(e?.items)?e.items:[]).filter(o=>this.passesOptionFilters(o)&&this.isOptionVisible(o));if(n.length===0)return null;return{...e,items:n}}).filter(e=>e!==null);return t.filter(e=>this.passesOptionFilters(e)&&this.isOptionVisible(e))}hasGroupedOptions(t){return Array.isArray(t)&&t.some(e=>Array.isArray(e?.["items"]))}resolveGroupValues(t){return(Array.isArray(t?.["items"])?t["items"]:[]).map(e=>e?.["value"]).filter((e,n,o)=>{return o.findIndex(r=>this.isSameValue(r,e))===n})}mergeSelectedGroupValues(t,e){const n=[...t];e.forEach(o=>{if(!n.some(r=>this.isSameValue(r,o)))n.push(o)});return n}passesOptionFilters(t){const e=String(this.model().filterOptionsBy??"").trim()||String(this.model().dataSource?.filterOptionsBy??"").trim();const n=String(this.model().filterIfEqual??"").trim();const o=String(this.model().filterIfNotEqual??"").trim();if(!e&&!n&&!o)return true;const r=this.dataService.getData()??{};return B([t],e,r,{valuePath:"value",filterIfEqual:n,filterIfNotEqual:o}).length>0}isOptionVisible(t){const e=String(t?.visibleIf??"").trim();if(!e)return true;try{const n=this.normalizeOptionCondition(e);return!!this.expressionService.runPropertyConditionSync(this.dataService.getData(),n)}catch{return true}}normalizeOptionCondition(t){const e=t.replace(/{/g,"").replace(/}/g,"").trim();if(!e)return"";return this.expressionService.applyContextToExpression(e,this.model())}slugify(t){return String(t??"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+/,"").replace(/-+$/,"").slice(0,50)}scheduleDropdownPositionCalculation(){this.cancelScheduledDropdownCalculation();if(!this.isOpen())return;this.dropdownLayoutFrame=window.requestAnimationFrame(()=>{this.dropdownLayoutFrame=null;this.calculateDropdownPosition()})}cancelScheduledDropdownCalculation(){if(this.dropdownLayoutFrame===null)return;window.cancelAnimationFrame(this.dropdownLayoutFrame);this.dropdownLayoutFrame=null}static ɵfac=p.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:w,deps:[],target:p.ɵɵFactoryTarget.Component});static ɵcmp=p.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:w,isStandalone:true,selector:"multi-select-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},host:{listeners:{"document:click":"onDocumentClick($event)","document:scroll":"onDocumentScroll()","window:resize":"onWindowResize()"}},viewQueries:[{propertyName:"dropdownContainer",first:true,predicate:["dropdownContainer"],descendants:true},{propertyName:"selectButton",first:true,predicate:["selectButton"],descendants:true},{propertyName:"dropdownPanel",first:true,predicate:["dropdownPanel"],descendants:true}],ngImport:p,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  @if (model().dataSource && !dataSourceLoaded() && isEditorView()) {\n    <div class=\"nvb-empty-element-wrapper\">\n      <div class=\"nvb-control__text-input nvb-empty-select-placeholder\"></div>\n      <small class=\"nvb-element-title\">\n        <span class=\"material-symbols-outlined\">database</span>\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n      </small>\n    </div>\n  } @else {\n    <div\n      class=\"nvb-multi-select-container\"\n      [class.nvb-multi-select-container--open]=\"isOpen()\"\n      [class.nvb-multi-select-container--loading]=\"dataSourceLoading()\"\n      #dropdownContainer\n      [attr.data-testid]=\"tid('root')\"\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n    >\n      <div\n        class=\"nvb-input-wrapper\"\n        [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input ' : 'nvb-control__text-input'\"\n        [class.nvb-input-wrapper--disabled]=\"model().disabled || dataSourceLoading()\"\n        [class.nvb-input-wrapper--loading]=\"dataSourceLoading()\"\n        #selectButton\n        [attr.tabindex]=\"dataSourceLoading() ? -1 : 0\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        (click)=\"toggleDropdown()\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur()\"\n        [attr.data-testid]=\"tid('trigger')\"\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n        [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n        [attr.aria-controls]=\"isOpen() ? dropdownOptionsId : null\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-disabled]=\"model().disabled || dataSourceLoading() ? 'true' : null\"\n        [attr.aria-readonly]=\"model().readOnly ? 'true' : null\"\n        [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n        [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n      >\n        <span\n          class=\"nvb-select-value\"\n          [class.nvb-select-value--placeholder]=\"!hasValue() || dataSourceLoading()\"\n        >\n          {{\n            dataSourceLoading()\n              ? ('multiSelect.loading' | uiT: 'Loading options...')\n              : displayValue()\n          }}\n        </span>\n        <div class=\"nvb-select-actions\">\n          @if (dataSourceLoading()) {\n            <span class=\"nvb-select-loading-spinner\" aria-hidden=\"true\"></span>\n          } @else if (hasValue()) {\n            <button\n              type=\"button\"\n              class=\"nvb-clear-button\"\n              (click)=\"clearSelection($event)\"\n              [attr.title]=\"'multiSelect.clear' | uiT: 'Clear'\"\n              [attr.aria-label]=\"'multiSelect.clearSelections' | uiT: 'Clear selections'\"\n              [attr.data-testid]=\"tid('clear')\"\n            >\n              <span class=\"material-symbols-outlined\">close</span>\n            </button>\n          }\n          @if (!dataSourceLoading()) {\n            <span class=\"material-symbols-outlined nvb-select-arrow\" [class.nvb-open]=\"isOpen()\"\n              >keyboard_arrow_down</span\n            >\n          }\n        </div>\n      </div>\n\n      @if (isOpen() && !dataSourceLoading()) {\n        <div\n          class=\"nvb-dropdown\"\n          [class.nvb-dropdown-top]=\"dropdownPosition() === 'top'\"\n          #dropdownPanel\n          [style.--nvb-multi-select-dropdown-max-height.px]=\"dropdownMaxHeight()\"\n          [style.left.px]=\"dropdownLeft()\"\n          [style.top.px]=\"dropdownTop()\"\n          [style.min-width.px]=\"dropdownMinWidth()\"\n        >\n          @if (customDropdownCss()) {\n            <nvb-style-outlet [cssText]=\"customDropdownCss()\"></nvb-style-outlet>\n          }\n          @if (showSearchBox()) {\n            <div class=\"nvb-search-container\">\n              <input\n                type=\"text\"\n                class=\"nvb-control__text-input\"\n                [placeholder]=\"\n                  model().placeholder\n                    ? (model().placeholder | dynamicText: model())\n                    : ('multiSelect.searchPlaceholder' | uiT: 'Search...')\n                \"\n                [value]=\"searchTerm()\"\n                (input)=\"onSearchInput($event)\"\n                (click)=\"$event.stopPropagation()\"\n                [attr.aria-label]=\"'multiSelect.searchPlaceholder' | uiT: 'Search...'\"\n                [attr.data-testid]=\"tid('search')\"\n              />\n              @if (searchTerm()) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-search-clear-button\"\n                  (click)=\"clearSearch($event)\"\n                  [attr.title]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\n                  [attr.aria-label]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\n                  [attr.data-testid]=\"tid('search-clear')\"\n                >\n                  x\n                </button>\n              }\n            </div>\n          }\n\n          <div\n            class=\"nvb-options-container\"\n            [id]=\"dropdownOptionsId\"\n            [attr.data-testid]=\"tid('options')\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n          >\n            @if (hasCustomTemplate()) {\n              <div [attr.data-testid]=\"tid('custom-value')\"\n                class=\"nvb-options-container__custom\"\n                [attr.data-nvb-template-scope]=\"dropdownTemplateScopeId\"\n                (click)=\"onCustomOptionsClick($event)\"\n                [innerHTML]=\"customDropdownHtml()\"\n              ></div>\n            } @else if (usesGroupedOptions()) {\n              @for (group of filteredOptions(); track group.label; let tidIndex1 = $index) {\n                <div class=\"nvb-option-group\">\n                  <label [attr.data-testid]=\"tid('toggle-group', tidIndex1)\"\n                    class=\"nvb-group-label nvb-group-label--selectable\"\n                    (click)=\"toggleGroup(group, $event)\"\n                  >\n                    <input [attr.data-testid]=\"tid('checkbox-input', tidIndex1)\"\n                      type=\"checkbox\"\n                      class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                      [checked]=\"isGroupSelected(group)\"\n                      [indeterminate]=\"isGroupPartiallySelected(group)\"\n                      (click)=\"$event.stopPropagation()\"\n                      [attr.aria-label]=\"group.label\"\n                    />\n                    <span>{{ group.label }}</span>\n                  </label>\n                  @for (item of group.items; track item.value; let optionIndex = $index) {\n                    <div\n                      class=\"nvb-option\"\n                      [class.nvb-selected]=\"isSelected(item.value)\"\n                      (click)=\"toggleOption(item.value, $event)\"\n                      role=\"option\"\n                      [attr.aria-selected]=\"isSelected(item.value)\"\n                      [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\n                      [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label)\"\n                    >\n                      <input\n                        type=\"checkbox\"\n                        class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                        [checked]=\"isSelected(item.value)\"\n                        [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label) + '-checkbox'\"\n                        [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\n                        tabindex=\"-1\"\n                        aria-hidden=\"true\"\n                      />\n                      <span>{{ item.label }}</span>\n                    </div>\n                  }\n                </div>\n              }\n            } @else {\n              @for (option of filteredOptions(); track option.value; let optionIndex = $index) {\n                <div\n                  class=\"nvb-option\"\n                  [class.nvb-selected]=\"isSelected(option.value)\"\n                  (click)=\"toggleOption(option.value, $event)\"\n                  role=\"option\"\n                  [attr.aria-selected]=\"isSelected(option.value)\"\n                  [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\n                  [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex)\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                    [checked]=\"isSelected(option.value)\"\n                    [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex) + '-checkbox'\"\n                    [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\n                    tabindex=\"-1\"\n                    aria-hidden=\"true\"\n                  />\n                  <span>{{ option.label }}</span>\n                </div>\n              }\n            }\n\n            @if (!hasCustomTemplate() && filteredOptions().length === 0) {\n              <div class=\"nvb-no-results\">{{ 'multiSelect.empty' | uiT: 'No results found' }}</div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n</element-wrapper>\n",styles:[".nvb-multi-select-container{position:relative;width:100%;overflow:visible}.nvb-multi-select-container--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-multi-select-container--loading{cursor:progress}.nvb-select-value{flex:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}.nvb-select-value--placeholder{color:var(--nvb-color-neutral-500)}.nvb-select-actions{display:flex;align-items:center;gap:4px;margin-left:8px}.nvb-clear-button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:16px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-clear-button .material-symbols-outlined{font-size:16px;line-height:1}.nvb-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-select-arrow{font-size:16px;transition:transform .2s;color:var(--nvb-color-neutral-500)}.nvb-select-arrow.nvb-open{transform:rotate(180deg)}.nvb-dropdown{--nvb-multi-select-dropdown-max-height: 300px;position:fixed;left:0;top:0;background:color-mix(in oklab,var(--nvb-color-neutral-000) 92%,var(--nvb-color-neutral-050));border:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 82%,var(--nvb-color-surface-mix-target, white));border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--nvb-radius-md)));box-shadow:var(--nvb-shadow-16, 0 12px 24px color-mix(in oklab, var(--nvb-color-neutral-950) 12%, transparent));z-index:var(--nvb-floating-overlay-z-index, 2147483000);max-height:var(--nvb-multi-select-dropdown-max-height);display:flex;flex-direction:column;padding:4px;overflow:hidden}.nvb-dropdown.nvb-dropdown-top{transform:translateY(calc(-100% - 4px))}.nvb-search-container{padding:0 0 4px;border-bottom:1px solid var(--nvb-color-neutral-200);background:transparent;position:relative}.nvb-search-container .nvb-control__text-input{box-sizing:border-box;height:var(--nvb-input-height);min-height:var(--nvb-input-height);line-height:calc(var(--nvb-input-height) - 2px);padding-top:0;padding-bottom:0;border-color:var(--nvb-color-neutral-300);background-color:color-mix(in oklab,var(--nvb-color-neutral-000) 90%,var(--nvb-color-neutral-050));color:var(--nvb-color-neutral-800)}.nvb-search-container .nvb-control__text-input::placeholder{color:var(--nvb-color-neutral-500)}.nvb-search-clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:16px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-search-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-options-container{overflow-y:auto;max-height:calc(var(--nvb-multi-select-dropdown-max-height) - 44px);min-height:0;padding-top:4px;background:transparent}.nvb-options-container__custom{display:flex;flex-direction:column;gap:2px;min-height:1px}.nvb-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}.nvb-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}.nvb-option.nvb-selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}.nvb-option-checkbox{pointer-events:none;margin:0}.nvb-option__content{min-width:0}.nvb-option-group .nvb-group-label{min-height:28px;margin:4px 0 2px;padding:0 10px;font-size:12px;font-weight:600;color:var(--nvb-color-neutral-600);text-transform:uppercase;background-color:transparent;border-top:1px solid var(--nvb-color-neutral-200)}.nvb-option-group .nvb-group-label--selectable{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;cursor:pointer}.nvb-option-group .nvb-group-label--selectable .nvb-option-checkbox{pointer-events:auto}.nvb-option-group .nvb-group-label:first-child{border-top:none}.nvb-no-results{padding:12px;text-align:center;color:var(--nvb-color-neutral-500);font-size:14px}.nvb-input-wrapper{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;min-height:var(--nvb-input-height)}.nvb-input-wrapper--disabled{cursor:not-allowed;border-color:color-mix(in oklab,var(--nvb-color-neutral-300) 88%,var(--nvb-color-neutral-100));background:color-mix(in oklab,var(--nvb-color-neutral-100) 76%,var(--nvb-color-neutral-000));color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--disabled .nvb-select-value,.nvb-input-wrapper--disabled .nvb-select-arrow,.nvb-input-wrapper--disabled .nvb-clear-button{color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--loading{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--nvb-color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--nvb-color-neutral-050) 78%,var(--nvb-color-neutral-000));background-size:220% 100%;animation:nvb-multi-select-loading-shimmer 1.35s ease-in-out infinite}.nvb-select-loading-spinner{width:14px;height:14px;border:2px solid color-mix(in oklab,var(--nvb-color-neutral-400) 45%,transparent);border-top-color:var(--nvb-color-primary-500);border-radius:var(--nvb-radius-full);animation:nvb-multi-select-loading-spin .8s linear infinite}.nvb-empty-select-placeholder{height:31px;background:linear-gradient(90deg,var(--nvb-color-neutral-100) 25%,var(--nvb-color-neutral-200) 50%,var(--nvb-color-neutral-100) 75%)}:host ::ng-deep .nvb-options-container__custom .nvb-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s}:host ::ng-deep .nvb-options-container__custom .nvb-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}:host ::ng-deep .nvb-options-container__custom .nvb-option.nvb-selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-template-option{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option--selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}@keyframes nvb-multi-select-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-multi-select-loading-spin{to{transform:rotate(360deg)}}\n"],dependencies:[{kind:"ngmodule",type:D},{kind:"directive",type:U.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"ngmodule",type:L},{kind:"component",type:T,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"component",type:C,selector:"nvb-style-outlet",inputs:["cssText","renderInPlace","styleKey"]},{kind:"pipe",type:y,name:"dynamicText"},{kind:"pipe",type:O,name:"uiT"}],changeDetection:p.ChangeDetectionStrategy.OnPush})};p.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:x,decorators:[{type:R,args:[{selector:"multi-select-element",changeDetection:q.OnPush,standalone:true,imports:[D,L,T,y,C,O],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  @if (model().dataSource && !dataSourceLoaded() && isEditorView()) {\n    <div class=\"nvb-empty-element-wrapper\">\n      <div class=\"nvb-control__text-input nvb-empty-select-placeholder\"></div>\n      <small class=\"nvb-element-title\">\n        <span class=\"material-symbols-outlined\">database</span>\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n      </small>\n    </div>\n  } @else {\n    <div\n      class=\"nvb-multi-select-container\"\n      [class.nvb-multi-select-container--open]=\"isOpen()\"\n      [class.nvb-multi-select-container--loading]=\"dataSourceLoading()\"\n      #dropdownContainer\n      [attr.data-testid]=\"tid('root')\"\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n    >\n      <div\n        class=\"nvb-input-wrapper\"\n        [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input ' : 'nvb-control__text-input'\"\n        [class.nvb-input-wrapper--disabled]=\"model().disabled || dataSourceLoading()\"\n        [class.nvb-input-wrapper--loading]=\"dataSourceLoading()\"\n        #selectButton\n        [attr.tabindex]=\"dataSourceLoading() ? -1 : 0\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        (click)=\"toggleDropdown()\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur()\"\n        [attr.data-testid]=\"tid('trigger')\"\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n        [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n        [attr.aria-controls]=\"isOpen() ? dropdownOptionsId : null\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-disabled]=\"model().disabled || dataSourceLoading() ? 'true' : null\"\n        [attr.aria-readonly]=\"model().readOnly ? 'true' : null\"\n        [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n        [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n      >\n        <span\n          class=\"nvb-select-value\"\n          [class.nvb-select-value--placeholder]=\"!hasValue() || dataSourceLoading()\"\n        >\n          {{\n            dataSourceLoading()\n              ? ('multiSelect.loading' | uiT: 'Loading options...')\n              : displayValue()\n          }}\n        </span>\n        <div class=\"nvb-select-actions\">\n          @if (dataSourceLoading()) {\n            <span class=\"nvb-select-loading-spinner\" aria-hidden=\"true\"></span>\n          } @else if (hasValue()) {\n            <button\n              type=\"button\"\n              class=\"nvb-clear-button\"\n              (click)=\"clearSelection($event)\"\n              [attr.title]=\"'multiSelect.clear' | uiT: 'Clear'\"\n              [attr.aria-label]=\"'multiSelect.clearSelections' | uiT: 'Clear selections'\"\n              [attr.data-testid]=\"tid('clear')\"\n            >\n              <span class=\"material-symbols-outlined\">close</span>\n            </button>\n          }\n          @if (!dataSourceLoading()) {\n            <span class=\"material-symbols-outlined nvb-select-arrow\" [class.nvb-open]=\"isOpen()\"\n              >keyboard_arrow_down</span\n            >\n          }\n        </div>\n      </div>\n\n      @if (isOpen() && !dataSourceLoading()) {\n        <div\n          class=\"nvb-dropdown\"\n          [class.nvb-dropdown-top]=\"dropdownPosition() === 'top'\"\n          #dropdownPanel\n          [style.--nvb-multi-select-dropdown-max-height.px]=\"dropdownMaxHeight()\"\n          [style.left.px]=\"dropdownLeft()\"\n          [style.top.px]=\"dropdownTop()\"\n          [style.min-width.px]=\"dropdownMinWidth()\"\n        >\n          @if (customDropdownCss()) {\n            <nvb-style-outlet [cssText]=\"customDropdownCss()\"></nvb-style-outlet>\n          }\n          @if (showSearchBox()) {\n            <div class=\"nvb-search-container\">\n              <input\n                type=\"text\"\n                class=\"nvb-control__text-input\"\n                [placeholder]=\"\n                  model().placeholder\n                    ? (model().placeholder | dynamicText: model())\n                    : ('multiSelect.searchPlaceholder' | uiT: 'Search...')\n                \"\n                [value]=\"searchTerm()\"\n                (input)=\"onSearchInput($event)\"\n                (click)=\"$event.stopPropagation()\"\n                [attr.aria-label]=\"'multiSelect.searchPlaceholder' | uiT: 'Search...'\"\n                [attr.data-testid]=\"tid('search')\"\n              />\n              @if (searchTerm()) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-search-clear-button\"\n                  (click)=\"clearSearch($event)\"\n                  [attr.title]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\n                  [attr.aria-label]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\n                  [attr.data-testid]=\"tid('search-clear')\"\n                >\n                  x\n                </button>\n              }\n            </div>\n          }\n\n          <div\n            class=\"nvb-options-container\"\n            [id]=\"dropdownOptionsId\"\n            [attr.data-testid]=\"tid('options')\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n          >\n            @if (hasCustomTemplate()) {\n              <div [attr.data-testid]=\"tid('custom-value')\"\n                class=\"nvb-options-container__custom\"\n                [attr.data-nvb-template-scope]=\"dropdownTemplateScopeId\"\n                (click)=\"onCustomOptionsClick($event)\"\n                [innerHTML]=\"customDropdownHtml()\"\n              ></div>\n            } @else if (usesGroupedOptions()) {\n              @for (group of filteredOptions(); track group.label; let tidIndex1 = $index) {\n                <div class=\"nvb-option-group\">\n                  <label [attr.data-testid]=\"tid('toggle-group', tidIndex1)\"\n                    class=\"nvb-group-label nvb-group-label--selectable\"\n                    (click)=\"toggleGroup(group, $event)\"\n                  >\n                    <input [attr.data-testid]=\"tid('checkbox-input', tidIndex1)\"\n                      type=\"checkbox\"\n                      class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                      [checked]=\"isGroupSelected(group)\"\n                      [indeterminate]=\"isGroupPartiallySelected(group)\"\n                      (click)=\"$event.stopPropagation()\"\n                      [attr.aria-label]=\"group.label\"\n                    />\n                    <span>{{ group.label }}</span>\n                  </label>\n                  @for (item of group.items; track item.value; let optionIndex = $index) {\n                    <div\n                      class=\"nvb-option\"\n                      [class.nvb-selected]=\"isSelected(item.value)\"\n                      (click)=\"toggleOption(item.value, $event)\"\n                      role=\"option\"\n                      [attr.aria-selected]=\"isSelected(item.value)\"\n                      [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\n                      [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label)\"\n                    >\n                      <input\n                        type=\"checkbox\"\n                        class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                        [checked]=\"isSelected(item.value)\"\n                        [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label) + '-checkbox'\"\n                        [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\n                        tabindex=\"-1\"\n                        aria-hidden=\"true\"\n                      />\n                      <span>{{ item.label }}</span>\n                    </div>\n                  }\n                </div>\n              }\n            } @else {\n              @for (option of filteredOptions(); track option.value; let optionIndex = $index) {\n                <div\n                  class=\"nvb-option\"\n                  [class.nvb-selected]=\"isSelected(option.value)\"\n                  (click)=\"toggleOption(option.value, $event)\"\n                  role=\"option\"\n                  [attr.aria-selected]=\"isSelected(option.value)\"\n                  [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\n                  [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex)\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                    [checked]=\"isSelected(option.value)\"\n                    [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex) + '-checkbox'\"\n                    [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\n                    tabindex=\"-1\"\n                    aria-hidden=\"true\"\n                  />\n                  <span>{{ option.label }}</span>\n                </div>\n              }\n            }\n\n            @if (!hasCustomTemplate() && filteredOptions().length === 0) {\n              <div class=\"nvb-no-results\">{{ 'multiSelect.empty' | uiT: 'No results found' }}</div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n</element-wrapper>\n",styles:[".nvb-multi-select-container{position:relative;width:100%;overflow:visible}.nvb-multi-select-container--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-multi-select-container--loading{cursor:progress}.nvb-select-value{flex:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}.nvb-select-value--placeholder{color:var(--nvb-color-neutral-500)}.nvb-select-actions{display:flex;align-items:center;gap:4px;margin-left:8px}.nvb-clear-button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:16px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-clear-button .material-symbols-outlined{font-size:16px;line-height:1}.nvb-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-select-arrow{font-size:16px;transition:transform .2s;color:var(--nvb-color-neutral-500)}.nvb-select-arrow.nvb-open{transform:rotate(180deg)}.nvb-dropdown{--nvb-multi-select-dropdown-max-height: 300px;position:fixed;left:0;top:0;background:color-mix(in oklab,var(--nvb-color-neutral-000) 92%,var(--nvb-color-neutral-050));border:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 82%,var(--nvb-color-surface-mix-target, white));border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--nvb-radius-md)));box-shadow:var(--nvb-shadow-16, 0 12px 24px color-mix(in oklab, var(--nvb-color-neutral-950) 12%, transparent));z-index:var(--nvb-floating-overlay-z-index, 2147483000);max-height:var(--nvb-multi-select-dropdown-max-height);display:flex;flex-direction:column;padding:4px;overflow:hidden}.nvb-dropdown.nvb-dropdown-top{transform:translateY(calc(-100% - 4px))}.nvb-search-container{padding:0 0 4px;border-bottom:1px solid var(--nvb-color-neutral-200);background:transparent;position:relative}.nvb-search-container .nvb-control__text-input{box-sizing:border-box;height:var(--nvb-input-height);min-height:var(--nvb-input-height);line-height:calc(var(--nvb-input-height) - 2px);padding-top:0;padding-bottom:0;border-color:var(--nvb-color-neutral-300);background-color:color-mix(in oklab,var(--nvb-color-neutral-000) 90%,var(--nvb-color-neutral-050));color:var(--nvb-color-neutral-800)}.nvb-search-container .nvb-control__text-input::placeholder{color:var(--nvb-color-neutral-500)}.nvb-search-clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:16px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-search-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-options-container{overflow-y:auto;max-height:calc(var(--nvb-multi-select-dropdown-max-height) - 44px);min-height:0;padding-top:4px;background:transparent}.nvb-options-container__custom{display:flex;flex-direction:column;gap:2px;min-height:1px}.nvb-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}.nvb-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}.nvb-option.nvb-selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}.nvb-option-checkbox{pointer-events:none;margin:0}.nvb-option__content{min-width:0}.nvb-option-group .nvb-group-label{min-height:28px;margin:4px 0 2px;padding:0 10px;font-size:12px;font-weight:600;color:var(--nvb-color-neutral-600);text-transform:uppercase;background-color:transparent;border-top:1px solid var(--nvb-color-neutral-200)}.nvb-option-group .nvb-group-label--selectable{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;cursor:pointer}.nvb-option-group .nvb-group-label--selectable .nvb-option-checkbox{pointer-events:auto}.nvb-option-group .nvb-group-label:first-child{border-top:none}.nvb-no-results{padding:12px;text-align:center;color:var(--nvb-color-neutral-500);font-size:14px}.nvb-input-wrapper{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;min-height:var(--nvb-input-height)}.nvb-input-wrapper--disabled{cursor:not-allowed;border-color:color-mix(in oklab,var(--nvb-color-neutral-300) 88%,var(--nvb-color-neutral-100));background:color-mix(in oklab,var(--nvb-color-neutral-100) 76%,var(--nvb-color-neutral-000));color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--disabled .nvb-select-value,.nvb-input-wrapper--disabled .nvb-select-arrow,.nvb-input-wrapper--disabled .nvb-clear-button{color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--loading{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--nvb-color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--nvb-color-neutral-050) 78%,var(--nvb-color-neutral-000));background-size:220% 100%;animation:nvb-multi-select-loading-shimmer 1.35s ease-in-out infinite}.nvb-select-loading-spinner{width:14px;height:14px;border:2px solid color-mix(in oklab,var(--nvb-color-neutral-400) 45%,transparent);border-top-color:var(--nvb-color-primary-500);border-radius:var(--nvb-radius-full);animation:nvb-multi-select-loading-spin .8s linear infinite}.nvb-empty-select-placeholder{height:31px;background:linear-gradient(90deg,var(--nvb-color-neutral-100) 25%,var(--nvb-color-neutral-200) 50%,var(--nvb-color-neutral-100) 75%)}:host ::ng-deep .nvb-options-container__custom .nvb-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s}:host ::ng-deep .nvb-options-container__custom .nvb-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}:host ::ng-deep .nvb-options-container__custom .nvb-option.nvb-selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-template-option{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option--selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}@keyframes nvb-multi-select-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-multi-select-loading-spin{to{transform:rotate(360deg)}}\n"]}]}],propDecorators:{model:[{type:p.Input,args:[{isSignal:true,alias:"model",required:true}]}],dropdownContainer:[{type:f,args:["dropdownContainer"]}],selectButton:[{type:f,args:["selectButton"]}],dropdownPanel:[{type:f,args:["dropdownPanel"]}],onDocumentClick:[{type:g,args:["document:click",["$event"]]}],onDocumentScroll:[{type:g,args:["document:scroll"]}],onWindowResize:[{type:g,args:["window:resize"]}]}});export{Y as n,x as t};
+import{t as _}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{_ as V,bt as M,cn as y,f as E,ln as A,n as k,r as O,un as z}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-WxfEoWah.mjs";import{X as P,Z as $,at as N,lt as H,ot as B}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-BYA8UfCA.mjs";import{a as W,i as h,r as F,t as T}from"./ngxviewbuilder-runtime-element-wrapper-EBaWVZvf.mjs";import{t as G}from"./ngxviewbuilder-runtime-dropdown-coordinator.service-CDJcQkrB.mjs";import{t as C}from"./ngxviewbuilder-runtime-nvb-style-outlet-CVovePT_.mjs";import*as p from"@angular/core";import{ChangeDetectionStrategy as q,Component as R,HostListener as g,ViewChild as f,computed as l,inject as c,input as j,signal as s}from"@angular/core";import*as U from"@angular/common";import{CommonModule as D,DOCUMENT as K}from"@angular/common";import{FormsModule as L}from"@angular/forms";var Y=_({MultiSelectElement:()=>x});var x=class w{dropdownTemplateScopeId=`nvb-multi-select-template-${Math.random().toString(36).slice(2,11)}`;dropdownOptionsId=`nvb-multi-select-options-${Math.random().toString(36).slice(2,11)}`;dropdownTemplateScopeSelector=`[data-nvb-template-scope="${this.dropdownTemplateScopeId}"]`;model=j.required(...ngDevMode?[{debugName:"model"}]:[]);tid=F(this.model,"nvb-multi-select","multi-select");dropdownContainer;selectButton;dropdownPanel;isOpen=s(false,...ngDevMode?[{debugName:"isOpen"}]:[]);searchTerm=s("",...ngDevMode?[{debugName:"searchTerm"}]:[]);selectedValues=s([],...ngDevMode?[{debugName:"selectedValues"}]:[]);dataSourceLoaded=s(false,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);isEditorView=s(y.isEditor(),...ngDevMode?[{debugName:"isEditorView"}]:[]);dropdownPosition=s("bottom",...ngDevMode?[{debugName:"dropdownPosition"}]:[]);dropdownMaxHeight=s(300,...ngDevMode?[{debugName:"dropdownMaxHeight"}]:[]);dropdownLeft=s(0,...ngDevMode?[{debugName:"dropdownLeft"}]:[]);dropdownTop=s(0,...ngDevMode?[{debugName:"dropdownTop"}]:[]);dropdownMinWidth=s(0,...ngDevMode?[{debugName:"dropdownMinWidth"}]:[]);useCompactStyle=s(false,...ngDevMode?[{debugName:"useCompactStyle"}]:[]);dataVersion=s(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);documentRef=c(K);dataService=c(A);eventService=c(V);expressionService=c(E);elementActionService=c($);templateEngineService=c(P);markupSecurityService=c(H);validatorService=c(N);dropdownCoordinatorService=c(G);uiTranslationService=c(z);dropdownId=`multi-select-${Math.random().toString(36).slice(2,11)}`;dropdownCoordinatorSubscription=null;defaultDropdownHeight=300;minDropdownHeight=96;dropdownVerticalGap=4;dropdownBoundaryPadding=8;dropdownLayoutFrame=null;normalizedOptionTemplate=l(()=>this.normalizeOptionTemplate(this.templateEngineService.resolveTemplateContentByName(String(this.model().optionTemplateName??"").trim(),String(this.model().optionTemplate??"").trim())),...ngDevMode?[{debugName:"normalizedOptionTemplate"}]:[]);visibleOptions=l(()=>{this.dataVersion();return this.filterOptionsByVisibility(this.model().options||[])},...ngDevMode?[{debugName:"visibleOptions"}]:[]);usesGroupedOptions=l(()=>this.hasGroupedOptions(this.model().options||[]),...ngDevMode?[{debugName:"usesGroupedOptions"}]:[]);filteredOptions=l(()=>{const t=this.visibleOptions();const e=this.searchTerm().toLowerCase();if(!e)return t;if(this.usesGroupedOptions())return t.map(n=>({...n,items:n.items.filter(o=>o.label.toLowerCase().includes(e))})).filter(n=>n.items.length>0);return t.filter(n=>n.label.toLowerCase().includes(e))},...ngDevMode?[{debugName:"filteredOptions"}]:[]);hasCustomTemplate=l(()=>this.normalizedOptionTemplate()!==null,...ngDevMode?[{debugName:"hasCustomTemplate"}]:[]);customDropdownState=l(()=>{if(!this.hasCustomTemplate())return{html:null,error:null};const t=this.normalizedOptionTemplate();if(!t)return{html:null,error:null};const e=this.flattenCurrentOptions();if(e.length===0)return{html:`<div class="nvb-no-results">${this.uiTranslationService.translate("multiSelect.empty","No results found")}</div>`,error:null};try{const n=this.shouldRenderCollectionTemplate(t);let o=n?this.renderCollectionTemplate(t,e,this.selectedValues()):this.renderTemplate(t,e,this.selectedValues());if(n&&(this.isMarkupEffectivelyEmpty(o)||!this.hasSelectableOptionMarkup(o)))o=this.renderTemplate(t,e,this.selectedValues());o=this.sanitizeCustomDropdownHtml(o);o=this.hydrateSelectableOptionMarkup(o,e,this.selectedValues());if(this.isMarkupEffectivelyEmpty(o)||!this.hasSelectableOptionMarkup(o)||!this.hasMeaningfulOptionContent(o))o=this.renderDefaultDropdownHtml(e,this.selectedValues());return{html:o,error:null}}catch(n){const o=n instanceof Error?n.message:this.uiTranslationService.translate("multiSelect.templateError","Template render error");return{html:`<div class="nvb-no-results">${this.templateEngineService.escapeHtml(o)}</div>`,error:o}}},...ngDevMode?[{debugName:"customDropdownState"}]:[]);templateError=l(()=>this.customDropdownState().error,...ngDevMode?[{debugName:"templateError"}]:[]);customDropdownHtml=l(()=>this.customDropdownState().html,...ngDevMode?[{debugName:"customDropdownHtml"}]:[]);customDropdownCss=l(()=>{const t=this.normalizedOptionTemplate();if(!t)return"";return this.templateEngineService.resolveTemplateCss(t,this.dropdownTemplateScopeSelector)},...ngDevMode?[{debugName:"customDropdownCss"}]:[]);hasValue=l(()=>this.selectedValues().length>0,...ngDevMode?[{debugName:"hasValue"}]:[]);displayValue=l(()=>{const t=this.selectedValues();if(t.length===0)return this.uiTranslationService.translate("multiSelect.placeholder","Select...");const e=this.flattenAllOptions().filter(o=>t.some(r=>this.isSameValue(r,o.value))).map(o=>o.label);if(e.length<=2)return e.join(", ");const n=e.length-2;return`${e.slice(0,2).join(", ")} +${n}`},...ngDevMode?[{debugName:"displayValue"}]:[]);dataSourceLoading=l(()=>Boolean(this.model().dataSource)&&!this.dataSourceLoaded()&&!this.isEditorView(),...ngDevMode?[{debugName:"dataSourceLoading"}]:[]);onDataSourceLoadedHandler=()=>{this.dataSourceLoaded.set(true);this.dataVersion.update(t=>t+1)};onDataValueChangedHandler=()=>{this.dataVersion.update(t=>t+1)};ngOnInit(){const t=!this.model().dataSource||!!this.model().dataSourceLoaded;this.dataSourceLoaded.set(t);if(this.model().dataSource)this.model().afterDataSourceLoad.add(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.add(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.add(this.onDataValueChangedHandler);this.isEditorView.set(y.isEditor());if(Array.isArray(this.model().value))this.selectedValues.set([...this.model().value]);if(this.model()?.parentElement&&this.model()?.parentElement instanceof M)this.useCompactStyle.set(this.model()?.parentElement["useCompactStyle"]);this.dropdownCoordinatorSubscription=this.dropdownCoordinatorService.activeDropdownId$.subscribe(e=>{if(!this.isOpen())return;if(e===this.dropdownId)return;this.closeDropdown()})}ngOnDestroy(){this.model().afterDataSourceLoad.remove(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.remove(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.remove(this.onDataValueChangedHandler);this.dropdownCoordinatorSubscription?.unsubscribe();this.dropdownCoordinatorSubscription=null;this.cancelScheduledDropdownCalculation();this.dropdownCoordinatorService.requestClose(this.dropdownId)}toggleDropdown(){if(this.isInteractionLocked()){this.closeDropdown();return}if(!this.isOpen()){this.openDropdown();return}this.closeDropdown()}clearSelection(t){t.stopPropagation();if(this.isInteractionLocked())return;this.selectedValues.set([]);this.searchTerm.set("");this.model().setValue([],"change");this.validatorService.handleElementBlur(this.model());this.runActions("change",[])}clearSearch(t){t.stopPropagation();this.searchTerm.set("");this.scheduleDropdownPositionCalculation()}onSearchInput(t){if(this.isInteractionLocked())return;const e=t.target.value;this.searchTerm.set(e);this.scheduleDropdownPositionCalculation()}toggleOption(t,e){e?.stopPropagation();if(this.isInteractionLocked())return;const n=[...this.selectedValues()];const o=n.findIndex(r=>this.isSameValue(r,t));if(o>=0)n.splice(o,1);else n.push(t);this.selectedValues.set(n);this.model().setValue(n,"change");this.runActions("change",n)}toggleGroup(t,e){e?.stopPropagation();if(this.isInteractionLocked())return;const n=this.resolveGroupValues(t);if(n.length===0)return;const o=[...this.selectedValues()];const r=n.every(a=>o.some(i=>this.isSameValue(i,a)))?o.filter(a=>!n.some(i=>this.isSameValue(i,a))):this.mergeSelectedGroupValues(o,n);this.selectedValues.set(r);this.model().setValue(r,"change");this.runActions("change",r)}isSelected(t){return this.selectedValues().some(e=>this.isSameValue(e,t))}isGroupSelected(t){const e=this.resolveGroupValues(t);return e.length>0&&e.every(n=>this.selectedValues().some(o=>this.isSameValue(o,n)))}isGroupPartiallySelected(t){const e=this.resolveGroupValues(t);if(e.length===0)return false;const n=e.filter(o=>this.selectedValues().some(r=>this.isSameValue(r,o))).length;return n>0&&n<e.length}resolveOptionTestId(t,e,n){const o=h(String(this.model()?.dataPath??"").trim()||String(this.model()?.name??"").trim()||"multi-select");const r=h(String(t??e).trim()||String(e+1));const a=h(String(n??"").trim());return a?`nvb-${o}-option-${a}-${r}`:`nvb-${o}-option-${r}`}resolveOptionAriaLabel(t,e){const n=String(t??"").trim();if(n)return n;return String(e??this.uiTranslationService.translate("multiSelect.optionFallback","Option"))}calculateDropdownPosition(){if(!this.selectButton){this.dropdownPosition.set("bottom");this.dropdownMaxHeight.set(this.defaultDropdownHeight);this.dropdownLeft.set(0);this.dropdownTop.set(0);this.dropdownMinWidth.set(0);return}const t=this.selectButton.nativeElement;const e=t.getBoundingClientRect();const n=Math.max(this.documentRef.documentElement?.clientWidth??0,window.innerWidth??0);const o=Math.max(this.documentRef.documentElement?.clientHeight??0,window.innerHeight??0);const r=Math.max(Math.round(e.width),84);const a=this.dropdownBoundaryPadding;const i=Math.max(a,n-r-this.dropdownBoundaryPadding);const d=Math.min(Math.max(e.left,a),i);const u=Math.max(0,o-e.bottom-this.dropdownBoundaryPadding-this.dropdownVerticalGap);const v=Math.max(0,e.top-this.dropdownBoundaryPadding-this.dropdownVerticalGap);const b=u<Math.min(this.defaultDropdownHeight,220)&&v>u;const m=b?v:u;const I=Math.min(this.defaultDropdownHeight,Math.max(this.minDropdownHeight,m));const S=W(t);this.dropdownPosition.set(b?"top":"bottom");this.dropdownMaxHeight.set(I);this.dropdownLeft.set(d-S.left);this.dropdownTop.set((b?e.top:e.bottom+this.dropdownVerticalGap)-S.top);this.dropdownMinWidth.set(r)}onTriggerFocus(){if(this.isInteractionLocked())return;this.runActions("focus")}onTriggerBlur(){if(this.isInteractionLocked())return;if(this.isOpen())return;this.validatorService.handleElementBlur(this.model());this.runActions("blur")}onTriggerKeydown(t){if(this.isInteractionLocked())return;switch(t.key){case"Enter":case" ":case"ArrowDown":case"ArrowUp":t.preventDefault();if(!this.isOpen())this.openDropdown();return;case"Escape":if(!this.isOpen())return;t.preventDefault();this.closeDropdown(true);return;default:return}}onCustomOptionsClick(t){if(this.isInteractionLocked())return;const e=t.target?.closest("[data-option-index], [data-value]");if(!e)return;const n=this.resolveOptionValueFromIndex(e.getAttribute("data-option-index"));if(n.found){this.toggleOption(n.value,t);return}const o=this.resolveOptionValueFromDomOrder(e);if(o.found){this.toggleOption(o.value,t);return}const r=e.getAttribute("data-value");if(r===null)return;const a=this.resolveOptionValue(r);this.toggleOption(a,t)}onDocumentClick(t){if(!this.isOpen())return;const e=this.dropdownContainer?.nativeElement;if(!e)return;const n=t.target;const o=typeof t.composedPath==="function"?t.composedPath():[];if(!((n?e.contains(n):false)||o.includes(e)))this.closeDropdown(true)}openDropdown(){this.calculateDropdownPosition();this.dropdownCoordinatorService.requestClose();this.dropdownCoordinatorService.requestOpen(this.dropdownId);this.isOpen.set(true);this.scheduleDropdownPositionCalculation()}closeDropdown(t=false){this.isOpen.set(false);this.searchTerm.set("");this.cancelScheduledDropdownCalculation();this.dropdownCoordinatorService.requestClose(this.dropdownId);if(t){this.validatorService.handleElementBlur(this.model());this.runActions("blur")}}runActions(t,e){const n=e!==void 0?e:this.selectedValues();const o=String(this.model().name??"").trim();const r={value:n,item:null,row:null};if(o)r[o]=n;this.elementActionService.runActions(this.model(),this.model().events??[],t,r)}isInteractionLocked(){const t=this.model();if(!t)return false;if(Boolean(t["__pfInteractionLocked"]))return true;if(this.dataSourceLoading())return true;return Boolean(t.disabled)||Boolean(t.readOnly)}onDocumentScroll(){if(!this.isOpen())return;this.calculateDropdownPosition()}onWindowResize(){if(!this.isOpen())return;this.calculateDropdownPosition()}flattenCurrentOptions(){const t=this.filteredOptions();if(this.usesGroupedOptions()){const e=[];t.forEach(n=>{(n?.items??[]).forEach(o=>{e.push({...o??{},label:String(o?.label??""),value:o?.value,groupLabel:String(n?.label??"").trim()||void 0})})});return e}return(t??[]).map(e=>({...e??{},label:String(e?.label??""),value:e?.value}))}showSearchBox(){return this.model()?.showSearch!==false&&this.flattenAllOptions().length>10}flattenAllOptions(){const t=this.filterOptionsByVisibility(this.model().options??[]);if(this.usesGroupedOptions()){const e=[];t.forEach(n=>{(n?.items??[]).forEach(o=>{e.push({...o??{},label:String(o?.label??""),value:o?.value,groupLabel:String(n?.label??"").trim()||void 0})})});return e}return t.map(e=>({...e??{},label:String(e?.label??""),value:e?.value}))}renderTemplate(t,e,n){const o=t.toLowerCase();if(o.includes("<script")||o.includes("onerror=")||o.includes("onload="))throw new Error(this.uiTranslationService.translate("multiSelect.templateUnsupportedHtml","Template contains unsupported HTML."));return e.map((r,a)=>this.renderOptionTemplate(t,r,a,n)).join("")}renderCollectionTemplate(t,e,n){const o=e.map(r=>{const a=this.applyOptionTemplateAliases(r);return{...a,selected:n.some(i=>this.isSameValue(i,a.value)),checked:n.some(i=>this.isSameValue(i,a.value))}});return this.templateEngineService.renderTemplate(t,this.buildTemplateContext(o,n,{selectedItems:o.filter(r=>n.some(a=>this.isSameValue(a,r.value)))}))}renderOptionTemplate(t,e,n,o){const r=this.applyOptionTemplateAliases(e);const a=String(e.value??"");const i=o.some(v=>this.isSameValue(v,e.value));const d=this.templateEngineService.renderTemplate(t,this.buildTemplateContext(this.flattenCurrentOptions(),o,{...r??{},option:r,item:r,row:r,label:r.label,value:r.value,index:n,groupLabel:r.groupLabel??null,selected:i,checked:i,selectedClass:i?"selected":"",selectedValues:o}));const u=this.isMarkupEffectivelyEmpty(d)?this.templateEngineService.escapeHtml(String(r.label??"")):d;if(/data-value\s*=/.test(d))return d;return`<div class="nvb-multi-select-template-option${i?" nvb-multi-select-template-option--selected":""}" data-option-index="${n}" data-value="${this.escapeAttribute(a)}"><input type="checkbox" class="nvb-control__checkbox-input nvb-option-checkbox" ${i?"checked":""} tabindex="-1" aria-hidden="true" /><div class="nvb-option__content">${u}</div></div>`}buildTemplateContext(t,e,n={}){const o=t.map(a=>this.applyOptionTemplateAliases(a));const r={...this.dataService.getData()??{},model:this.model(),element:this.model(),field:this.model(),items:o,options:o,filteredOptions:o,selectedValues:e,value:e,...n};return this.templateEngineService.applyTemplateFieldMap(r,this.resolveOptionTemplateFieldMap())}resolveOptionTemplateFieldMap(){const t=this.model()["optionTemplateFieldMap"];return t&&typeof t==="object"&&!Array.isArray(t)?t:null}applyOptionTemplateAliases(t){const e=t??{};const n=e["label"];const o=e["value"];return{...e,label:String(n??""),value:o,display:e["display"]??n??"",key:e["key"]??o,text:e["text"]??n??"",title:e["title"]??n??""}}renderDefaultDropdownHtml(t,e){return t.map((n,o)=>{const r=e.some(a=>this.isSameValue(a,n.value));return`<div class="${r?"nvb-multi-select-fallback-option nvb-multi-select-fallback-option--selected":"nvb-multi-select-fallback-option"}" data-option-index="${o}" data-value="${this.escapeAttribute(String(n.value??""))}"><input type="checkbox" class="nvb-control__checkbox-input nvb-option-checkbox" ${r?"checked":""} tabindex="-1" aria-hidden="true" /><div class="nvb-option__content">${this.templateEngineService.escapeHtml(n.label)}</div></div>`}).join("")}isMarkupEffectivelyEmpty(t){return String(t??"").replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi,"").replace(/<!--[\s\S]*?-->/g,"").trim().length===0}sanitizeCustomDropdownHtml(t){return this.markupSecurityService.sanitizeHtml(String(t??""))}hasSelectableOptionMarkup(t){return/data-value\s*=/.test(String(t??""))}hydrateSelectableOptionMarkup(t,e,n){const o=String(t??"").trim();if(!o||this.hasSelectableOptionMarkup(o))return o;const r=this.documentRef;if(!r||typeof r.createElement!=="function")return o;const a=r.createElement("div");a.innerHTML=o;const i=this.resolveTemplateOptionNodes(a,e.length);if(!i||i.length!==e.length)return o;i.forEach((d,u)=>{const v=e[u];const b=n.some(m=>this.isSameValue(m,v?.value));d.setAttribute("data-option-index",String(u));d.setAttribute("data-value",String(v?.value??""));d.classList.add("nvb-multi-select-template-option");if(b)d.classList.add("nvb-multi-select-template-option--selected")});return a.innerHTML}resolveTemplateOptionNodes(t,e){const n=Array.from(t.children);if(n.length===e)return n;if(n.length===1){const o=Array.from(n[0].children);if(o.length===e)return o}return null}hasMeaningfulOptionContent(t){const e=String(t??"").trim();if(!e)return false;const n=this.documentRef;if(!n||typeof n.createElement!=="function")return e.replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi,"").replace(/<[^>]+>/g,"").replace(/\s+/g,"").trim().length>0;const o=n.createElement("div");o.innerHTML=e;const r=Array.from(o.querySelectorAll("[data-value]"));if(r.length===0)return false;return r.some(a=>{if(String(a.textContent??"").replace(/\s+/g," ").trim().length>0)return true;return Boolean(a.querySelector("img,svg,video,canvas,nvb-icon,.nvb-icon-svg,[data-icon]"))})}resolveOptionValue(t){const e=this.flattenAllOptions().find(n=>String(n.value??"")===t);return e?e.value:t}resolveOptionValueFromIndex(t){const e=Number.parseInt(String(t??""),10);if(!Number.isInteger(e)||e<0)return{found:false,value:null};const n=this.flattenCurrentOptions();if(e>=n.length)return{found:false,value:null};return{found:true,value:n[e]?.value}}resolveOptionValueFromDomOrder(t){const e=t.closest(".nvb-options-container__custom");if(!e)return{found:false,value:null};const n=Array.from(e.querySelectorAll("[data-option-index], [data-value]")).filter(o=>{return!o.parentElement?.closest("[data-option-index], [data-value]")}).indexOf(t);if(n<0)return{found:false,value:null};return this.resolveOptionValueFromIndex(String(n))}escapeAttribute(t){return t.replaceAll("&","&amp;").replaceAll('"',"&quot;").replaceAll("<","&lt;").replaceAll(">","&gt;")}normalizeOptionTemplate(t){if(typeof t!=="string")return null;const e=t.trim();if(!e)return null;const n=e.toLowerCase();if(n==="null"||n==="undefined")return null;return e}shouldRenderCollectionTemplate(t){const e=String(t??"");return/@for\s*\(/.test(e)||/@(?:if|let|switch)\s*\([^)]*\b(?:items|options|filteredOptions|selectedItem|selectedItems)\b[^)]*\)/.test(e)||/(?:\{\{|\{)\s*[^{}]*\b(?:items|options|filteredOptions|selectedItem|selectedItems)\b[^{}]*\s*(?:\}\}|\})/.test(e)}isSameValue(t,e){return String(t??"")===String(e??"")}filterOptionsByVisibility(t){if(!Array.isArray(t))return[];if(this.hasGroupedOptions(t))return t.map(e=>{if(!this.isOptionVisible(e))return null;const n=(Array.isArray(e?.items)?e.items:[]).filter(o=>this.passesOptionFilters(o)&&this.isOptionVisible(o));if(n.length===0)return null;return{...e,items:n}}).filter(e=>e!==null);return t.filter(e=>this.passesOptionFilters(e)&&this.isOptionVisible(e))}hasGroupedOptions(t){return Array.isArray(t)&&t.some(e=>Array.isArray(e?.["items"]))}resolveGroupValues(t){return(Array.isArray(t?.["items"])?t["items"]:[]).map(e=>e?.["value"]).filter((e,n,o)=>{return o.findIndex(r=>this.isSameValue(r,e))===n})}mergeSelectedGroupValues(t,e){const n=[...t];e.forEach(o=>{if(!n.some(r=>this.isSameValue(r,o)))n.push(o)});return n}passesOptionFilters(t){const e=String(this.model().filterOptionsBy??"").trim()||String(this.model().dataSource?.filterOptionsBy??"").trim();const n=String(this.model().filterIfEqual??"").trim();const o=String(this.model().filterIfNotEqual??"").trim();if(!e&&!n&&!o)return true;const r=this.dataService.getData()??{};return B([t],e,r,{valuePath:"value",filterIfEqual:n,filterIfNotEqual:o}).length>0}isOptionVisible(t){const e=String(t?.visibleIf??"").trim();if(!e)return true;try{const n=this.normalizeOptionCondition(e);return!!this.expressionService.runPropertyConditionSync(this.dataService.getData(),n)}catch{return true}}normalizeOptionCondition(t){const e=t.replace(/{/g,"").replace(/}/g,"").trim();if(!e)return"";return this.expressionService.applyContextToExpression(e,this.model())}slugify(t){return String(t??"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+/,"").replace(/-+$/,"").slice(0,50)}scheduleDropdownPositionCalculation(){this.cancelScheduledDropdownCalculation();if(!this.isOpen())return;this.dropdownLayoutFrame=window.requestAnimationFrame(()=>{this.dropdownLayoutFrame=null;this.calculateDropdownPosition()})}cancelScheduledDropdownCalculation(){if(this.dropdownLayoutFrame===null)return;window.cancelAnimationFrame(this.dropdownLayoutFrame);this.dropdownLayoutFrame=null}static ɵfac=p.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:w,deps:[],target:p.ɵɵFactoryTarget.Component});static ɵcmp=p.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:w,isStandalone:true,selector:"multi-select-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},host:{listeners:{"document:click":"onDocumentClick($event)","document:scroll":"onDocumentScroll()","window:resize":"onWindowResize()"}},viewQueries:[{propertyName:"dropdownContainer",first:true,predicate:["dropdownContainer"],descendants:true},{propertyName:"selectButton",first:true,predicate:["selectButton"],descendants:true},{propertyName:"dropdownPanel",first:true,predicate:["dropdownPanel"],descendants:true}],ngImport:p,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  @if (model().dataSource && !dataSourceLoaded() && isEditorView()) {\n    <div class=\"nvb-empty-element-wrapper\">\n      <div class=\"nvb-control__text-input nvb-empty-select-placeholder\"></div>\n      <small class=\"nvb-element-title\">\n        <span class=\"material-symbols-outlined\">database</span>\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n      </small>\n    </div>\n  } @else {\n    <div\n      class=\"nvb-multi-select-container\"\n      [class.nvb-multi-select-container--open]=\"isOpen()\"\n      [class.nvb-multi-select-container--loading]=\"dataSourceLoading()\"\n      #dropdownContainer\n      [attr.data-testid]=\"tid('root')\"\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n    >\n      <div\n        class=\"nvb-input-wrapper\"\n        [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input ' : 'nvb-control__text-input'\"\n        [class.nvb-input-wrapper--disabled]=\"model().disabled || dataSourceLoading()\"\n        [class.nvb-input-wrapper--loading]=\"dataSourceLoading()\"\n        #selectButton\n        [attr.tabindex]=\"dataSourceLoading() ? -1 : 0\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        (click)=\"toggleDropdown()\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur()\"\n        [attr.data-testid]=\"tid('trigger')\"\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n        [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n        [attr.aria-controls]=\"isOpen() ? dropdownOptionsId : null\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-disabled]=\"model().disabled || dataSourceLoading() ? 'true' : null\"\n        [attr.aria-readonly]=\"model().readOnly ? 'true' : null\"\n        [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n        [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n      >\n        <span\n          class=\"nvb-select-value\"\n          [class.nvb-select-value--placeholder]=\"!hasValue() || dataSourceLoading()\"\n        >\n          {{\n            dataSourceLoading()\n              ? ('multiSelect.loading' | uiT: 'Loading options...')\n              : displayValue()\n          }}\n        </span>\n        <div class=\"nvb-select-actions\">\n          @if (dataSourceLoading()) {\n            <span class=\"nvb-select-loading-spinner\" aria-hidden=\"true\"></span>\n          } @else if (hasValue()) {\n            <button\n              type=\"button\"\n              class=\"nvb-clear-button\"\n              (click)=\"clearSelection($event)\"\n              [attr.title]=\"'multiSelect.clear' | uiT: 'Clear'\"\n              [attr.aria-label]=\"'multiSelect.clearSelections' | uiT: 'Clear selections'\"\n              [attr.data-testid]=\"tid('clear')\"\n            >\n              <span class=\"material-symbols-outlined\">close</span>\n            </button>\n          }\n          @if (!dataSourceLoading()) {\n            <span class=\"material-symbols-outlined nvb-select-arrow\" [class.nvb-open]=\"isOpen()\"\n              >keyboard_arrow_down</span\n            >\n          }\n        </div>\n      </div>\n\n      @if (isOpen() && !dataSourceLoading()) {\n        <div\n          class=\"nvb-dropdown\"\n          [class.nvb-dropdown-top]=\"dropdownPosition() === 'top'\"\n          #dropdownPanel\n          [style.--nvb-multi-select-dropdown-max-height.px]=\"dropdownMaxHeight()\"\n          [style.left.px]=\"dropdownLeft()\"\n          [style.top.px]=\"dropdownTop()\"\n          [style.min-width.px]=\"dropdownMinWidth()\"\n        >\n          @if (customDropdownCss()) {\n            <nvb-style-outlet [cssText]=\"customDropdownCss()\"></nvb-style-outlet>\n          }\n          @if (showSearchBox()) {\n            <div class=\"nvb-search-container\">\n              <input\n                type=\"text\"\n                class=\"nvb-control__text-input\"\n                [placeholder]=\"\n                  model().placeholder\n                    ? (model().placeholder | dynamicText: model())\n                    : ('multiSelect.searchPlaceholder' | uiT: 'Search...')\n                \"\n                [value]=\"searchTerm()\"\n                (input)=\"onSearchInput($event)\"\n                (click)=\"$event.stopPropagation()\"\n                [attr.aria-label]=\"'multiSelect.searchPlaceholder' | uiT: 'Search...'\"\n                [attr.data-testid]=\"tid('search')\"\n              />\n              @if (searchTerm()) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-search-clear-button\"\n                  (click)=\"clearSearch($event)\"\n                  [attr.title]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\n                  [attr.aria-label]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\n                  [attr.data-testid]=\"tid('search-clear')\"\n                >\n                  x\n                </button>\n              }\n            </div>\n          }\n\n          <div\n            class=\"nvb-options-container\"\n            [id]=\"dropdownOptionsId\"\n            [attr.data-testid]=\"tid('options')\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n          >\n            @if (hasCustomTemplate()) {\n              <div [attr.data-testid]=\"tid('custom-value')\"\n                class=\"nvb-options-container__custom\"\n                [attr.data-nvb-template-scope]=\"dropdownTemplateScopeId\"\n                (click)=\"onCustomOptionsClick($event)\"\n                [innerHTML]=\"customDropdownHtml()\"\n              ></div>\n            } @else if (usesGroupedOptions()) {\n              @for (group of filteredOptions(); track group.label; let tidIndex1 = $index) {\n                <div class=\"nvb-option-group\">\n                  <label [attr.data-testid]=\"tid('toggle-group', tidIndex1)\"\n                    class=\"nvb-group-label nvb-group-label--selectable\"\n                    (click)=\"toggleGroup(group, $event)\"\n                  >\n                    <input [attr.data-testid]=\"tid('checkbox-input', tidIndex1)\"\n                      type=\"checkbox\"\n                      class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                      [checked]=\"isGroupSelected(group)\"\n                      [indeterminate]=\"isGroupPartiallySelected(group)\"\n                      (click)=\"$event.stopPropagation()\"\n                      [attr.aria-label]=\"group.label\"\n                    />\n                    <span>{{ group.label }}</span>\n                  </label>\n                  @for (item of group.items; track item.value; let optionIndex = $index) {\n                    <div\n                      class=\"nvb-option\"\n                      [class.nvb-selected]=\"isSelected(item.value)\"\n                      (click)=\"toggleOption(item.value, $event)\"\n                      role=\"option\"\n                      [attr.aria-selected]=\"isSelected(item.value)\"\n                      [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\n                      [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label)\"\n                    >\n                      <input\n                        type=\"checkbox\"\n                        class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                        [checked]=\"isSelected(item.value)\"\n                        [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label) + '-checkbox'\"\n                        [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\n                        tabindex=\"-1\"\n                        aria-hidden=\"true\"\n                      />\n                      <span>{{ item.label }}</span>\n                    </div>\n                  }\n                </div>\n              }\n            } @else {\n              @for (option of filteredOptions(); track option.value; let optionIndex = $index) {\n                <div\n                  class=\"nvb-option\"\n                  [class.nvb-selected]=\"isSelected(option.value)\"\n                  (click)=\"toggleOption(option.value, $event)\"\n                  role=\"option\"\n                  [attr.aria-selected]=\"isSelected(option.value)\"\n                  [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\n                  [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex)\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                    [checked]=\"isSelected(option.value)\"\n                    [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex) + '-checkbox'\"\n                    [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\n                    tabindex=\"-1\"\n                    aria-hidden=\"true\"\n                  />\n                  <span>{{ option.label }}</span>\n                </div>\n              }\n            }\n\n            @if (!hasCustomTemplate() && filteredOptions().length === 0) {\n              <div class=\"nvb-no-results\">{{ 'multiSelect.empty' | uiT: 'No results found' }}</div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n</element-wrapper>\n",styles:[".nvb-multi-select-container{position:relative;width:100%;overflow:visible}.nvb-multi-select-container--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-multi-select-container--loading{cursor:progress}.nvb-select-value{flex:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}.nvb-select-value--placeholder{color:var(--nvb-color-neutral-500)}.nvb-select-actions{display:flex;align-items:center;gap:4px;margin-left:8px}.nvb-clear-button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:16px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-clear-button .material-symbols-outlined{font-size:16px;line-height:1}.nvb-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-select-arrow{font-size:16px;transition:transform .2s;color:var(--nvb-color-neutral-500)}.nvb-select-arrow.nvb-open{transform:rotate(180deg)}.nvb-dropdown{--nvb-multi-select-dropdown-max-height: 300px;position:fixed;left:0;top:0;background:color-mix(in oklab,var(--nvb-color-neutral-000) 92%,var(--nvb-color-neutral-050));border:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 82%,var(--nvb-color-surface-mix-target, white));border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--nvb-radius-md)));box-shadow:var(--nvb-shadow-16, 0 12px 24px color-mix(in oklab, var(--nvb-color-neutral-950) 12%, transparent));z-index:var(--nvb-floating-overlay-z-index, 2147483000);max-height:var(--nvb-multi-select-dropdown-max-height);display:flex;flex-direction:column;padding:4px;overflow:hidden}.nvb-dropdown.nvb-dropdown-top{transform:translateY(calc(-100% - 4px))}.nvb-search-container{padding:0 0 4px;border-bottom:1px solid var(--nvb-color-neutral-200);background:transparent;position:relative}.nvb-search-container .nvb-control__text-input{box-sizing:border-box;height:var(--nvb-input-height);min-height:var(--nvb-input-height);line-height:calc(var(--nvb-input-height) - 2px);padding-top:0;padding-bottom:0;border-color:var(--nvb-color-neutral-300);background-color:color-mix(in oklab,var(--nvb-color-neutral-000) 90%,var(--nvb-color-neutral-050));color:var(--nvb-color-neutral-800)}.nvb-search-container .nvb-control__text-input::placeholder{color:var(--nvb-color-neutral-500)}.nvb-search-clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:16px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-search-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-options-container{overflow-y:auto;max-height:calc(var(--nvb-multi-select-dropdown-max-height) - 44px);min-height:0;padding-top:4px;background:transparent}.nvb-options-container__custom{display:flex;flex-direction:column;gap:2px;min-height:1px}.nvb-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}.nvb-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}.nvb-option.nvb-selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}.nvb-option-checkbox{pointer-events:none;margin:0}.nvb-option__content{min-width:0}.nvb-option-group .nvb-group-label{min-height:28px;margin:4px 0 2px;padding:0 10px;font-size:12px;font-weight:600;color:var(--nvb-color-neutral-600);text-transform:uppercase;background-color:transparent;border-top:1px solid var(--nvb-color-neutral-200)}.nvb-option-group .nvb-group-label--selectable{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;cursor:pointer}.nvb-option-group .nvb-group-label--selectable .nvb-option-checkbox{pointer-events:auto}.nvb-option-group .nvb-group-label:first-child{border-top:none}.nvb-no-results{padding:12px;text-align:center;color:var(--nvb-color-neutral-500);font-size:14px}.nvb-input-wrapper{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;min-height:var(--nvb-input-height)}.nvb-input-wrapper--disabled{cursor:not-allowed;border-color:color-mix(in oklab,var(--nvb-color-neutral-300) 88%,var(--nvb-color-neutral-100));background:color-mix(in oklab,var(--nvb-color-neutral-100) 76%,var(--nvb-color-neutral-000));color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--disabled .nvb-select-value,.nvb-input-wrapper--disabled .nvb-select-arrow,.nvb-input-wrapper--disabled .nvb-clear-button{color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--loading{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--nvb-color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--nvb-color-neutral-050) 78%,var(--nvb-color-neutral-000));background-size:220% 100%;animation:nvb-multi-select-loading-shimmer 1.35s ease-in-out infinite}.nvb-select-loading-spinner{width:14px;height:14px;border:2px solid color-mix(in oklab,var(--nvb-color-neutral-400) 45%,transparent);border-top-color:var(--nvb-color-primary-500);border-radius:var(--nvb-radius-full);animation:nvb-multi-select-loading-spin .8s linear infinite}.nvb-empty-select-placeholder{height:31px;background:linear-gradient(90deg,var(--nvb-color-neutral-100) 25%,var(--nvb-color-neutral-200) 50%,var(--nvb-color-neutral-100) 75%)}:host ::ng-deep .nvb-options-container__custom .nvb-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s}:host ::ng-deep .nvb-options-container__custom .nvb-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}:host ::ng-deep .nvb-options-container__custom .nvb-option.nvb-selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-template-option{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option--selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}@keyframes nvb-multi-select-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-multi-select-loading-spin{to{transform:rotate(360deg)}}\n"],dependencies:[{kind:"ngmodule",type:D},{kind:"directive",type:U.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"ngmodule",type:L},{kind:"component",type:T,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"component",type:C,selector:"nvb-style-outlet",inputs:["cssText","renderInPlace","styleKey"]},{kind:"pipe",type:k,name:"dynamicText"},{kind:"pipe",type:O,name:"uiT"}],changeDetection:p.ChangeDetectionStrategy.OnPush})};p.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:x,decorators:[{type:R,args:[{selector:"multi-select-element",changeDetection:q.OnPush,standalone:true,imports:[D,L,T,k,C,O],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  @if (model().dataSource && !dataSourceLoaded() && isEditorView()) {\n    <div class=\"nvb-empty-element-wrapper\">\n      <div class=\"nvb-control__text-input nvb-empty-select-placeholder\"></div>\n      <small class=\"nvb-element-title\">\n        <span class=\"material-symbols-outlined\">database</span>\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n      </small>\n    </div>\n  } @else {\n    <div\n      class=\"nvb-multi-select-container\"\n      [class.nvb-multi-select-container--open]=\"isOpen()\"\n      [class.nvb-multi-select-container--loading]=\"dataSourceLoading()\"\n      #dropdownContainer\n      [attr.data-testid]=\"tid('root')\"\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n    >\n      <div\n        class=\"nvb-input-wrapper\"\n        [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input ' : 'nvb-control__text-input'\"\n        [class.nvb-input-wrapper--disabled]=\"model().disabled || dataSourceLoading()\"\n        [class.nvb-input-wrapper--loading]=\"dataSourceLoading()\"\n        #selectButton\n        [attr.tabindex]=\"dataSourceLoading() ? -1 : 0\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        (click)=\"toggleDropdown()\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur()\"\n        [attr.data-testid]=\"tid('trigger')\"\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n        [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n        [attr.aria-controls]=\"isOpen() ? dropdownOptionsId : null\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-disabled]=\"model().disabled || dataSourceLoading() ? 'true' : null\"\n        [attr.aria-readonly]=\"model().readOnly ? 'true' : null\"\n        [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n        [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n      >\n        <span\n          class=\"nvb-select-value\"\n          [class.nvb-select-value--placeholder]=\"!hasValue() || dataSourceLoading()\"\n        >\n          {{\n            dataSourceLoading()\n              ? ('multiSelect.loading' | uiT: 'Loading options...')\n              : displayValue()\n          }}\n        </span>\n        <div class=\"nvb-select-actions\">\n          @if (dataSourceLoading()) {\n            <span class=\"nvb-select-loading-spinner\" aria-hidden=\"true\"></span>\n          } @else if (hasValue()) {\n            <button\n              type=\"button\"\n              class=\"nvb-clear-button\"\n              (click)=\"clearSelection($event)\"\n              [attr.title]=\"'multiSelect.clear' | uiT: 'Clear'\"\n              [attr.aria-label]=\"'multiSelect.clearSelections' | uiT: 'Clear selections'\"\n              [attr.data-testid]=\"tid('clear')\"\n            >\n              <span class=\"material-symbols-outlined\">close</span>\n            </button>\n          }\n          @if (!dataSourceLoading()) {\n            <span class=\"material-symbols-outlined nvb-select-arrow\" [class.nvb-open]=\"isOpen()\"\n              >keyboard_arrow_down</span\n            >\n          }\n        </div>\n      </div>\n\n      @if (isOpen() && !dataSourceLoading()) {\n        <div\n          class=\"nvb-dropdown\"\n          [class.nvb-dropdown-top]=\"dropdownPosition() === 'top'\"\n          #dropdownPanel\n          [style.--nvb-multi-select-dropdown-max-height.px]=\"dropdownMaxHeight()\"\n          [style.left.px]=\"dropdownLeft()\"\n          [style.top.px]=\"dropdownTop()\"\n          [style.min-width.px]=\"dropdownMinWidth()\"\n        >\n          @if (customDropdownCss()) {\n            <nvb-style-outlet [cssText]=\"customDropdownCss()\"></nvb-style-outlet>\n          }\n          @if (showSearchBox()) {\n            <div class=\"nvb-search-container\">\n              <input\n                type=\"text\"\n                class=\"nvb-control__text-input\"\n                [placeholder]=\"\n                  model().placeholder\n                    ? (model().placeholder | dynamicText: model())\n                    : ('multiSelect.searchPlaceholder' | uiT: 'Search...')\n                \"\n                [value]=\"searchTerm()\"\n                (input)=\"onSearchInput($event)\"\n                (click)=\"$event.stopPropagation()\"\n                [attr.aria-label]=\"'multiSelect.searchPlaceholder' | uiT: 'Search...'\"\n                [attr.data-testid]=\"tid('search')\"\n              />\n              @if (searchTerm()) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-search-clear-button\"\n                  (click)=\"clearSearch($event)\"\n                  [attr.title]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\n                  [attr.aria-label]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\n                  [attr.data-testid]=\"tid('search-clear')\"\n                >\n                  x\n                </button>\n              }\n            </div>\n          }\n\n          <div\n            class=\"nvb-options-container\"\n            [id]=\"dropdownOptionsId\"\n            [attr.data-testid]=\"tid('options')\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n          >\n            @if (hasCustomTemplate()) {\n              <div [attr.data-testid]=\"tid('custom-value')\"\n                class=\"nvb-options-container__custom\"\n                [attr.data-nvb-template-scope]=\"dropdownTemplateScopeId\"\n                (click)=\"onCustomOptionsClick($event)\"\n                [innerHTML]=\"customDropdownHtml()\"\n              ></div>\n            } @else if (usesGroupedOptions()) {\n              @for (group of filteredOptions(); track group.label; let tidIndex1 = $index) {\n                <div class=\"nvb-option-group\">\n                  <label [attr.data-testid]=\"tid('toggle-group', tidIndex1)\"\n                    class=\"nvb-group-label nvb-group-label--selectable\"\n                    (click)=\"toggleGroup(group, $event)\"\n                  >\n                    <input [attr.data-testid]=\"tid('checkbox-input', tidIndex1)\"\n                      type=\"checkbox\"\n                      class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                      [checked]=\"isGroupSelected(group)\"\n                      [indeterminate]=\"isGroupPartiallySelected(group)\"\n                      (click)=\"$event.stopPropagation()\"\n                      [attr.aria-label]=\"group.label\"\n                    />\n                    <span>{{ group.label }}</span>\n                  </label>\n                  @for (item of group.items; track item.value; let optionIndex = $index) {\n                    <div\n                      class=\"nvb-option\"\n                      [class.nvb-selected]=\"isSelected(item.value)\"\n                      (click)=\"toggleOption(item.value, $event)\"\n                      role=\"option\"\n                      [attr.aria-selected]=\"isSelected(item.value)\"\n                      [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\n                      [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label)\"\n                    >\n                      <input\n                        type=\"checkbox\"\n                        class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                        [checked]=\"isSelected(item.value)\"\n                        [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label) + '-checkbox'\"\n                        [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\n                        tabindex=\"-1\"\n                        aria-hidden=\"true\"\n                      />\n                      <span>{{ item.label }}</span>\n                    </div>\n                  }\n                </div>\n              }\n            } @else {\n              @for (option of filteredOptions(); track option.value; let optionIndex = $index) {\n                <div\n                  class=\"nvb-option\"\n                  [class.nvb-selected]=\"isSelected(option.value)\"\n                  (click)=\"toggleOption(option.value, $event)\"\n                  role=\"option\"\n                  [attr.aria-selected]=\"isSelected(option.value)\"\n                  [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\n                  [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex)\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                    [checked]=\"isSelected(option.value)\"\n                    [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex) + '-checkbox'\"\n                    [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\n                    tabindex=\"-1\"\n                    aria-hidden=\"true\"\n                  />\n                  <span>{{ option.label }}</span>\n                </div>\n              }\n            }\n\n            @if (!hasCustomTemplate() && filteredOptions().length === 0) {\n              <div class=\"nvb-no-results\">{{ 'multiSelect.empty' | uiT: 'No results found' }}</div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n</element-wrapper>\n",styles:[".nvb-multi-select-container{position:relative;width:100%;overflow:visible}.nvb-multi-select-container--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-multi-select-container--loading{cursor:progress}.nvb-select-value{flex:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}.nvb-select-value--placeholder{color:var(--nvb-color-neutral-500)}.nvb-select-actions{display:flex;align-items:center;gap:4px;margin-left:8px}.nvb-clear-button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:16px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-clear-button .material-symbols-outlined{font-size:16px;line-height:1}.nvb-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-select-arrow{font-size:16px;transition:transform .2s;color:var(--nvb-color-neutral-500)}.nvb-select-arrow.nvb-open{transform:rotate(180deg)}.nvb-dropdown{--nvb-multi-select-dropdown-max-height: 300px;position:fixed;left:0;top:0;background:color-mix(in oklab,var(--nvb-color-neutral-000) 92%,var(--nvb-color-neutral-050));border:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 82%,var(--nvb-color-surface-mix-target, white));border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--nvb-radius-md)));box-shadow:var(--nvb-shadow-16, 0 12px 24px color-mix(in oklab, var(--nvb-color-neutral-950) 12%, transparent));z-index:var(--nvb-floating-overlay-z-index, 2147483000);max-height:var(--nvb-multi-select-dropdown-max-height);display:flex;flex-direction:column;padding:4px;overflow:hidden}.nvb-dropdown.nvb-dropdown-top{transform:translateY(calc(-100% - 4px))}.nvb-search-container{padding:0 0 4px;border-bottom:1px solid var(--nvb-color-neutral-200);background:transparent;position:relative}.nvb-search-container .nvb-control__text-input{box-sizing:border-box;height:var(--nvb-input-height);min-height:var(--nvb-input-height);line-height:calc(var(--nvb-input-height) - 2px);padding-top:0;padding-bottom:0;border-color:var(--nvb-color-neutral-300);background-color:color-mix(in oklab,var(--nvb-color-neutral-000) 90%,var(--nvb-color-neutral-050));color:var(--nvb-color-neutral-800)}.nvb-search-container .nvb-control__text-input::placeholder{color:var(--nvb-color-neutral-500)}.nvb-search-clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:16px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-search-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-options-container{overflow-y:auto;max-height:calc(var(--nvb-multi-select-dropdown-max-height) - 44px);min-height:0;padding-top:4px;background:transparent}.nvb-options-container__custom{display:flex;flex-direction:column;gap:2px;min-height:1px}.nvb-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}.nvb-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}.nvb-option.nvb-selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}.nvb-option-checkbox{pointer-events:none;margin:0}.nvb-option__content{min-width:0}.nvb-option-group .nvb-group-label{min-height:28px;margin:4px 0 2px;padding:0 10px;font-size:12px;font-weight:600;color:var(--nvb-color-neutral-600);text-transform:uppercase;background-color:transparent;border-top:1px solid var(--nvb-color-neutral-200)}.nvb-option-group .nvb-group-label--selectable{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;cursor:pointer}.nvb-option-group .nvb-group-label--selectable .nvb-option-checkbox{pointer-events:auto}.nvb-option-group .nvb-group-label:first-child{border-top:none}.nvb-no-results{padding:12px;text-align:center;color:var(--nvb-color-neutral-500);font-size:14px}.nvb-input-wrapper{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;min-height:var(--nvb-input-height)}.nvb-input-wrapper--disabled{cursor:not-allowed;border-color:color-mix(in oklab,var(--nvb-color-neutral-300) 88%,var(--nvb-color-neutral-100));background:color-mix(in oklab,var(--nvb-color-neutral-100) 76%,var(--nvb-color-neutral-000));color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--disabled .nvb-select-value,.nvb-input-wrapper--disabled .nvb-select-arrow,.nvb-input-wrapper--disabled .nvb-clear-button{color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--loading{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--nvb-color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--nvb-color-neutral-050) 78%,var(--nvb-color-neutral-000));background-size:220% 100%;animation:nvb-multi-select-loading-shimmer 1.35s ease-in-out infinite}.nvb-select-loading-spinner{width:14px;height:14px;border:2px solid color-mix(in oklab,var(--nvb-color-neutral-400) 45%,transparent);border-top-color:var(--nvb-color-primary-500);border-radius:var(--nvb-radius-full);animation:nvb-multi-select-loading-spin .8s linear infinite}.nvb-empty-select-placeholder{height:31px;background:linear-gradient(90deg,var(--nvb-color-neutral-100) 25%,var(--nvb-color-neutral-200) 50%,var(--nvb-color-neutral-100) 75%)}:host ::ng-deep .nvb-options-container__custom .nvb-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s}:host ::ng-deep .nvb-options-container__custom .nvb-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}:host ::ng-deep .nvb-options-container__custom .nvb-option.nvb-selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-template-option{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option--selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}@keyframes nvb-multi-select-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-multi-select-loading-spin{to{transform:rotate(360deg)}}\n"]}]}],propDecorators:{model:[{type:p.Input,args:[{isSignal:true,alias:"model",required:true}]}],dropdownContainer:[{type:f,args:["dropdownContainer"]}],selectButton:[{type:f,args:["selectButton"]}],dropdownPanel:[{type:f,args:["dropdownPanel"]}],onDocumentClick:[{type:g,args:["document:click",["$event"]]}],onDocumentScroll:[{type:g,args:["document:scroll"]}],onWindowResize:[{type:g,args:["window:resize"]}]}});export{Y as n,x as t};