@ngxviewbuilder/runtime 0.12.0 → 0.12.2

package/fesm2022/{ngxviewbuilder-runtime-autocomplete-element-D627PmE6.mjs → ngxviewbuilder-runtime-autocomplete-element-DWbMobho.mjs}

@@ -1 +1 @@
-import{t as f}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as y,c as x,d as L,g as z,in as p,n as m,p as _,t as g,yt as w}from"./ngxviewbuilder-runtime-dynamic-text.pipe-DJNHX-1z.mjs";import{ft as O,r as C,rt as T,t as v}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.mjs";import*as r from"@angular/core";import{ChangeDetectionStrategy as I,Component as V,HostListener as D,ViewChild as M,computed as c,inject as l,input as k,signal as o}from"@angular/core";import{NgClass as b}from"@angular/common";import{cloneDeep as R,get as u,isEqual as N}from"lodash-es";var B=f({AutocompleteElement:()=>d});const A=["items","data.items","data.rows","data.records","data.results","data.content","records","rows","results","content","result","data"];var d=class h{model=k.required(...ngDevMode?[{debugName:"model"}]:[]);tid=C(this.model,"nvb-autocomplete","autocomplete");containerRef;inputValue=o("",...ngDevMode?[{debugName:"inputValue"}]:[]);isOpen=o(false,...ngDevMode?[{debugName:"isOpen"}]:[]);highlightedIndex=o(0,...ngDevMode?[{debugName:"highlightedIndex"}]:[]);dataSourceLoaded=o(false,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);isEditorView=o(p.isEditor(),...ngDevMode?[{debugName:"isEditorView"}]:[]);useCompactStyle=o(false,...ngDevMode?[{debugName:"useCompactStyle"}]:[]);isLoading=o(false,...ngDevMode?[{debugName:"isLoading"}]:[]);dataVersion=o(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);blurTimer=null;lazySearchTimer=null;lazySearchSubscription=null;lazySearchRequestId=0;lazyLastRemoteQuery="";lazyLocalBaseQuery=o("",...ngDevMode?[{debugName:"lazyLocalBaseQuery"}]:[]);lazyLocalResultComplete=o(false,...ngDevMode?[{debugName:"lazyLocalResultComplete"}]:[]);searchItems=o([],...ngDevMode?[{debugName:"searchItems"}]:[]);searchBaseQuery=o("",...ngDevMode?[{debugName:"searchBaseQuery"}]:[]);searchComplete=o(false,...ngDevMode?[{debugName:"searchComplete"}]:[]);selectedSearchOption=null;elementActionService=l(T);dataService=l(y);eventService=l(z);expressionService=l(L);dataSourceService=l(x);visibleOptions=c(()=>{this.dataVersion();return this.computeVisibleOptions()},...ngDevMode?[{debugName:"visibleOptions"}]:[]);suggestionOptions=c(()=>{const e=this.visibleOptions();const t=this.inputValue().trim().toLowerCase();if(!t)return[];const n=this.normalizeMaxSuggestions(this.model().maxSuggestions);if(this.isSearchMode())return this.filterSearchOptions(e,t).slice(0,n);let a=e;if(!this.model().lazyLoad||this.shouldFilterLazyOptionsLocally(t))a=e.filter(i=>this.optionMatchesSearch(i,t));return a.slice(0,n)},...ngDevMode?[{debugName:"suggestionOptions"}]:[]);dropdownHasContent=c(()=>this.isLoading()||this.suggestionOptions().length>0||this.canShowEmptyState(),...ngDevMode?[{debugName:"dropdownHasContent"}]:[]);dataSourceLoading=c(()=>Boolean(this.model().dataSource)&&!this.dataSourceLoaded()&&!this.model().lazyLoad&&!this.isSearchMode()&&!this.isEditorView(),...ngDevMode?[{debugName:"dataSourceLoading"}]:[]);onDataSourceLoadedHandler=()=>{this.dataSourceLoaded.set(true);this.dataVersion.update(e=>e+1);this.syncInputFromModelValue()};onDataValueChangedHandler=()=>{this.dataVersion.update(e=>e+1);this.syncInputFromModelValue()};ngOnInit(){const e=!this.model().dataSource||Boolean(this.model().dataSourceLoaded)||Boolean(this.model().lazyLoad)||this.isSearchMode();this.dataSourceLoaded.set(e);this.model().afterDataSourceLoad.add(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.add(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.add(this.onDataValueChangedHandler);this.isEditorView.set(p.isEditor());if(this.model()?.parentElement&&this.model()?.parentElement instanceof w)this.useCompactStyle.set(this.model()?.parentElement["useCompactStyle"]);this.syncInputFromModelValue()}ngOnDestroy(){this.model().afterDataSourceLoad.remove(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.remove(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.remove(this.onDataValueChangedHandler);this.clearBlurTimer();this.clearLazySearchTimer();this.clearLazySearchSubscription()}onInput(e){if(this.isInteractionLocked())return;this.clearBlurTimer();const t=e.target;if(!t)return;const n=String(t.value??"");this.inputValue.set(n);this.highlightedIndex.set(0);this.isOpen.set(n.trim().length>0);if(!this.model().forceSelection)this.model().setValue(n,"input");this.runActions("input",n);if(this.isSearchMode())this.scheduleRemoteSearch(n);else if(this.model().lazyLoad&&this.model().dataSource)this.scheduleLazySearch(n)}onFocus(){if(this.isInteractionLocked())return;this.clearBlurTimer();this.runActions("focus",this.model().value);this.isOpen.set(false)}onBlur(){this.clearBlurTimer();this.blurTimer=setTimeout(()=>{this.applyBlurBehavior();this.isOpen.set(false);this.runActions("blur",this.model().value)},120)}onKeyDown(e){if(!this.isOpen()&&e.key==="ArrowDown"){this.isOpen.set(true);return}const t=this.suggestionOptions();if(!t.length){if(e.key==="Escape")this.isOpen.set(false);return}if(e.key==="ArrowDown"){e.preventDefault();const n=(this.highlightedIndex()+1)%t.length;this.highlightedIndex.set(n);return}if(e.key==="ArrowUp"){e.preventDefault();const n=(this.highlightedIndex()-1+t.length)%t.length;this.highlightedIndex.set(n);return}if(e.key==="Enter"){e.preventDefault();const n=t[this.highlightedIndex()]??null;if(n)this.selectOption(n);return}if(e.key==="Escape"){e.preventDefault();this.isOpen.set(false)}}onOptionMouseDown(e,t){t.preventDefault();if(this.isInteractionLocked())return;this.clearBlurTimer();this.selectOption(e)}clear(e){e.preventDefault();e.stopPropagation();if(this.isInteractionLocked())return;this.clearLazySearchTimer();this.clearLazySearchSubscription();this.resetLazySearchState();this.resetRemoteSearchState();this.isLoading.set(false);this.inputValue.set("");this.isOpen.set(false);this.highlightedIndex.set(0);this.model().setValue(null,"change");this.runActions("change",null)}isHighlighted(e){return this.highlightedIndex()===e}isSelected(e){return this.isSameValue(e.value,this.model().value)}trackSuggestion(e,t){return`${String(e.value??"")}-${t}`}hasSearchTerm(){return this.inputValue().trim().length>0}canShowEmptyState(){if(!this.hasSearchTerm())return false;if(this.isSearchMode())return this.searchAnswerCovers(this.inputValue());if(!this.model().lazyLoad)return true;const e=this.normalizeMinSearchLength(this.model().minSearchLength);return this.inputValue().trim().length>=e}onDocumentClick(e){if(!this.isOpen())return;const t=this.containerRef?.nativeElement;if(!t){this.isOpen.set(false);return}const n=e.target;const a=typeof e.composedPath==="function"?e.composedPath():[];if(!((n?t.contains(n):false)||a.includes(t))){this.applyBlurBehavior();this.isOpen.set(false)}}selectOption(e){const t=e.value!==null&&typeof e.value==="object"?R(e.value):e.value;if(this.isSearchMode())this.selectedSearchOption={...e,value:t};this.inputValue.set(e.label);this.isOpen.set(false);this.highlightedIndex.set(0);this.model().setValue(t,"change");this.runActions("change",t)}applyBlurBehavior(){if(!this.model().forceSelection)return;const e=this.inputValue().trim();const t=this.model().value;if(!e){this.model().setValue(null,"change");if(!Object.is(t,this.model().value))this.runActions("change",this.model().value);return}const n=this.visibleOptions().find(a=>a.label.toLowerCase()===e.toLowerCase());if(n){this.inputValue.set(n.label);this.model().setValue(n.value,"change")}else{this.inputValue.set("");this.model().setValue(null,"change")}if(!Object.is(t,this.model().value))this.runActions("change",this.model().value)}isSearchMode(){return String(this.model().searchDataSourceName??"").trim().length>0}scheduleRemoteSearch(e){const t=String(e??"").trim();const n=this.normalizeMinSearchLength(this.model().minSearchLength);this.clearLazySearchTimer();if(t.length<n){this.cancelRemoteSearch();return}if(this.canNarrowSearchLocally(t)||this.isAnsweredQuery(t)){this.cancelRemoteSearch();this.highlightedIndex.set(0);this.isOpen.set(true);return}this.isLoading.set(true);const a=this.normalizeDebounceMs(this.model().debounceMs);this.lazySearchTimer=setTimeout(()=>{this.lazySearchTimer=null;this.executeRemoteSearch(t)},a)}executeRemoteSearch(e){const t=String(this.model().searchDataSourceName??"").trim();if(!t||this.canNarrowSearchLocally(e)){this.cancelRemoteSearch();return}this.clearLazySearchSubscription();const n=++this.lazySearchRequestId;this.isLoading.set(true);this.lazySearchSubscription=this.dataSourceService.getData$(t,true,this.model(),this.buildLazyRuntimeContext(e)).subscribe({next:a=>{if(n!==this.lazySearchRequestId)return;const i=this.resolveSearchItems(a);const s=this.resolveSearchResultLimit();this.searchItems.set(i);this.searchBaseQuery.set(e);this.searchComplete.set(s!==null&&i.length<s);this.dataVersion.update(S=>S+1);this.highlightedIndex.set(0);this.isOpen.set(this.hasSearchTerm());this.isLoading.set(this.lazySearchTimer!==null)},error:()=>{if(n!==this.lazySearchRequestId)return;this.searchItems.set([]);this.searchBaseQuery.set(e);this.searchComplete.set(false);this.dataVersion.update(a=>a+1);this.isLoading.set(this.lazySearchTimer!==null)}})}cancelRemoteSearch(){this.clearLazySearchTimer();this.clearLazySearchSubscription();this.lazySearchRequestId+=1;this.isLoading.set(false)}resetRemoteSearchState(){this.cancelRemoteSearch();this.searchItems.set([]);this.searchBaseQuery.set("");this.searchComplete.set(false);this.dataVersion.update(e=>e+1)}canNarrowSearchLocally(e){return this.searchComplete()&&this.searchAnswerCovers(e)}isAnsweredQuery(e){const t=this.normalizeSearchText(this.searchBaseQuery());return Boolean(t)&&this.normalizeSearchText(e)===t}searchAnswerCovers(e){const t=this.normalizeSearchText(this.searchBaseQuery());return Boolean(t)&&this.normalizeSearchText(e).startsWith(t)}filterSearchOptions(e,t){if(this.isAnsweredQuery(t))return e;if(!this.searchAnswerCovers(t))return[];return e.filter(n=>this.searchOptionMatches(n,t))}searchOptionMatches(e,t){if(this.optionMatchesSearch(e,t))return true;const n=e.raw;if(!n||typeof n!=="object")return false;const a=this.normalizeSearchText(t);return Object.values(n).some(i=>(typeof i==="string"||typeof i==="number")&&this.normalizeSearchText(i).includes(a))}computeSearchOptions(){return this.searchItems().map(e=>this.toSearchOption(e)).filter(e=>e!==null)}toSearchOption(e){const t=this.resolveSearchLabel(e);if(!t)return null;const n=String(this.model().searchValueKey??"").trim();return{label:t,value:n&&e!==null&&typeof e==="object"?u(e,n):e,raw:e}}resolveSearchLabel(e){if(e===null||e===void 0)return"";if(typeof e!=="object")return String(e).trim();const t=e;const n=String(this.model().searchLabelKey??"").trim();const a=n?u(t,n):t["label"]??t["name"]??t["title"]??t["text"];if(a===null||a===void 0)return"";return typeof a==="object"?JSON.stringify(a):String(a).trim()}resolveSearchItems(e){const t=String(this.model().searchItemsPath??"").trim();if(t){const n=u(e,t);return Array.isArray(n)?n:[]}if(Array.isArray(e))return e;if(!e||typeof e!=="object")return[];for(const n of A){const a=u(e,n);if(Array.isArray(a))return a}return[]}resolveSearchResultLimit(){const e=this.model().searchResultLimit;if(e===null||e===void 0||String(e).trim()==="")return null;const t=Number(e);return Number.isFinite(t)&&t>0?Math.floor(t):null}scheduleLazySearch(e){const t=String(e??"").trim();const n=this.normalizeMinSearchLength(this.model().minSearchLength);this.clearLazySearchTimer();if(t.length<n){this.clearLazySearchSubscription();this.resetLazySearchState();this.isLoading.set(false);this.model().options=[];this.dataVersion.update(i=>i+1);return}if(this.tryUseLocalLazySearch(t))return;if(this.normalizeSearchText(t)===this.normalizeSearchText(this.lazyLastRemoteQuery)&&this.flattenOptions(this.model().options??[]).length>0){this.isLoading.set(false);this.highlightedIndex.set(0);this.isOpen.set(true);return}const a=this.normalizeDebounceMs(this.model().debounceMs);this.lazySearchTimer=setTimeout(()=>{this.executeLazySearch(t)},a)}executeLazySearch(e){if(!this.model().dataSource)return;this.clearLazySearchSubscription();const t=++this.lazySearchRequestId;this.lazyLastRemoteQuery=e;this.isLoading.set(true);this.lazySearchSubscription=this.dataSourceService.getData$(this.model().dataSource,true,this.model(),this.buildLazyRuntimeContext(e)).subscribe({next:n=>{if(t!==this.lazySearchRequestId)return;this.model().setOptions(n);this.model().dataSourceLoaded=true;this.dataSourceLoaded.set(true);this.updateLazySearchCompletionState(e);this.dataVersion.update(a=>a+1);this.highlightedIndex.set(0);this.isOpen.set(true);this.isLoading.set(false)},error:()=>{if(t!==this.lazySearchRequestId)return;this.model().options=[];this.resetLazySearchState();this.dataVersion.update(n=>n+1);this.isLoading.set(false)}})}buildLazyRuntimeContext(e){const t=String(this.model().name??"").trim();const n=String(this.model().queryContextKey??"").trim()||"query";const a=(this.isSearchMode()?this.resolveSearchResultLimit():null)??this.normalizeMaxSuggestions(this.model().maxSuggestions);const i={[n]:e,query:e,filterValue:e,filterValueModified4Search:null,term:e,search:e,recordCount:a,rowLimit:a,limit:a,take:a,maxSuggestions:a,value:this.model().value,item:null,row:null};if(t){i[t]=this.model().value;i["__autocomplete"]={[t]:{query:e,term:e,recordCount:a,value:this.model().value}}}return _(this.model(),s=>this.dataService.getValue(s),i)??i}tryUseLocalLazySearch(e){if(!this.shouldFilterLazyOptionsLocally(e))return false;this.clearLazySearchSubscription();this.isLoading.set(false);this.highlightedIndex.set(0);this.isOpen.set(true);this.dataVersion.update(t=>t+1);return true}updateLazySearchCompletionState(e){const t=this.flattenOptions(this.model().options??[]).length;const n=this.normalizeMaxSuggestions(this.model().maxSuggestions);this.lazyLocalBaseQuery.set(e);this.lazyLocalResultComplete.set(t<n)}resetLazySearchState(){this.lazySearchRequestId+=1;this.lazyLastRemoteQuery="";this.lazyLocalBaseQuery.set("");this.lazyLocalResultComplete.set(false)}shouldFilterLazyOptionsLocally(e){if(!this.model().lazyLoad)return false;if(!this.lazyLocalResultComplete())return false;const t=this.normalizeSearchText(e);const n=this.normalizeSearchText(this.lazyLocalBaseQuery());return Boolean(n)&&t.startsWith(n)}computeVisibleOptions(){if(this.isSearchMode())return this.computeSearchOptions();return this.flattenOptions(this.model().options??[]).filter(e=>this.passesOptionFilters(e)&&this.isOptionVisible(e))}flattenOptions(e){if(!Array.isArray(e))return[];const t=[];e.forEach(n=>{const a=n;if(Array.isArray(a?.["items"])){a["items"].forEach(i=>{const s=i;t.push({label:String(s?.["label"]??"").trim(),value:s?.["value"],visibleIf:String(s?.["visibleIf"]??"").trim()||void 0})});return}t.push({label:String(a?.["label"]??"").trim(),value:a?.["value"],visibleIf:String(a?.["visibleIf"]??"").trim()||void 0})});return t.filter(n=>n.label.length>0)}optionMatchesSearch(e,t){const n=this.normalizeSearchText(t);if(!n)return true;return this.normalizeSearchText(e.label).includes(n)}normalizeSearchText(e){return String(e??"").trim().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"")}passesOptionFilters(e){const t=String(this.model().filterOptionsBy??"").trim()||String(this.model().dataSource?.filterOptionsBy??"").trim();const n=String(this.model().filterIfEqual??"").trim();const a=String(this.model().filterIfNotEqual??"").trim();if(!t&&!n&&!a)return true;const i=this.dataService.getData()??{};return O([e],t,i,{valuePath:"value",filterIfEqual:n,filterIfNotEqual:a}).length>0}isOptionVisible(e){const t=String(e?.visibleIf??"").trim();if(!t)return true;try{const n=this.normalizeOptionCondition(t);const a=this.expressionService.runPropertyConditionSync(this.dataService.getData(),n);return Boolean(a)}catch{return true}}normalizeOptionCondition(e){const t=e.replace(/{/g,"").replace(/}/g,"").trim();if(!t)return"";return this.expressionService.applyContextToExpression(t,this.model())}syncInputFromModelValue(){const e=this.model().value;if(e===null||e===void 0){this.inputValue.set("");return}if(this.isSearchMode()){this.inputValue.set(this.resolveSearchInputText(e));return}if(!this.model().forceSelection){if(typeof e==="string"&&!this.visibleOptions().some(n=>this.isSameValue(n.value,e))){this.inputValue.set(e);return}}const t=this.visibleOptions().find(n=>this.isSameValue(n.value,e));if(t){this.inputValue.set(t.label);return}this.inputValue.set(String(e))}resolveSearchInputText(e){const t=this.visibleOptions().find(n=>this.isSameValue(n.value,e))??(this.selectedSearchOption&&this.isSameValue(this.selectedSearchOption.value,e)?this.selectedSearchOption:null);if(t)return t.label;if(typeof e==="object")return this.resolveSearchLabel(e);return String(e)}runActions(e,t){const n=t!==void 0?t:this.model().value;const a=String(this.model().name??"").trim();const i={value:n,item:null,row:null};if(a)i[a]=n;this.elementActionService.runActions(this.model(),this.model().events??[],e,i)}isInteractionLocked(){const e=this.model();if(!e)return false;if(Boolean(e["__pfInteractionLocked"]))return true;if(this.dataSourceLoading())return true;return Boolean(e.disabled)||Boolean(e.readOnly)}isSameValue(e,t){if(e!==null&&typeof e==="object"||t!==null&&typeof t==="object")return N(e,t);return String(e??"")===String(t??"")}clearBlurTimer(){if(!this.blurTimer)return;clearTimeout(this.blurTimer);this.blurTimer=null}clearLazySearchTimer(){if(!this.lazySearchTimer)return;clearTimeout(this.lazySearchTimer);this.lazySearchTimer=null}clearLazySearchSubscription(){if(!this.lazySearchSubscription)return;this.lazySearchSubscription.unsubscribe();this.lazySearchSubscription=null}normalizeMaxSuggestions(e){const t=Number(e);if(!Number.isFinite(t))return 20;return Math.max(1,Math.min(500,Math.floor(t)))}normalizeMinSearchLength(e){const t=Number(e);if(!Number.isFinite(t))return 1;return Math.max(0,Math.min(10,Math.floor(t)))}normalizeDebounceMs(e){const t=Number(e);if(!Number.isFinite(t)||String(e??"").trim()==="")return 1e3;return Math.max(0,Math.min(1e4,Math.floor(t)))}static ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:h,deps:[],target:r.ɵɵFactoryTarget.Component});static ɵcmp=r.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:h,isStandalone:true,selector:"autocomplete-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},host:{listeners:{"document:click":"onDocumentClick($event)"}},viewQueries:[{propertyName:"containerRef",first:true,predicate:["container"],descendants:true}],ngImport:r,template:"<element-wrapper [model]=\"model()\">\n  @if (model().dataSource && !dataSourceLoaded() && !model().lazyLoad && 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-autocomplete\"\n      [class.nvb-autocomplete--open]=\"isOpen()\"\n      [class.nvb-autocomplete--loading]=\"dataSourceLoading()\"\n      #container\n      [attr.data-testid]=\"tid('root')\"\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n    >\n      <div class=\"nvb-autocomplete__control\">\n        <span class=\"material-symbols-outlined nvb-autocomplete__icon\">search</span>\n        <input [attr.data-testid]=\"tid('input')\"\n          [id]=\"model().name\"\n          [ngClass]=\"useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\n          class=\"nvb-autocomplete__input\"\n          type=\"text\"\n          [placeholder]=\"\n            dataSourceLoading()\n              ? ('autocomplete.loading' | uiT: 'Loading...')\n              : model().placeholder\n              ? (model().placeholder | dynamicText: model())\n              : ('autocomplete.placeholder' | uiT: 'Search...')\n          \"\n          [disabled]=\"model().disabled || dataSourceLoading()\"\n          [readOnly]=\"model().readOnly\"\n          [value]=\"inputValue()\"\n          autocomplete=\"off\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (keydown)=\"onKeyDown($event)\"\n        />\n\n        @if (dataSourceLoading()) {\n          <span class=\"nvb-autocomplete__spinner\" aria-hidden=\"true\"></span>\n        } @else if (inputValue()) {\n          <button [attr.data-testid]=\"tid('clear')\"\n            type=\"button\"\n            class=\"nvb-autocomplete__clear\"\n            [attr.title]=\"'autocomplete.clear' | uiT: 'Clear'\"\n            [attr.aria-label]=\"'autocomplete.clear' | uiT: 'Clear'\"\n            (mousedown)=\"clear($event)\"\n          >\n            <span class=\"material-symbols-outlined\">close</span>\n          </button>\n        }\n      </div>\n\n      @if (isOpen() && !dataSourceLoading() && dropdownHasContent()) {\n        <div class=\"nvb-autocomplete__dropdown\" [attr.data-testid]=\"tid('options')\">\n          @if (isLoading()) {\n            <div class=\"nvb-autocomplete__status\">\n              {{ 'autocomplete.loading' | uiT: 'Loading...' }}\n            </div>\n          }\n\n          @for (\n            option of suggestionOptions();\n            track trackSuggestion(option, $index);\n            let i = $index\n          ) {\n            <button [attr.data-testid]=\"tid('option', i)\"\n              type=\"button\"\n              class=\"nvb-autocomplete__option\"\n              [ngClass]=\"{\n                'nvb-autocomplete__option--highlighted': isHighlighted(i),\n                'nvb-autocomplete__option--selected': isSelected(option),\n              }\"\n              (mousedown)=\"onOptionMouseDown(option, $event)\"\n            >\n              {{ option.label }}\n            </button>\n          }\n\n          @if (!isLoading() && suggestionOptions().length === 0 && canShowEmptyState()) {\n            <div class=\"nvb-autocomplete__status\">\n              {{ 'autocomplete.empty' | uiT: 'No results found' }}\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-autocomplete{position:relative;width:100%;overflow:visible}.nvb-autocomplete--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-autocomplete--loading{cursor:progress}.nvb-autocomplete__control{position:relative;display:flex;align-items:center}.nvb-autocomplete__input{padding-left:34px;padding-right:30px}.nvb-autocomplete--loading .nvb-autocomplete__input{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-autocomplete-loading-shimmer 1.35s ease-in-out infinite}.nvb-autocomplete__icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--nvb-color-neutral-500);pointer-events:none;z-index:1}.nvb-autocomplete__clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--nvb-color-neutral-500);width:24px;height:24px;border-radius:var(--nvb-radius-md);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.nvb-autocomplete__clear:hover{background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-autocomplete__clear span{font-size:16px}.nvb-autocomplete__spinner{position:absolute;right:10px;top:50%;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);transform:translateY(-50%);animation:nvb-autocomplete-loading-spin .8s linear infinite}.nvb-autocomplete__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-8);z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:4px}.nvb-autocomplete__option{display:block;width:100%;border:none;background:transparent;text-align:left;min-height:32px;padding:0 10px;border-radius:var(--nvb-control-radius);font-size:13px;color:var(--nvb-color-neutral-700);cursor:pointer;transition:background-color .12s ease}.nvb-autocomplete__option:hover,.nvb-autocomplete__option--highlighted{background:var(--nvb-color-neutral-100)}.nvb-autocomplete__option--selected{background:var(--nvb-color-primary-050);color:var(--nvb-color-primary-700);font-weight:600}.nvb-autocomplete__status{padding:10px 12px;font-size:12px;color:var(--nvb-color-neutral-500)}@keyframes nvb-autocomplete-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-autocomplete-loading-spin{to{transform:translateY(-50%) rotate(360deg)}}\n"],dependencies:[{kind:"component",type:v,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:b,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"pipe",type:g,name:"dynamicText"},{kind:"pipe",type:m,name:"uiT"}],changeDetection:r.ChangeDetectionStrategy.OnPush})};r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:d,decorators:[{type:V,args:[{selector:"autocomplete-element",changeDetection:I.OnPush,imports:[v,g,b,m],template:"<element-wrapper [model]=\"model()\">\n  @if (model().dataSource && !dataSourceLoaded() && !model().lazyLoad && 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-autocomplete\"\n      [class.nvb-autocomplete--open]=\"isOpen()\"\n      [class.nvb-autocomplete--loading]=\"dataSourceLoading()\"\n      #container\n      [attr.data-testid]=\"tid('root')\"\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n    >\n      <div class=\"nvb-autocomplete__control\">\n        <span class=\"material-symbols-outlined nvb-autocomplete__icon\">search</span>\n        <input [attr.data-testid]=\"tid('input')\"\n          [id]=\"model().name\"\n          [ngClass]=\"useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\n          class=\"nvb-autocomplete__input\"\n          type=\"text\"\n          [placeholder]=\"\n            dataSourceLoading()\n              ? ('autocomplete.loading' | uiT: 'Loading...')\n              : model().placeholder\n              ? (model().placeholder | dynamicText: model())\n              : ('autocomplete.placeholder' | uiT: 'Search...')\n          \"\n          [disabled]=\"model().disabled || dataSourceLoading()\"\n          [readOnly]=\"model().readOnly\"\n          [value]=\"inputValue()\"\n          autocomplete=\"off\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (keydown)=\"onKeyDown($event)\"\n        />\n\n        @if (dataSourceLoading()) {\n          <span class=\"nvb-autocomplete__spinner\" aria-hidden=\"true\"></span>\n        } @else if (inputValue()) {\n          <button [attr.data-testid]=\"tid('clear')\"\n            type=\"button\"\n            class=\"nvb-autocomplete__clear\"\n            [attr.title]=\"'autocomplete.clear' | uiT: 'Clear'\"\n            [attr.aria-label]=\"'autocomplete.clear' | uiT: 'Clear'\"\n            (mousedown)=\"clear($event)\"\n          >\n            <span class=\"material-symbols-outlined\">close</span>\n          </button>\n        }\n      </div>\n\n      @if (isOpen() && !dataSourceLoading() && dropdownHasContent()) {\n        <div class=\"nvb-autocomplete__dropdown\" [attr.data-testid]=\"tid('options')\">\n          @if (isLoading()) {\n            <div class=\"nvb-autocomplete__status\">\n              {{ 'autocomplete.loading' | uiT: 'Loading...' }}\n            </div>\n          }\n\n          @for (\n            option of suggestionOptions();\n            track trackSuggestion(option, $index);\n            let i = $index\n          ) {\n            <button [attr.data-testid]=\"tid('option', i)\"\n              type=\"button\"\n              class=\"nvb-autocomplete__option\"\n              [ngClass]=\"{\n                'nvb-autocomplete__option--highlighted': isHighlighted(i),\n                'nvb-autocomplete__option--selected': isSelected(option),\n              }\"\n              (mousedown)=\"onOptionMouseDown(option, $event)\"\n            >\n              {{ option.label }}\n            </button>\n          }\n\n          @if (!isLoading() && suggestionOptions().length === 0 && canShowEmptyState()) {\n            <div class=\"nvb-autocomplete__status\">\n              {{ 'autocomplete.empty' | uiT: 'No results found' }}\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-autocomplete{position:relative;width:100%;overflow:visible}.nvb-autocomplete--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-autocomplete--loading{cursor:progress}.nvb-autocomplete__control{position:relative;display:flex;align-items:center}.nvb-autocomplete__input{padding-left:34px;padding-right:30px}.nvb-autocomplete--loading .nvb-autocomplete__input{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-autocomplete-loading-shimmer 1.35s ease-in-out infinite}.nvb-autocomplete__icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--nvb-color-neutral-500);pointer-events:none;z-index:1}.nvb-autocomplete__clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--nvb-color-neutral-500);width:24px;height:24px;border-radius:var(--nvb-radius-md);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.nvb-autocomplete__clear:hover{background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-autocomplete__clear span{font-size:16px}.nvb-autocomplete__spinner{position:absolute;right:10px;top:50%;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);transform:translateY(-50%);animation:nvb-autocomplete-loading-spin .8s linear infinite}.nvb-autocomplete__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-8);z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:4px}.nvb-autocomplete__option{display:block;width:100%;border:none;background:transparent;text-align:left;min-height:32px;padding:0 10px;border-radius:var(--nvb-control-radius);font-size:13px;color:var(--nvb-color-neutral-700);cursor:pointer;transition:background-color .12s ease}.nvb-autocomplete__option:hover,.nvb-autocomplete__option--highlighted{background:var(--nvb-color-neutral-100)}.nvb-autocomplete__option--selected{background:var(--nvb-color-primary-050);color:var(--nvb-color-primary-700);font-weight:600}.nvb-autocomplete__status{padding:10px 12px;font-size:12px;color:var(--nvb-color-neutral-500)}@keyframes nvb-autocomplete-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-autocomplete-loading-spin{to{transform:translateY(-50%) rotate(360deg)}}\n"]}]}],propDecorators:{model:[{type:r.Input,args:[{isSignal:true,alias:"model",required:true}]}],containerRef:[{type:M,args:["container"]}],onDocumentClick:[{type:D,args:["document:click",["$event"]]}]}});export{B as n,d as t};
+import{t as f}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as p,c as y,d as x,g as L,n as m,on as z,p as _,t as g,yt as w}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{ft as O,r as C,rt as T,t as v}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs";import*as r from"@angular/core";import{ChangeDetectionStrategy as I,Component as V,HostListener as D,ViewChild as M,computed as c,inject as l,input as k,signal as o}from"@angular/core";import{NgClass as b}from"@angular/common";import{cloneDeep as R,get as u,isEqual as N}from"lodash-es";var B=f({AutocompleteElement:()=>d});const A=["items","data.items","data.rows","data.records","data.results","data.content","records","rows","results","content","result","data"];var d=class h{model=k.required(...ngDevMode?[{debugName:"model"}]:[]);tid=C(this.model,"nvb-autocomplete","autocomplete");containerRef;inputValue=o("",...ngDevMode?[{debugName:"inputValue"}]:[]);isOpen=o(false,...ngDevMode?[{debugName:"isOpen"}]:[]);highlightedIndex=o(0,...ngDevMode?[{debugName:"highlightedIndex"}]:[]);dataSourceLoaded=o(false,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);isEditorView=o(p.isEditor(),...ngDevMode?[{debugName:"isEditorView"}]:[]);useCompactStyle=o(false,...ngDevMode?[{debugName:"useCompactStyle"}]:[]);isLoading=o(false,...ngDevMode?[{debugName:"isLoading"}]:[]);dataVersion=o(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);blurTimer=null;lazySearchTimer=null;lazySearchSubscription=null;lazySearchRequestId=0;lazyLastRemoteQuery="";lazyLocalBaseQuery=o("",...ngDevMode?[{debugName:"lazyLocalBaseQuery"}]:[]);lazyLocalResultComplete=o(false,...ngDevMode?[{debugName:"lazyLocalResultComplete"}]:[]);searchItems=o([],...ngDevMode?[{debugName:"searchItems"}]:[]);searchBaseQuery=o("",...ngDevMode?[{debugName:"searchBaseQuery"}]:[]);searchComplete=o(false,...ngDevMode?[{debugName:"searchComplete"}]:[]);selectedSearchOption=null;elementActionService=l(T);dataService=l(z);eventService=l(L);expressionService=l(x);dataSourceService=l(y);visibleOptions=c(()=>{this.dataVersion();return this.computeVisibleOptions()},...ngDevMode?[{debugName:"visibleOptions"}]:[]);suggestionOptions=c(()=>{const e=this.visibleOptions();const t=this.inputValue().trim().toLowerCase();if(!t)return[];const n=this.normalizeMaxSuggestions(this.model().maxSuggestions);if(this.isSearchMode())return this.filterSearchOptions(e,t).slice(0,n);let a=e;if(!this.model().lazyLoad||this.shouldFilterLazyOptionsLocally(t))a=e.filter(i=>this.optionMatchesSearch(i,t));return a.slice(0,n)},...ngDevMode?[{debugName:"suggestionOptions"}]:[]);dropdownHasContent=c(()=>this.isLoading()||this.suggestionOptions().length>0||this.canShowEmptyState(),...ngDevMode?[{debugName:"dropdownHasContent"}]:[]);dataSourceLoading=c(()=>Boolean(this.model().dataSource)&&!this.dataSourceLoaded()&&!this.model().lazyLoad&&!this.isSearchMode()&&!this.isEditorView(),...ngDevMode?[{debugName:"dataSourceLoading"}]:[]);onDataSourceLoadedHandler=()=>{this.dataSourceLoaded.set(true);this.dataVersion.update(e=>e+1);this.syncInputFromModelValue()};onDataValueChangedHandler=()=>{this.dataVersion.update(e=>e+1);this.syncInputFromModelValue()};ngOnInit(){const e=!this.model().dataSource||Boolean(this.model().dataSourceLoaded)||Boolean(this.model().lazyLoad)||this.isSearchMode();this.dataSourceLoaded.set(e);this.model().afterDataSourceLoad.add(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.add(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.add(this.onDataValueChangedHandler);this.isEditorView.set(p.isEditor());if(this.model()?.parentElement&&this.model()?.parentElement instanceof w)this.useCompactStyle.set(this.model()?.parentElement["useCompactStyle"]);this.syncInputFromModelValue()}ngOnDestroy(){this.model().afterDataSourceLoad.remove(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.remove(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.remove(this.onDataValueChangedHandler);this.clearBlurTimer();this.clearLazySearchTimer();this.clearLazySearchSubscription()}onInput(e){if(this.isInteractionLocked())return;this.clearBlurTimer();const t=e.target;if(!t)return;const n=String(t.value??"");this.inputValue.set(n);this.highlightedIndex.set(0);this.isOpen.set(n.trim().length>0);if(!this.model().forceSelection)this.model().setValue(n,"input");this.runActions("input",n);if(this.isSearchMode())this.scheduleRemoteSearch(n);else if(this.model().lazyLoad&&this.model().dataSource)this.scheduleLazySearch(n)}onFocus(){if(this.isInteractionLocked())return;this.clearBlurTimer();this.runActions("focus",this.model().value);this.isOpen.set(false)}onBlur(){this.clearBlurTimer();this.blurTimer=setTimeout(()=>{this.applyBlurBehavior();this.isOpen.set(false);this.runActions("blur",this.model().value)},120)}onKeyDown(e){if(!this.isOpen()&&e.key==="ArrowDown"){this.isOpen.set(true);return}const t=this.suggestionOptions();if(!t.length){if(e.key==="Escape")this.isOpen.set(false);return}if(e.key==="ArrowDown"){e.preventDefault();const n=(this.highlightedIndex()+1)%t.length;this.highlightedIndex.set(n);return}if(e.key==="ArrowUp"){e.preventDefault();const n=(this.highlightedIndex()-1+t.length)%t.length;this.highlightedIndex.set(n);return}if(e.key==="Enter"){e.preventDefault();const n=t[this.highlightedIndex()]??null;if(n)this.selectOption(n);return}if(e.key==="Escape"){e.preventDefault();this.isOpen.set(false)}}onOptionMouseDown(e,t){t.preventDefault();if(this.isInteractionLocked())return;this.clearBlurTimer();this.selectOption(e)}clear(e){e.preventDefault();e.stopPropagation();if(this.isInteractionLocked())return;this.clearLazySearchTimer();this.clearLazySearchSubscription();this.resetLazySearchState();this.resetRemoteSearchState();this.isLoading.set(false);this.inputValue.set("");this.isOpen.set(false);this.highlightedIndex.set(0);this.model().setValue(null,"change");this.runActions("change",null)}isHighlighted(e){return this.highlightedIndex()===e}isSelected(e){return this.isSameValue(e.value,this.model().value)}trackSuggestion(e,t){return`${String(e.value??"")}-${t}`}hasSearchTerm(){return this.inputValue().trim().length>0}canShowEmptyState(){if(!this.hasSearchTerm())return false;if(this.isSearchMode())return this.searchAnswerCovers(this.inputValue());if(!this.model().lazyLoad)return true;const e=this.normalizeMinSearchLength(this.model().minSearchLength);return this.inputValue().trim().length>=e}onDocumentClick(e){if(!this.isOpen())return;const t=this.containerRef?.nativeElement;if(!t){this.isOpen.set(false);return}const n=e.target;const a=typeof e.composedPath==="function"?e.composedPath():[];if(!((n?t.contains(n):false)||a.includes(t))){this.applyBlurBehavior();this.isOpen.set(false)}}selectOption(e){const t=e.value!==null&&typeof e.value==="object"?R(e.value):e.value;if(this.isSearchMode())this.selectedSearchOption={...e,value:t};this.inputValue.set(e.label);this.isOpen.set(false);this.highlightedIndex.set(0);this.model().setValue(t,"change");this.runActions("change",t)}applyBlurBehavior(){if(!this.model().forceSelection)return;const e=this.inputValue().trim();const t=this.model().value;if(!e){this.model().setValue(null,"change");if(!Object.is(t,this.model().value))this.runActions("change",this.model().value);return}const n=this.visibleOptions().find(a=>a.label.toLowerCase()===e.toLowerCase());if(n){this.inputValue.set(n.label);this.model().setValue(n.value,"change")}else{this.inputValue.set("");this.model().setValue(null,"change")}if(!Object.is(t,this.model().value))this.runActions("change",this.model().value)}isSearchMode(){return String(this.model().searchDataSourceName??"").trim().length>0}scheduleRemoteSearch(e){const t=String(e??"").trim();const n=this.normalizeMinSearchLength(this.model().minSearchLength);this.clearLazySearchTimer();if(t.length<n){this.cancelRemoteSearch();return}if(this.canNarrowSearchLocally(t)||this.isAnsweredQuery(t)){this.cancelRemoteSearch();this.highlightedIndex.set(0);this.isOpen.set(true);return}this.isLoading.set(true);const a=this.normalizeDebounceMs(this.model().debounceMs);this.lazySearchTimer=setTimeout(()=>{this.lazySearchTimer=null;this.executeRemoteSearch(t)},a)}executeRemoteSearch(e){const t=String(this.model().searchDataSourceName??"").trim();if(!t||this.canNarrowSearchLocally(e)){this.cancelRemoteSearch();return}this.clearLazySearchSubscription();const n=++this.lazySearchRequestId;this.isLoading.set(true);this.lazySearchSubscription=this.dataSourceService.getData$(t,true,this.model(),this.buildLazyRuntimeContext(e)).subscribe({next:a=>{if(n!==this.lazySearchRequestId)return;const i=this.resolveSearchItems(a);const s=this.resolveSearchResultLimit();this.searchItems.set(i);this.searchBaseQuery.set(e);this.searchComplete.set(s!==null&&i.length<s);this.dataVersion.update(S=>S+1);this.highlightedIndex.set(0);this.isOpen.set(this.hasSearchTerm());this.isLoading.set(this.lazySearchTimer!==null)},error:()=>{if(n!==this.lazySearchRequestId)return;this.searchItems.set([]);this.searchBaseQuery.set(e);this.searchComplete.set(false);this.dataVersion.update(a=>a+1);this.isLoading.set(this.lazySearchTimer!==null)}})}cancelRemoteSearch(){this.clearLazySearchTimer();this.clearLazySearchSubscription();this.lazySearchRequestId+=1;this.isLoading.set(false)}resetRemoteSearchState(){this.cancelRemoteSearch();this.searchItems.set([]);this.searchBaseQuery.set("");this.searchComplete.set(false);this.dataVersion.update(e=>e+1)}canNarrowSearchLocally(e){return this.searchComplete()&&this.searchAnswerCovers(e)}isAnsweredQuery(e){const t=this.normalizeSearchText(this.searchBaseQuery());return Boolean(t)&&this.normalizeSearchText(e)===t}searchAnswerCovers(e){const t=this.normalizeSearchText(this.searchBaseQuery());return Boolean(t)&&this.normalizeSearchText(e).startsWith(t)}filterSearchOptions(e,t){if(this.isAnsweredQuery(t))return e;if(!this.searchAnswerCovers(t))return[];return e.filter(n=>this.searchOptionMatches(n,t))}searchOptionMatches(e,t){if(this.optionMatchesSearch(e,t))return true;const n=e.raw;if(!n||typeof n!=="object")return false;const a=this.normalizeSearchText(t);return Object.values(n).some(i=>(typeof i==="string"||typeof i==="number")&&this.normalizeSearchText(i).includes(a))}computeSearchOptions(){return this.searchItems().map(e=>this.toSearchOption(e)).filter(e=>e!==null)}toSearchOption(e){const t=this.resolveSearchLabel(e);if(!t)return null;const n=String(this.model().searchValueKey??"").trim();return{label:t,value:n&&e!==null&&typeof e==="object"?u(e,n):e,raw:e}}resolveSearchLabel(e){if(e===null||e===void 0)return"";if(typeof e!=="object")return String(e).trim();const t=e;const n=String(this.model().searchLabelKey??"").trim();const a=n?u(t,n):t["label"]??t["name"]??t["title"]??t["text"];if(a===null||a===void 0)return"";return typeof a==="object"?JSON.stringify(a):String(a).trim()}resolveSearchItems(e){const t=String(this.model().searchItemsPath??"").trim();if(t){const n=u(e,t);return Array.isArray(n)?n:[]}if(Array.isArray(e))return e;if(!e||typeof e!=="object")return[];for(const n of A){const a=u(e,n);if(Array.isArray(a))return a}return[]}resolveSearchResultLimit(){const e=this.model().searchResultLimit;if(e===null||e===void 0||String(e).trim()==="")return null;const t=Number(e);return Number.isFinite(t)&&t>0?Math.floor(t):null}scheduleLazySearch(e){const t=String(e??"").trim();const n=this.normalizeMinSearchLength(this.model().minSearchLength);this.clearLazySearchTimer();if(t.length<n){this.clearLazySearchSubscription();this.resetLazySearchState();this.isLoading.set(false);this.model().options=[];this.dataVersion.update(i=>i+1);return}if(this.tryUseLocalLazySearch(t))return;if(this.normalizeSearchText(t)===this.normalizeSearchText(this.lazyLastRemoteQuery)&&this.flattenOptions(this.model().options??[]).length>0){this.isLoading.set(false);this.highlightedIndex.set(0);this.isOpen.set(true);return}const a=this.normalizeDebounceMs(this.model().debounceMs);this.lazySearchTimer=setTimeout(()=>{this.executeLazySearch(t)},a)}executeLazySearch(e){if(!this.model().dataSource)return;this.clearLazySearchSubscription();const t=++this.lazySearchRequestId;this.lazyLastRemoteQuery=e;this.isLoading.set(true);this.lazySearchSubscription=this.dataSourceService.getData$(this.model().dataSource,true,this.model(),this.buildLazyRuntimeContext(e)).subscribe({next:n=>{if(t!==this.lazySearchRequestId)return;this.model().setOptions(n);this.model().dataSourceLoaded=true;this.dataSourceLoaded.set(true);this.updateLazySearchCompletionState(e);this.dataVersion.update(a=>a+1);this.highlightedIndex.set(0);this.isOpen.set(true);this.isLoading.set(false)},error:()=>{if(t!==this.lazySearchRequestId)return;this.model().options=[];this.resetLazySearchState();this.dataVersion.update(n=>n+1);this.isLoading.set(false)}})}buildLazyRuntimeContext(e){const t=String(this.model().name??"").trim();const n=String(this.model().queryContextKey??"").trim()||"query";const a=(this.isSearchMode()?this.resolveSearchResultLimit():null)??this.normalizeMaxSuggestions(this.model().maxSuggestions);const i={[n]:e,query:e,filterValue:e,filterValueModified4Search:null,term:e,search:e,recordCount:a,rowLimit:a,limit:a,take:a,maxSuggestions:a,value:this.model().value,item:null,row:null};if(t){i[t]=this.model().value;i["__autocomplete"]={[t]:{query:e,term:e,recordCount:a,value:this.model().value}}}return _(this.model(),s=>this.dataService.getValue(s),i)??i}tryUseLocalLazySearch(e){if(!this.shouldFilterLazyOptionsLocally(e))return false;this.clearLazySearchSubscription();this.isLoading.set(false);this.highlightedIndex.set(0);this.isOpen.set(true);this.dataVersion.update(t=>t+1);return true}updateLazySearchCompletionState(e){const t=this.flattenOptions(this.model().options??[]).length;const n=this.normalizeMaxSuggestions(this.model().maxSuggestions);this.lazyLocalBaseQuery.set(e);this.lazyLocalResultComplete.set(t<n)}resetLazySearchState(){this.lazySearchRequestId+=1;this.lazyLastRemoteQuery="";this.lazyLocalBaseQuery.set("");this.lazyLocalResultComplete.set(false)}shouldFilterLazyOptionsLocally(e){if(!this.model().lazyLoad)return false;if(!this.lazyLocalResultComplete())return false;const t=this.normalizeSearchText(e);const n=this.normalizeSearchText(this.lazyLocalBaseQuery());return Boolean(n)&&t.startsWith(n)}computeVisibleOptions(){if(this.isSearchMode())return this.computeSearchOptions();return this.flattenOptions(this.model().options??[]).filter(e=>this.passesOptionFilters(e)&&this.isOptionVisible(e))}flattenOptions(e){if(!Array.isArray(e))return[];const t=[];e.forEach(n=>{const a=n;if(Array.isArray(a?.["items"])){a["items"].forEach(i=>{const s=i;t.push({label:String(s?.["label"]??"").trim(),value:s?.["value"],visibleIf:String(s?.["visibleIf"]??"").trim()||void 0})});return}t.push({label:String(a?.["label"]??"").trim(),value:a?.["value"],visibleIf:String(a?.["visibleIf"]??"").trim()||void 0})});return t.filter(n=>n.label.length>0)}optionMatchesSearch(e,t){const n=this.normalizeSearchText(t);if(!n)return true;return this.normalizeSearchText(e.label).includes(n)}normalizeSearchText(e){return String(e??"").trim().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"")}passesOptionFilters(e){const t=String(this.model().filterOptionsBy??"").trim()||String(this.model().dataSource?.filterOptionsBy??"").trim();const n=String(this.model().filterIfEqual??"").trim();const a=String(this.model().filterIfNotEqual??"").trim();if(!t&&!n&&!a)return true;const i=this.dataService.getData()??{};return O([e],t,i,{valuePath:"value",filterIfEqual:n,filterIfNotEqual:a}).length>0}isOptionVisible(e){const t=String(e?.visibleIf??"").trim();if(!t)return true;try{const n=this.normalizeOptionCondition(t);const a=this.expressionService.runPropertyConditionSync(this.dataService.getData(),n);return Boolean(a)}catch{return true}}normalizeOptionCondition(e){const t=e.replace(/{/g,"").replace(/}/g,"").trim();if(!t)return"";return this.expressionService.applyContextToExpression(t,this.model())}syncInputFromModelValue(){const e=this.model().value;if(e===null||e===void 0){this.inputValue.set("");return}if(this.isSearchMode()){this.inputValue.set(this.resolveSearchInputText(e));return}if(!this.model().forceSelection){if(typeof e==="string"&&!this.visibleOptions().some(n=>this.isSameValue(n.value,e))){this.inputValue.set(e);return}}const t=this.visibleOptions().find(n=>this.isSameValue(n.value,e));if(t){this.inputValue.set(t.label);return}this.inputValue.set(String(e))}resolveSearchInputText(e){const t=this.visibleOptions().find(n=>this.isSameValue(n.value,e))??(this.selectedSearchOption&&this.isSameValue(this.selectedSearchOption.value,e)?this.selectedSearchOption:null);if(t)return t.label;if(typeof e==="object")return this.resolveSearchLabel(e);return String(e)}runActions(e,t){const n=t!==void 0?t:this.model().value;const a=String(this.model().name??"").trim();const i={value:n,item:null,row:null};if(a)i[a]=n;this.elementActionService.runActions(this.model(),this.model().events??[],e,i)}isInteractionLocked(){const e=this.model();if(!e)return false;if(Boolean(e["__pfInteractionLocked"]))return true;if(this.dataSourceLoading())return true;return Boolean(e.disabled)||Boolean(e.readOnly)}isSameValue(e,t){if(e!==null&&typeof e==="object"||t!==null&&typeof t==="object")return N(e,t);return String(e??"")===String(t??"")}clearBlurTimer(){if(!this.blurTimer)return;clearTimeout(this.blurTimer);this.blurTimer=null}clearLazySearchTimer(){if(!this.lazySearchTimer)return;clearTimeout(this.lazySearchTimer);this.lazySearchTimer=null}clearLazySearchSubscription(){if(!this.lazySearchSubscription)return;this.lazySearchSubscription.unsubscribe();this.lazySearchSubscription=null}normalizeMaxSuggestions(e){const t=Number(e);if(!Number.isFinite(t))return 20;return Math.max(1,Math.min(500,Math.floor(t)))}normalizeMinSearchLength(e){const t=Number(e);if(!Number.isFinite(t))return 1;return Math.max(0,Math.min(10,Math.floor(t)))}normalizeDebounceMs(e){const t=Number(e);if(!Number.isFinite(t)||String(e??"").trim()==="")return 1e3;return Math.max(0,Math.min(1e4,Math.floor(t)))}static ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:h,deps:[],target:r.ɵɵFactoryTarget.Component});static ɵcmp=r.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:h,isStandalone:true,selector:"autocomplete-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},host:{listeners:{"document:click":"onDocumentClick($event)"}},viewQueries:[{propertyName:"containerRef",first:true,predicate:["container"],descendants:true}],ngImport:r,template:"<element-wrapper [model]=\"model()\">\n  @if (model().dataSource && !dataSourceLoaded() && !model().lazyLoad && 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-autocomplete\"\n      [class.nvb-autocomplete--open]=\"isOpen()\"\n      [class.nvb-autocomplete--loading]=\"dataSourceLoading()\"\n      #container\n      [attr.data-testid]=\"tid('root')\"\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n    >\n      <div class=\"nvb-autocomplete__control\">\n        <span class=\"material-symbols-outlined nvb-autocomplete__icon\">search</span>\n        <input [attr.data-testid]=\"tid('input')\"\n          [id]=\"model().name\"\n          [ngClass]=\"useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\n          class=\"nvb-autocomplete__input\"\n          type=\"text\"\n          [placeholder]=\"\n            dataSourceLoading()\n              ? ('autocomplete.loading' | uiT: 'Loading...')\n              : model().placeholder\n              ? (model().placeholder | dynamicText: model())\n              : ('autocomplete.placeholder' | uiT: 'Search...')\n          \"\n          [disabled]=\"model().disabled || dataSourceLoading()\"\n          [readOnly]=\"model().readOnly\"\n          [value]=\"inputValue()\"\n          autocomplete=\"off\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (keydown)=\"onKeyDown($event)\"\n        />\n\n        @if (dataSourceLoading()) {\n          <span class=\"nvb-autocomplete__spinner\" aria-hidden=\"true\"></span>\n        } @else if (inputValue()) {\n          <button [attr.data-testid]=\"tid('clear')\"\n            type=\"button\"\n            class=\"nvb-autocomplete__clear\"\n            [attr.title]=\"'autocomplete.clear' | uiT: 'Clear'\"\n            [attr.aria-label]=\"'autocomplete.clear' | uiT: 'Clear'\"\n            (mousedown)=\"clear($event)\"\n          >\n            <span class=\"material-symbols-outlined\">close</span>\n          </button>\n        }\n      </div>\n\n      @if (isOpen() && !dataSourceLoading() && dropdownHasContent()) {\n        <div class=\"nvb-autocomplete__dropdown\" [attr.data-testid]=\"tid('options')\">\n          @if (isLoading()) {\n            <div class=\"nvb-autocomplete__status\">\n              {{ 'autocomplete.loading' | uiT: 'Loading...' }}\n            </div>\n          }\n\n          @for (\n            option of suggestionOptions();\n            track trackSuggestion(option, $index);\n            let i = $index\n          ) {\n            <button [attr.data-testid]=\"tid('option', i)\"\n              type=\"button\"\n              class=\"nvb-autocomplete__option\"\n              [ngClass]=\"{\n                'nvb-autocomplete__option--highlighted': isHighlighted(i),\n                'nvb-autocomplete__option--selected': isSelected(option),\n              }\"\n              (mousedown)=\"onOptionMouseDown(option, $event)\"\n            >\n              {{ option.label }}\n            </button>\n          }\n\n          @if (!isLoading() && suggestionOptions().length === 0 && canShowEmptyState()) {\n            <div class=\"nvb-autocomplete__status\">\n              {{ 'autocomplete.empty' | uiT: 'No results found' }}\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-autocomplete{position:relative;width:100%;overflow:visible}.nvb-autocomplete--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-autocomplete--loading{cursor:progress}.nvb-autocomplete__control{position:relative;display:flex;align-items:center}.nvb-autocomplete__input{padding-left:34px;padding-right:30px}.nvb-autocomplete--loading .nvb-autocomplete__input{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-autocomplete-loading-shimmer 1.35s ease-in-out infinite}.nvb-autocomplete__icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--nvb-color-neutral-500);pointer-events:none;z-index:1}.nvb-autocomplete__clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--nvb-color-neutral-500);width:24px;height:24px;border-radius:var(--nvb-radius-md);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.nvb-autocomplete__clear:hover{background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-autocomplete__clear span{font-size:16px}.nvb-autocomplete__spinner{position:absolute;right:10px;top:50%;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);transform:translateY(-50%);animation:nvb-autocomplete-loading-spin .8s linear infinite}.nvb-autocomplete__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-8);z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:4px}.nvb-autocomplete__option{display:block;width:100%;border:none;background:transparent;text-align:left;min-height:32px;padding:0 10px;border-radius:var(--nvb-control-radius);font-size:13px;color:var(--nvb-color-neutral-700);cursor:pointer;transition:background-color .12s ease}.nvb-autocomplete__option:hover,.nvb-autocomplete__option--highlighted{background:var(--nvb-color-neutral-100)}.nvb-autocomplete__option--selected{background:var(--nvb-color-primary-050);color:var(--nvb-color-primary-700);font-weight:600}.nvb-autocomplete__status{padding:10px 12px;font-size:12px;color:var(--nvb-color-neutral-500)}@keyframes nvb-autocomplete-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-autocomplete-loading-spin{to{transform:translateY(-50%) rotate(360deg)}}\n"],dependencies:[{kind:"component",type:v,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:b,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"pipe",type:g,name:"dynamicText"},{kind:"pipe",type:m,name:"uiT"}],changeDetection:r.ChangeDetectionStrategy.OnPush})};r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:d,decorators:[{type:V,args:[{selector:"autocomplete-element",changeDetection:I.OnPush,imports:[v,g,b,m],template:"<element-wrapper [model]=\"model()\">\n  @if (model().dataSource && !dataSourceLoaded() && !model().lazyLoad && 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-autocomplete\"\n      [class.nvb-autocomplete--open]=\"isOpen()\"\n      [class.nvb-autocomplete--loading]=\"dataSourceLoading()\"\n      #container\n      [attr.data-testid]=\"tid('root')\"\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n    >\n      <div class=\"nvb-autocomplete__control\">\n        <span class=\"material-symbols-outlined nvb-autocomplete__icon\">search</span>\n        <input [attr.data-testid]=\"tid('input')\"\n          [id]=\"model().name\"\n          [ngClass]=\"useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\n          class=\"nvb-autocomplete__input\"\n          type=\"text\"\n          [placeholder]=\"\n            dataSourceLoading()\n              ? ('autocomplete.loading' | uiT: 'Loading...')\n              : model().placeholder\n              ? (model().placeholder | dynamicText: model())\n              : ('autocomplete.placeholder' | uiT: 'Search...')\n          \"\n          [disabled]=\"model().disabled || dataSourceLoading()\"\n          [readOnly]=\"model().readOnly\"\n          [value]=\"inputValue()\"\n          autocomplete=\"off\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (keydown)=\"onKeyDown($event)\"\n        />\n\n        @if (dataSourceLoading()) {\n          <span class=\"nvb-autocomplete__spinner\" aria-hidden=\"true\"></span>\n        } @else if (inputValue()) {\n          <button [attr.data-testid]=\"tid('clear')\"\n            type=\"button\"\n            class=\"nvb-autocomplete__clear\"\n            [attr.title]=\"'autocomplete.clear' | uiT: 'Clear'\"\n            [attr.aria-label]=\"'autocomplete.clear' | uiT: 'Clear'\"\n            (mousedown)=\"clear($event)\"\n          >\n            <span class=\"material-symbols-outlined\">close</span>\n          </button>\n        }\n      </div>\n\n      @if (isOpen() && !dataSourceLoading() && dropdownHasContent()) {\n        <div class=\"nvb-autocomplete__dropdown\" [attr.data-testid]=\"tid('options')\">\n          @if (isLoading()) {\n            <div class=\"nvb-autocomplete__status\">\n              {{ 'autocomplete.loading' | uiT: 'Loading...' }}\n            </div>\n          }\n\n          @for (\n            option of suggestionOptions();\n            track trackSuggestion(option, $index);\n            let i = $index\n          ) {\n            <button [attr.data-testid]=\"tid('option', i)\"\n              type=\"button\"\n              class=\"nvb-autocomplete__option\"\n              [ngClass]=\"{\n                'nvb-autocomplete__option--highlighted': isHighlighted(i),\n                'nvb-autocomplete__option--selected': isSelected(option),\n              }\"\n              (mousedown)=\"onOptionMouseDown(option, $event)\"\n            >\n              {{ option.label }}\n            </button>\n          }\n\n          @if (!isLoading() && suggestionOptions().length === 0 && canShowEmptyState()) {\n            <div class=\"nvb-autocomplete__status\">\n              {{ 'autocomplete.empty' | uiT: 'No results found' }}\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-autocomplete{position:relative;width:100%;overflow:visible}.nvb-autocomplete--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-autocomplete--loading{cursor:progress}.nvb-autocomplete__control{position:relative;display:flex;align-items:center}.nvb-autocomplete__input{padding-left:34px;padding-right:30px}.nvb-autocomplete--loading .nvb-autocomplete__input{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-autocomplete-loading-shimmer 1.35s ease-in-out infinite}.nvb-autocomplete__icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--nvb-color-neutral-500);pointer-events:none;z-index:1}.nvb-autocomplete__clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--nvb-color-neutral-500);width:24px;height:24px;border-radius:var(--nvb-radius-md);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.nvb-autocomplete__clear:hover{background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-autocomplete__clear span{font-size:16px}.nvb-autocomplete__spinner{position:absolute;right:10px;top:50%;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);transform:translateY(-50%);animation:nvb-autocomplete-loading-spin .8s linear infinite}.nvb-autocomplete__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-8);z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:4px}.nvb-autocomplete__option{display:block;width:100%;border:none;background:transparent;text-align:left;min-height:32px;padding:0 10px;border-radius:var(--nvb-control-radius);font-size:13px;color:var(--nvb-color-neutral-700);cursor:pointer;transition:background-color .12s ease}.nvb-autocomplete__option:hover,.nvb-autocomplete__option--highlighted{background:var(--nvb-color-neutral-100)}.nvb-autocomplete__option--selected{background:var(--nvb-color-primary-050);color:var(--nvb-color-primary-700);font-weight:600}.nvb-autocomplete__status{padding:10px 12px;font-size:12px;color:var(--nvb-color-neutral-500)}@keyframes nvb-autocomplete-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-autocomplete-loading-spin{to{transform:translateY(-50%) rotate(360deg)}}\n"]}]}],propDecorators:{model:[{type:r.Input,args:[{isSignal:true,alias:"model",required:true}]}],containerRef:[{type:M,args:["container"]}],onDocumentClick:[{type:D,args:["document:click",["$event"]]}]}});export{B as n,d as t};

package/fesm2022/{ngxviewbuilder-runtime-avatar-element-Bq1dfv2w.mjs → ngxviewbuilder-runtime-avatar-element-98vFX6ZL.mjs}

@@ -1 +1 @@
-import{t as o}from"./ngxviewbuilder-runtime-dynamic-text.pipe-DJNHX-1z.mjs";import{r as v,rt as m,t as s}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.mjs";import*as a from"@angular/core";import{ChangeDetectionStrategy as u,Component as g,computed as l,inject as b,input as f,signal as p}from"@angular/core";import{NgStyle as d}from"@angular/common";var c=class r{model=f.required(...ngDevMode?[{debugName:"model"}]:[]);tid=v(this.model,"nvb-avatar","avatar");previewOpen=p(false,...ngDevMode?[{debugName:"previewOpen"}]:[]);previewSrc=p("",...ngDevMode?[{debugName:"previewSrc"}]:[]);elementActionService=b(m);avatarStyle=l(()=>{const e=Number(this.model()?.size);const n=Number.isFinite(e)&&e>0?Math.floor(e):48;const t=String(this.model()?.shape??"circle").trim().toLowerCase();return{width:`${n}px`,height:`${n}px`,"border-radius":t==="square"?"10px":"999px","background-color":String(this.model()?.backgroundColor??"#dfe6ff").trim()||"#dfe6ff",color:String(this.model()?.textColor??"#1b2d6b").trim()||"#1b2d6b",border:this.model().showBorder?"1px solid var(--nvb-color-neutral-300)":"none"}},...ngDevMode?[{debugName:"avatarStyle"}]:[]);initials=l(()=>{const e=String(this.model()?.nameText??"").trim();if(!e)return"U";const n=e.split(/\s+/).map(t=>t.trim()).filter(t=>t.length>0);if(!n.length)return"U";return n.slice(0,2).map(t=>t[0].toUpperCase()).join("")},...ngDevMode?[{debugName:"initials"}]:[]);onAvatarClick(e,n){n.preventDefault();n.stopPropagation();const t={value:e||this.initials(),item:null,row:null};const i=String(this.model().name??"").trim();if(i)t[i]=t["value"];this.elementActionService.runActions(this.model(),this.model().events??[],"click",t);if(!this.model().showPreview||!e)return;this.previewSrc.set(e);this.previewOpen.set(true)}closePreview(e){e?.preventDefault();e?.stopPropagation();this.previewOpen.set(false);this.previewSrc.set("")}static ɵfac=a.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:a,type:r,deps:[],target:a.ɵɵFactoryTarget.Component});static ɵcmp=a.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:r,isStandalone:true,selector:"avatar-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:a,template:"<element-wrapper [model]=\"model()\">\n  @let avatarSrc = model().src | dynamicText: model();\n  @let avatarName = model().nameText | dynamicText: model();\n\n  <div class=\"nvb-avatar-wrap\" [attr.data-testid]=\"tid('root')\">\n    <button [attr.data-testid]=\"tid('avatar')\"\n      type=\"button\"\n      class=\"nvb-avatar\"\n      [ngStyle]=\"avatarStyle()\"\n      (click)=\"onAvatarClick(avatarSrc, $event)\"\n    >\n      @if (avatarSrc) {\n        <img [src]=\"avatarSrc\" [alt]=\"avatarName\" />\n      } @else {\n        <span>{{ initials() }}</span>\n      }\n    </button>\n  </div>\n\n  @if (previewOpen()) {\n    <div [attr.data-testid]=\"tid('close-preview')\" class=\"nvb-avatar-preview\" (click)=\"closePreview()\">\n      <button [attr.data-testid]=\"tid('close')\" type=\"button\" class=\"nvb-avatar-preview__close\" (click)=\"closePreview($event)\">\n        <span class=\"material-symbols-outlined\">close</span>\n      </button>\n      <img [src]=\"previewSrc()\" [alt]=\"avatarName\" />\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-avatar-wrap{width:100%;display:flex;justify-content:flex-start;align-items:center}.nvb-avatar{border:none;padding:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;font-size:14px;line-height:1}.nvb-avatar img{width:100%;height:100%;object-fit:cover;display:block}.nvb-avatar-preview{position:fixed;inset:0;background:#000000b8;z-index:1300;display:grid;place-items:center;padding:20px}.nvb-avatar-preview img{width:min(300px,100vw - 40px);height:min(300px,100vw - 40px);object-fit:cover;border-radius:14px;box-shadow:0 16px 32px #0000004d;background:#fff}.nvb-avatar-preview__close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:none;border-radius:var(--nvb-radius-lg);background:#ffffff2e;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.nvb-avatar-preview__close span{font-size:20px}\n"],dependencies:[{kind:"component",type:s,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:d,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"pipe",type:o,name:"dynamicText"}],changeDetection:a.ChangeDetectionStrategy.OnPush})};a.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:a,type:c,decorators:[{type:g,args:[{selector:"avatar-element",changeDetection:u.OnPush,imports:[s,d,o],template:"<element-wrapper [model]=\"model()\">\n  @let avatarSrc = model().src | dynamicText: model();\n  @let avatarName = model().nameText | dynamicText: model();\n\n  <div class=\"nvb-avatar-wrap\" [attr.data-testid]=\"tid('root')\">\n    <button [attr.data-testid]=\"tid('avatar')\"\n      type=\"button\"\n      class=\"nvb-avatar\"\n      [ngStyle]=\"avatarStyle()\"\n      (click)=\"onAvatarClick(avatarSrc, $event)\"\n    >\n      @if (avatarSrc) {\n        <img [src]=\"avatarSrc\" [alt]=\"avatarName\" />\n      } @else {\n        <span>{{ initials() }}</span>\n      }\n    </button>\n  </div>\n\n  @if (previewOpen()) {\n    <div [attr.data-testid]=\"tid('close-preview')\" class=\"nvb-avatar-preview\" (click)=\"closePreview()\">\n      <button [attr.data-testid]=\"tid('close')\" type=\"button\" class=\"nvb-avatar-preview__close\" (click)=\"closePreview($event)\">\n        <span class=\"material-symbols-outlined\">close</span>\n      </button>\n      <img [src]=\"previewSrc()\" [alt]=\"avatarName\" />\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-avatar-wrap{width:100%;display:flex;justify-content:flex-start;align-items:center}.nvb-avatar{border:none;padding:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;font-size:14px;line-height:1}.nvb-avatar img{width:100%;height:100%;object-fit:cover;display:block}.nvb-avatar-preview{position:fixed;inset:0;background:#000000b8;z-index:1300;display:grid;place-items:center;padding:20px}.nvb-avatar-preview img{width:min(300px,100vw - 40px);height:min(300px,100vw - 40px);object-fit:cover;border-radius:14px;box-shadow:0 16px 32px #0000004d;background:#fff}.nvb-avatar-preview__close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:none;border-radius:var(--nvb-radius-lg);background:#ffffff2e;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.nvb-avatar-preview__close span{font-size:20px}\n"]}]}],propDecorators:{model:[{type:a.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{c as AvatarElement};
+import{t as o}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{r as v,rt as m,t as s}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs";import*as a from"@angular/core";import{ChangeDetectionStrategy as u,Component as g,computed as l,inject as b,input as f,signal as p}from"@angular/core";import{NgStyle as d}from"@angular/common";var c=class r{model=f.required(...ngDevMode?[{debugName:"model"}]:[]);tid=v(this.model,"nvb-avatar","avatar");previewOpen=p(false,...ngDevMode?[{debugName:"previewOpen"}]:[]);previewSrc=p("",...ngDevMode?[{debugName:"previewSrc"}]:[]);elementActionService=b(m);avatarStyle=l(()=>{const e=Number(this.model()?.size);const n=Number.isFinite(e)&&e>0?Math.floor(e):48;const t=String(this.model()?.shape??"circle").trim().toLowerCase();return{width:`${n}px`,height:`${n}px`,"border-radius":t==="square"?"10px":"999px","background-color":String(this.model()?.backgroundColor??"#dfe6ff").trim()||"#dfe6ff",color:String(this.model()?.textColor??"#1b2d6b").trim()||"#1b2d6b",border:this.model().showBorder?"1px solid var(--nvb-color-neutral-300)":"none"}},...ngDevMode?[{debugName:"avatarStyle"}]:[]);initials=l(()=>{const e=String(this.model()?.nameText??"").trim();if(!e)return"U";const n=e.split(/\s+/).map(t=>t.trim()).filter(t=>t.length>0);if(!n.length)return"U";return n.slice(0,2).map(t=>t[0].toUpperCase()).join("")},...ngDevMode?[{debugName:"initials"}]:[]);onAvatarClick(e,n){n.preventDefault();n.stopPropagation();const t={value:e||this.initials(),item:null,row:null};const i=String(this.model().name??"").trim();if(i)t[i]=t["value"];this.elementActionService.runActions(this.model(),this.model().events??[],"click",t);if(!this.model().showPreview||!e)return;this.previewSrc.set(e);this.previewOpen.set(true)}closePreview(e){e?.preventDefault();e?.stopPropagation();this.previewOpen.set(false);this.previewSrc.set("")}static ɵfac=a.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:a,type:r,deps:[],target:a.ɵɵFactoryTarget.Component});static ɵcmp=a.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:r,isStandalone:true,selector:"avatar-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:a,template:"<element-wrapper [model]=\"model()\">\n  @let avatarSrc = model().src | dynamicText: model();\n  @let avatarName = model().nameText | dynamicText: model();\n\n  <div class=\"nvb-avatar-wrap\" [attr.data-testid]=\"tid('root')\">\n    <button [attr.data-testid]=\"tid('avatar')\"\n      type=\"button\"\n      class=\"nvb-avatar\"\n      [ngStyle]=\"avatarStyle()\"\n      (click)=\"onAvatarClick(avatarSrc, $event)\"\n    >\n      @if (avatarSrc) {\n        <img [src]=\"avatarSrc\" [alt]=\"avatarName\" />\n      } @else {\n        <span>{{ initials() }}</span>\n      }\n    </button>\n  </div>\n\n  @if (previewOpen()) {\n    <div [attr.data-testid]=\"tid('close-preview')\" class=\"nvb-avatar-preview\" (click)=\"closePreview()\">\n      <button [attr.data-testid]=\"tid('close')\" type=\"button\" class=\"nvb-avatar-preview__close\" (click)=\"closePreview($event)\">\n        <span class=\"material-symbols-outlined\">close</span>\n      </button>\n      <img [src]=\"previewSrc()\" [alt]=\"avatarName\" />\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-avatar-wrap{width:100%;display:flex;justify-content:flex-start;align-items:center}.nvb-avatar{border:none;padding:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;font-size:14px;line-height:1}.nvb-avatar img{width:100%;height:100%;object-fit:cover;display:block}.nvb-avatar-preview{position:fixed;inset:0;background:#000000b8;z-index:1300;display:grid;place-items:center;padding:20px}.nvb-avatar-preview img{width:min(300px,100vw - 40px);height:min(300px,100vw - 40px);object-fit:cover;border-radius:14px;box-shadow:0 16px 32px #0000004d;background:#fff}.nvb-avatar-preview__close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:none;border-radius:var(--nvb-radius-lg);background:#ffffff2e;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.nvb-avatar-preview__close span{font-size:20px}\n"],dependencies:[{kind:"component",type:s,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:d,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"pipe",type:o,name:"dynamicText"}],changeDetection:a.ChangeDetectionStrategy.OnPush})};a.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:a,type:c,decorators:[{type:g,args:[{selector:"avatar-element",changeDetection:u.OnPush,imports:[s,d,o],template:"<element-wrapper [model]=\"model()\">\n  @let avatarSrc = model().src | dynamicText: model();\n  @let avatarName = model().nameText | dynamicText: model();\n\n  <div class=\"nvb-avatar-wrap\" [attr.data-testid]=\"tid('root')\">\n    <button [attr.data-testid]=\"tid('avatar')\"\n      type=\"button\"\n      class=\"nvb-avatar\"\n      [ngStyle]=\"avatarStyle()\"\n      (click)=\"onAvatarClick(avatarSrc, $event)\"\n    >\n      @if (avatarSrc) {\n        <img [src]=\"avatarSrc\" [alt]=\"avatarName\" />\n      } @else {\n        <span>{{ initials() }}</span>\n      }\n    </button>\n  </div>\n\n  @if (previewOpen()) {\n    <div [attr.data-testid]=\"tid('close-preview')\" class=\"nvb-avatar-preview\" (click)=\"closePreview()\">\n      <button [attr.data-testid]=\"tid('close')\" type=\"button\" class=\"nvb-avatar-preview__close\" (click)=\"closePreview($event)\">\n        <span class=\"material-symbols-outlined\">close</span>\n      </button>\n      <img [src]=\"previewSrc()\" [alt]=\"avatarName\" />\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-avatar-wrap{width:100%;display:flex;justify-content:flex-start;align-items:center}.nvb-avatar{border:none;padding:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;font-size:14px;line-height:1}.nvb-avatar img{width:100%;height:100%;object-fit:cover;display:block}.nvb-avatar-preview{position:fixed;inset:0;background:#000000b8;z-index:1300;display:grid;place-items:center;padding:20px}.nvb-avatar-preview img{width:min(300px,100vw - 40px);height:min(300px,100vw - 40px);object-fit:cover;border-radius:14px;box-shadow:0 16px 32px #0000004d;background:#fff}.nvb-avatar-preview__close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:none;border-radius:var(--nvb-radius-lg);background:#ffffff2e;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.nvb-avatar-preview__close span{font-size:20px}\n"]}]}],propDecorators:{model:[{type:a.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{c as AvatarElement};

package/fesm2022/{ngxviewbuilder-runtime-badge-element-C2f14QNw.mjs → ngxviewbuilder-runtime-badge-element-WdHbUp_X.mjs}

@@ -1 +1 @@
-import{t as b}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{d,t as l}from"./ngxviewbuilder-runtime-dynamic-text.pipe-DJNHX-1z.mjs";import{r as v,t as s}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.mjs";import*as o from"@angular/core";import{ChangeDetectionStrategy as m,Component as g,computed as n,inject as p,input as u}from"@angular/core";import{NgClass as c}from"@angular/common";var x=b({BadgeElement:()=>i});var i=class t{expressionService=p(d);model=u.required(...ngDevMode?[{debugName:"model"}]:[]);tid=v(this.model,"nvb-badge","badge");resolvedVariant=n(()=>this.resolveVariant(),...ngDevMode?[{debugName:"resolvedVariant"}]:[]);badgeClass=n(()=>{const e=this.resolvedVariant();const r=this.resolveSize();return{[`nvb-badge--${e}`]:true,[`nvb-badge--${r}`]:true,"nvb-badge--square":!Boolean(this.model()?.pill)}},...ngDevMode?[{debugName:"badgeClass"}]:[]);iconName=n(()=>{const e=String(this.model()?.icon??"").trim();if(e)return e;switch(this.resolvedVariant()){case"success":return"check_circle";case"warn":return"warning";case"risk":return"error";case"primary":return"bolt";case"neutral":return"radio_button_checked";default:return"info"}},...ngDevMode?[{debugName:"iconName"}]:[]);resolveVariant(){const e=this.resolveConditionalVariant()||this.resolveExpressionValue(this.model()?.variantExpression)||this.model()?.variant;const r=String(e??"info").trim().toLowerCase();if(r==="warn"||r==="warning")return"warn";if(r==="risk"||r==="danger"||r==="error")return"risk";if(r==="success"||r==="succes"||r==="completed")return"success";if(r==="neutral"||r==="archived")return"neutral";if(r==="primary"||r==="new")return"primary";if(r==="info"||r==="inprogress"||r==="in_progress"||r==="in-progress"||r==="blocked")return"info";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 r of e){const a=String(r?.condition??"").trim();if(!a)continue;if(Boolean(this.expressionService.evaluateInlineExpression(a,this.model())))return String(r?.variant??"").trim()}return""}resolveText(){const e=String(this.model()?.text??"").trim();if(e)return e;const r=String(this.model()?.label??"").trim();if(r)return r;return"Badge"}resolveSize(){const e=String(this.model()?.size??"md").trim().toLowerCase();if(e==="sm"||e==="lg")return e;return"md"}resolveExpressionValue(e){const r=String(e??"").trim();if(!r)return"";const a=this.expressionService.evaluateInlineExpression(r,this.model());return String(a??"").trim()}static ɵfac=o.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:o,type:t,deps:[],target:o.ɵɵFactoryTarget.Component});static ɵcmp=o.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:t,isStandalone:true,selector:"badge-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:o,template:"<element-wrapper [model]=\"model()\">\n  <span class=\"nvb-badge\" [ngClass]=\"badgeClass()\" [attr.data-testid]=\"tid('root')\">\n    @if (model().showIcon) {\n      <span class=\"material-symbols-outlined nvb-badge__icon\">{{ iconName() }}</span>\n    }\n    <span class=\"nvb-badge__text\">{{ resolveText() | dynamicText: model() }}</span>\n  </span>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-badge{display:inline-flex;align-items:center;gap:5px;border-radius:var(--nvb-radius-full);border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700);line-height:1.4;max-width:100%;vertical-align:middle}.nvb-badge__icon{font-size:14px;line-height:1}.nvb-badge__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.nvb-badge--sm{min-height:20px;padding:2px 7px;font-size:11px}.nvb-badge--md{min-height:24px;padding:3px 9px;font-size:12px}.nvb-badge--lg{min-height:28px;padding:4px 11px;font-size:13px}.nvb-badge--square{border-radius:var(--nvb-radius-md)}.nvb-badge--info{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 30%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-primary-500) 14%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-primary-700)}.nvb-badge--success{border-color:color-mix(in oklab,var(--nvb-color-success-500) 34%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-success-500) 14%,var(--nvb-color-surface-mix-target, white));color:color-mix(in oklab,var(--nvb-color-success-500) 75%,black)}.nvb-badge--warn,.nvb-badge--warning{border-color:color-mix(in oklab,var(--nvb-color-warning-500) 40%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-warning-500) 16%,var(--nvb-color-surface-mix-target, white));color:color-mix(in oklab,var(--nvb-color-warning-500) 78%,black)}.nvb-badge--risk,.nvb-badge--danger{border-color:color-mix(in oklab,var(--nvb-color-risk-500) 38%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-risk-500) 14%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-risk-700)}.nvb-badge--primary,.nvb-badge--new{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 36%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-primary-500) 12%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-primary-700)}\n"],dependencies:[{kind:"component",type:s,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:c,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"pipe",type:l,name:"dynamicText"}],changeDetection:o.ChangeDetectionStrategy.OnPush})};o.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:o,type:i,decorators:[{type:g,args:[{selector:"badge-element",changeDetection:m.OnPush,imports:[s,c,l],template:"<element-wrapper [model]=\"model()\">\n  <span class=\"nvb-badge\" [ngClass]=\"badgeClass()\" [attr.data-testid]=\"tid('root')\">\n    @if (model().showIcon) {\n      <span class=\"material-symbols-outlined nvb-badge__icon\">{{ iconName() }}</span>\n    }\n    <span class=\"nvb-badge__text\">{{ resolveText() | dynamicText: model() }}</span>\n  </span>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-badge{display:inline-flex;align-items:center;gap:5px;border-radius:var(--nvb-radius-full);border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700);line-height:1.4;max-width:100%;vertical-align:middle}.nvb-badge__icon{font-size:14px;line-height:1}.nvb-badge__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.nvb-badge--sm{min-height:20px;padding:2px 7px;font-size:11px}.nvb-badge--md{min-height:24px;padding:3px 9px;font-size:12px}.nvb-badge--lg{min-height:28px;padding:4px 11px;font-size:13px}.nvb-badge--square{border-radius:var(--nvb-radius-md)}.nvb-badge--info{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 30%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-primary-500) 14%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-primary-700)}.nvb-badge--success{border-color:color-mix(in oklab,var(--nvb-color-success-500) 34%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-success-500) 14%,var(--nvb-color-surface-mix-target, white));color:color-mix(in oklab,var(--nvb-color-success-500) 75%,black)}.nvb-badge--warn,.nvb-badge--warning{border-color:color-mix(in oklab,var(--nvb-color-warning-500) 40%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-warning-500) 16%,var(--nvb-color-surface-mix-target, white));color:color-mix(in oklab,var(--nvb-color-warning-500) 78%,black)}.nvb-badge--risk,.nvb-badge--danger{border-color:color-mix(in oklab,var(--nvb-color-risk-500) 38%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-risk-500) 14%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-risk-700)}.nvb-badge--primary,.nvb-badge--new{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 36%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-primary-500) 12%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-primary-700)}\n"]}]}],propDecorators:{model:[{type:o.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{x as n,i as t};
+import{t as b}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{d,t as l}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{r as v,t as s}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs";import*as o from"@angular/core";import{ChangeDetectionStrategy as m,Component as g,computed as n,inject as p,input as u}from"@angular/core";import{NgClass as c}from"@angular/common";var x=b({BadgeElement:()=>i});var i=class t{expressionService=p(d);model=u.required(...ngDevMode?[{debugName:"model"}]:[]);tid=v(this.model,"nvb-badge","badge");resolvedVariant=n(()=>this.resolveVariant(),...ngDevMode?[{debugName:"resolvedVariant"}]:[]);badgeClass=n(()=>{const e=this.resolvedVariant();const r=this.resolveSize();return{[`nvb-badge--${e}`]:true,[`nvb-badge--${r}`]:true,"nvb-badge--square":!Boolean(this.model()?.pill)}},...ngDevMode?[{debugName:"badgeClass"}]:[]);iconName=n(()=>{const e=String(this.model()?.icon??"").trim();if(e)return e;switch(this.resolvedVariant()){case"success":return"check_circle";case"warn":return"warning";case"risk":return"error";case"primary":return"bolt";case"neutral":return"radio_button_checked";default:return"info"}},...ngDevMode?[{debugName:"iconName"}]:[]);resolveVariant(){const e=this.resolveConditionalVariant()||this.resolveExpressionValue(this.model()?.variantExpression)||this.model()?.variant;const r=String(e??"info").trim().toLowerCase();if(r==="warn"||r==="warning")return"warn";if(r==="risk"||r==="danger"||r==="error")return"risk";if(r==="success"||r==="succes"||r==="completed")return"success";if(r==="neutral"||r==="archived")return"neutral";if(r==="primary"||r==="new")return"primary";if(r==="info"||r==="inprogress"||r==="in_progress"||r==="in-progress"||r==="blocked")return"info";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 r of e){const a=String(r?.condition??"").trim();if(!a)continue;if(Boolean(this.expressionService.evaluateInlineExpression(a,this.model())))return String(r?.variant??"").trim()}return""}resolveText(){const e=String(this.model()?.text??"").trim();if(e)return e;const r=String(this.model()?.label??"").trim();if(r)return r;return"Badge"}resolveSize(){const e=String(this.model()?.size??"md").trim().toLowerCase();if(e==="sm"||e==="lg")return e;return"md"}resolveExpressionValue(e){const r=String(e??"").trim();if(!r)return"";const a=this.expressionService.evaluateInlineExpression(r,this.model());return String(a??"").trim()}static ɵfac=o.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:o,type:t,deps:[],target:o.ɵɵFactoryTarget.Component});static ɵcmp=o.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:t,isStandalone:true,selector:"badge-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:o,template:"<element-wrapper [model]=\"model()\">\n  <span class=\"nvb-badge\" [ngClass]=\"badgeClass()\" [attr.data-testid]=\"tid('root')\">\n    @if (model().showIcon) {\n      <span class=\"material-symbols-outlined nvb-badge__icon\">{{ iconName() }}</span>\n    }\n    <span class=\"nvb-badge__text\">{{ resolveText() | dynamicText: model() }}</span>\n  </span>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-badge{display:inline-flex;align-items:center;gap:5px;border-radius:var(--nvb-radius-full);border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700);line-height:1.4;max-width:100%;vertical-align:middle}.nvb-badge__icon{font-size:14px;line-height:1}.nvb-badge__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.nvb-badge--sm{min-height:20px;padding:2px 7px;font-size:11px}.nvb-badge--md{min-height:24px;padding:3px 9px;font-size:12px}.nvb-badge--lg{min-height:28px;padding:4px 11px;font-size:13px}.nvb-badge--square{border-radius:var(--nvb-radius-md)}.nvb-badge--info{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 30%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-primary-500) 14%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-primary-700)}.nvb-badge--success{border-color:color-mix(in oklab,var(--nvb-color-success-500) 34%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-success-500) 14%,var(--nvb-color-surface-mix-target, white));color:color-mix(in oklab,var(--nvb-color-success-500) 75%,black)}.nvb-badge--warn,.nvb-badge--warning{border-color:color-mix(in oklab,var(--nvb-color-warning-500) 40%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-warning-500) 16%,var(--nvb-color-surface-mix-target, white));color:color-mix(in oklab,var(--nvb-color-warning-500) 78%,black)}.nvb-badge--risk,.nvb-badge--danger{border-color:color-mix(in oklab,var(--nvb-color-risk-500) 38%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-risk-500) 14%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-risk-700)}.nvb-badge--primary,.nvb-badge--new{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 36%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-primary-500) 12%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-primary-700)}\n"],dependencies:[{kind:"component",type:s,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:c,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"pipe",type:l,name:"dynamicText"}],changeDetection:o.ChangeDetectionStrategy.OnPush})};o.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:o,type:i,decorators:[{type:g,args:[{selector:"badge-element",changeDetection:m.OnPush,imports:[s,c,l],template:"<element-wrapper [model]=\"model()\">\n  <span class=\"nvb-badge\" [ngClass]=\"badgeClass()\" [attr.data-testid]=\"tid('root')\">\n    @if (model().showIcon) {\n      <span class=\"material-symbols-outlined nvb-badge__icon\">{{ iconName() }}</span>\n    }\n    <span class=\"nvb-badge__text\">{{ resolveText() | dynamicText: model() }}</span>\n  </span>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-badge{display:inline-flex;align-items:center;gap:5px;border-radius:var(--nvb-radius-full);border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700);line-height:1.4;max-width:100%;vertical-align:middle}.nvb-badge__icon{font-size:14px;line-height:1}.nvb-badge__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.nvb-badge--sm{min-height:20px;padding:2px 7px;font-size:11px}.nvb-badge--md{min-height:24px;padding:3px 9px;font-size:12px}.nvb-badge--lg{min-height:28px;padding:4px 11px;font-size:13px}.nvb-badge--square{border-radius:var(--nvb-radius-md)}.nvb-badge--info{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 30%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-primary-500) 14%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-primary-700)}.nvb-badge--success{border-color:color-mix(in oklab,var(--nvb-color-success-500) 34%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-success-500) 14%,var(--nvb-color-surface-mix-target, white));color:color-mix(in oklab,var(--nvb-color-success-500) 75%,black)}.nvb-badge--warn,.nvb-badge--warning{border-color:color-mix(in oklab,var(--nvb-color-warning-500) 40%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-warning-500) 16%,var(--nvb-color-surface-mix-target, white));color:color-mix(in oklab,var(--nvb-color-warning-500) 78%,black)}.nvb-badge--risk,.nvb-badge--danger{border-color:color-mix(in oklab,var(--nvb-color-risk-500) 38%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-risk-500) 14%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-risk-700)}.nvb-badge--primary,.nvb-badge--new{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 36%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-primary-500) 12%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-primary-700)}\n"]}]}],propDecorators:{model:[{type:o.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{x as n,i as t};

package/fesm2022/{ngxviewbuilder-runtime-breadcrumbs-element-DUD-zxsq.mjs → ngxviewbuilder-runtime-breadcrumbs-element-qlHbgWfh.mjs}

@@ -1 +1 @@
-import{on as y,t as b}from"./ngxviewbuilder-runtime-dynamic-text.pipe-DJNHX-1z.mjs";import{ht as x,o as v,r as S,rt as I,t as f}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.mjs";import*as s from"@angular/core";import{ChangeDetectionStrategy as w,Component as _,computed as h,inject as d,input as k,signal as T}from"@angular/core";import{get as C}from"lodash-es";import{filter as R}from"rxjs";import{NavigationEnd as D,Router as L}from"@angular/router";var g=class p{model=k.required(...ngDevMode?[{debugName:"model"}]:[]);tid=S(this.model,"nvb-breadcrumbs","breadcrumbs");elementActionService=d(I);markupSecurityService=d(x);uiTranslationService=d(y);router=d(L,{optional:true});routeRefresh=T(0,...ngDevMode?[{debugName:"routeRefresh"}]:[]);navigationSubscription=null;ngOnInit(){if(!this.router)return;this.navigationSubscription=this.router.events.pipe(R(t=>t instanceof D)).subscribe(()=>{this.routeRefresh.update(t=>t+1)})}ngOnDestroy(){this.navigationSubscription?.unsubscribe();this.navigationSubscription=null}renderedItems=h(()=>{this.routeRefresh();const t=this.resolveSourceItems();const e=[];if(this.model().showHome){const i=String(this.model()?.homeLabel??"").trim();e.push({label:i||this.uiTranslationService.translate("breadcrumbs.home","Home"),value:String(this.model()?.homeUrl??"/").trim()||"/"})}e.push(...t);const r=Number(this.model()?.maxItems??0);const n=Number.isFinite(r)&&r>0?Math.floor(r):0;if(n>0&&e.length>n&&n>=2)return[e[0],{label:"...",value:"",ellipsis:true},...e.slice(e.length-(n-1))];return e},...ngDevMode?[{debugName:"renderedItems"}]:[]);separatorIcon=h(()=>{return String(this.model()?.separator??"").trim()||"chevron_right"},...ngDevMode?[{debugName:"separatorIcon"}]:[]);resolveItemHref(t){return this.markupSecurityService.sanitizeNavigationUrl(String(t??""))}onItemClick(t,e,r){if(t.ellipsis){r.preventDefault();return}if(Array.isArray(this.model().events)&&this.model().events.length>0)r.preventDefault();else{const a=r.currentTarget instanceof HTMLAnchorElement?String(r.currentTarget.getAttribute("href")??"").trim():"";if(a.startsWith("/")&&this.router){r.preventDefault();this.router.navigateByUrl(a).catch(()=>{if(typeof window!=="undefined"&&typeof window.location?.assign==="function")window.location.assign(a)});return}}const n={item:t,row:t,index:e,value:t.value};const i=String(this.model().name??"").trim();if(i)n[i]=t.value;this.elementActionService.runActions(this.model(),this.model().events??[],"click",n)}resolveSourceItems(){if(this.model()?.itemsSource==="route")return this.buildRouteItems();return Array.isArray(this.model()?.items)?[...this.model().items]:[]}buildRouteItems(){const t=this.router?.routerState?.snapshot?.root??null;if(!t)return[];const e=String(this.model()?.routeLabelDataKey??"breadcrumb").trim()||"breadcrumb";const r=this.model()?.routeUsePathFallback!==false;const n=this.model()?.routeIncludeCurrent!==false;const i=this.resolveLeafSnapshot(t);const a=[];const o=[];for(const c of i.pathFromRoot){const m=c.url.map(u=>String(u?.path??"").trim()).filter(Boolean);if(m.length>0)a.push(...m);const l=this.resolveRouteItem(c,a,e,r);if(l)o.push(l)}if(!n&&o.length>0)o.pop();return o}resolveLeafSnapshot(t){let e=t;while(e.firstChild)e=e.firstChild;return e}resolveRouteItem(t,e,r,n){const i=this.resolveRouteBreadcrumbConfig(t,r);if(i?.skip)return null;const a=n?this.resolveFallbackRouteLabel(t):"";const o=this.resolveRouteTemplate(String(i?.label??a??"").trim(),t,e);if(!o)return null;const c=this.resolveRouteTemplate(String(i?.value??"").trim(),t,e);const m=e.length>0?`/${e.join("/")}`:"/";return{label:o,value:c||m}}resolveRouteBreadcrumbConfig(t,e){const r=t.data?.[e];if(r===false||r===null)return{skip:true};if(typeof r==="string"){const i=r.trim();return i?{label:i}:null}if(!r||typeof r!=="object"||Array.isArray(r))return null;const n=r;return{label:String(n["label"]??"").trim()||void 0,value:String(n["value"]??"").trim()||void 0,skip:Boolean(n["skip"])}}resolveFallbackRouteLabel(t){const e=String(t.data?.["title"]??"").trim();if(e)return e;const r=t.url.map(i=>this.humanizeSegment(String(i?.path??"").trim())).filter(Boolean).join(" / ");if(r)return r;const n=String(t.routeConfig?.path??"").trim();if(n.startsWith(":")){const i=n.slice(1).split("/")[0];const a=String(t.params?.[i]??"").trim();if(a)return a}return""}humanizeSegment(t){const e=decodeURIComponent(String(t??"").trim());if(!e)return"";return e.replace(/[-_]+/g," ").replace(/\s+/g," ").trim().replace(/\b\w/g,r=>r.toUpperCase())}resolveRouteTemplate(t,e,r){const n=String(t??"").trim();if(!n)return"";const i=r.length>0?`/${r.join("/")}`:"/";const a=String(e.params?.["id"]??e.paramMap.get("id")??"").trim()||void 0;const o={route:{id:a,url:i,params:e.params??{},queryParams:e.queryParams??{},data:e.data??{},fragment:e.fragment??"",path:String(e.routeConfig?.path??"").trim()},id:a,url:i,params:e.params??{},queryParams:e.queryParams??{},data:e.data??{}};const c=m=>{const l=String(m??"").trim();if(!l)return"";const u=C(o,l);if(u===null||u===void 0)return"";return String(u)};return n.replace(/\{\{([^}]+)\}\}/g,(m,l)=>c(l)).replace(/\{([^}]+)\}/g,(m,l)=>c(l))}static ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:s,type:p,deps:[],target:s.ɵɵFactoryTarget.Component});static ɵcmp=s.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:p,isStandalone:true,selector:"breadcrumbs-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:s,template:"<element-wrapper [model]=\"model()\">\n  <nav class=\"nvb-breadcrumbs\" aria-label=\"Breadcrumbs\" [attr.data-testid]=\"tid('root')\">\n    <ol>\n      @for (item of renderedItems(); track $index; let itemIndex = $index; let isLast = $last) {\n        <li>\n          @if (item.ellipsis) {\n            <span class=\"nvb-breadcrumbs__ellipsis\">...</span>\n          } @else if (!isLast && item.value) {\n            <a [attr.data-testid]=\"tid('link', itemIndex)\"\n              [attr.href]=\"resolveItemHref(item.value | dynamicText: model())\"\n              (click)=\"onItemClick(item, itemIndex, $event)\"\n            >\n              {{ item.label | dynamicText: model() }}\n            </a>\n          } @else {\n            <span class=\"nvb-breadcrumbs__current\">{{ item.label | dynamicText: model() }}</span>\n          }\n\n          @if (!isLast) {\n            <nvb-icon class=\"nvb-breadcrumbs__separator\" [name]=\"separatorIcon()\"></nvb-icon>\n          }\n        </li>\n      }\n    </ol>\n  </nav>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-breadcrumbs{width:100%}.nvb-breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}.nvb-breadcrumbs li{display:inline-flex;align-items:center;gap:6px;min-width:0}.nvb-breadcrumbs a,.nvb-breadcrumbs__current,.nvb-breadcrumbs__ellipsis{font-size:12px;line-height:1.3;text-decoration:none;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nvb-breadcrumbs a{color:var(--nvb-color-primary-700);cursor:pointer}.nvb-breadcrumbs a:hover{text-decoration:underline}.nvb-breadcrumbs__current{color:var(--nvb-color-neutral-700);font-weight:600}.nvb-breadcrumbs__ellipsis{color:var(--nvb-color-neutral-500)}.nvb-breadcrumbs__separator{font-size:14px;color:var(--nvb-color-neutral-500)}\n"],dependencies:[{kind:"component",type:f,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"component",type:v,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"pipe",type:b,name:"dynamicText"}],changeDetection:s.ChangeDetectionStrategy.OnPush})};s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:s,type:g,decorators:[{type:_,args:[{selector:"breadcrumbs-element",changeDetection:w.OnPush,imports:[f,b,v],template:"<element-wrapper [model]=\"model()\">\n  <nav class=\"nvb-breadcrumbs\" aria-label=\"Breadcrumbs\" [attr.data-testid]=\"tid('root')\">\n    <ol>\n      @for (item of renderedItems(); track $index; let itemIndex = $index; let isLast = $last) {\n        <li>\n          @if (item.ellipsis) {\n            <span class=\"nvb-breadcrumbs__ellipsis\">...</span>\n          } @else if (!isLast && item.value) {\n            <a [attr.data-testid]=\"tid('link', itemIndex)\"\n              [attr.href]=\"resolveItemHref(item.value | dynamicText: model())\"\n              (click)=\"onItemClick(item, itemIndex, $event)\"\n            >\n              {{ item.label | dynamicText: model() }}\n            </a>\n          } @else {\n            <span class=\"nvb-breadcrumbs__current\">{{ item.label | dynamicText: model() }}</span>\n          }\n\n          @if (!isLast) {\n            <nvb-icon class=\"nvb-breadcrumbs__separator\" [name]=\"separatorIcon()\"></nvb-icon>\n          }\n        </li>\n      }\n    </ol>\n  </nav>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-breadcrumbs{width:100%}.nvb-breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}.nvb-breadcrumbs li{display:inline-flex;align-items:center;gap:6px;min-width:0}.nvb-breadcrumbs a,.nvb-breadcrumbs__current,.nvb-breadcrumbs__ellipsis{font-size:12px;line-height:1.3;text-decoration:none;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nvb-breadcrumbs a{color:var(--nvb-color-primary-700);cursor:pointer}.nvb-breadcrumbs a:hover{text-decoration:underline}.nvb-breadcrumbs__current{color:var(--nvb-color-neutral-700);font-weight:600}.nvb-breadcrumbs__ellipsis{color:var(--nvb-color-neutral-500)}.nvb-breadcrumbs__separator{font-size:14px;color:var(--nvb-color-neutral-500)}\n"]}]}],propDecorators:{model:[{type:s.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{g as BreadcrumbsElement};
+import{sn as y,t as b}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{ht as x,o as v,r as S,rt as I,t as f}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs";import*as s from"@angular/core";import{ChangeDetectionStrategy as w,Component as _,computed as h,inject as d,input as k,signal as T}from"@angular/core";import{get as C}from"lodash-es";import{filter as R}from"rxjs";import{NavigationEnd as D,Router as L}from"@angular/router";var g=class p{model=k.required(...ngDevMode?[{debugName:"model"}]:[]);tid=S(this.model,"nvb-breadcrumbs","breadcrumbs");elementActionService=d(I);markupSecurityService=d(x);uiTranslationService=d(y);router=d(L,{optional:true});routeRefresh=T(0,...ngDevMode?[{debugName:"routeRefresh"}]:[]);navigationSubscription=null;ngOnInit(){if(!this.router)return;this.navigationSubscription=this.router.events.pipe(R(t=>t instanceof D)).subscribe(()=>{this.routeRefresh.update(t=>t+1)})}ngOnDestroy(){this.navigationSubscription?.unsubscribe();this.navigationSubscription=null}renderedItems=h(()=>{this.routeRefresh();const t=this.resolveSourceItems();const e=[];if(this.model().showHome){const i=String(this.model()?.homeLabel??"").trim();e.push({label:i||this.uiTranslationService.translate("breadcrumbs.home","Home"),value:String(this.model()?.homeUrl??"/").trim()||"/"})}e.push(...t);const r=Number(this.model()?.maxItems??0);const n=Number.isFinite(r)&&r>0?Math.floor(r):0;if(n>0&&e.length>n&&n>=2)return[e[0],{label:"...",value:"",ellipsis:true},...e.slice(e.length-(n-1))];return e},...ngDevMode?[{debugName:"renderedItems"}]:[]);separatorIcon=h(()=>{return String(this.model()?.separator??"").trim()||"chevron_right"},...ngDevMode?[{debugName:"separatorIcon"}]:[]);resolveItemHref(t){return this.markupSecurityService.sanitizeNavigationUrl(String(t??""))}onItemClick(t,e,r){if(t.ellipsis){r.preventDefault();return}if(Array.isArray(this.model().events)&&this.model().events.length>0)r.preventDefault();else{const a=r.currentTarget instanceof HTMLAnchorElement?String(r.currentTarget.getAttribute("href")??"").trim():"";if(a.startsWith("/")&&this.router){r.preventDefault();this.router.navigateByUrl(a).catch(()=>{if(typeof window!=="undefined"&&typeof window.location?.assign==="function")window.location.assign(a)});return}}const n={item:t,row:t,index:e,value:t.value};const i=String(this.model().name??"").trim();if(i)n[i]=t.value;this.elementActionService.runActions(this.model(),this.model().events??[],"click",n)}resolveSourceItems(){if(this.model()?.itemsSource==="route")return this.buildRouteItems();return Array.isArray(this.model()?.items)?[...this.model().items]:[]}buildRouteItems(){const t=this.router?.routerState?.snapshot?.root??null;if(!t)return[];const e=String(this.model()?.routeLabelDataKey??"breadcrumb").trim()||"breadcrumb";const r=this.model()?.routeUsePathFallback!==false;const n=this.model()?.routeIncludeCurrent!==false;const i=this.resolveLeafSnapshot(t);const a=[];const o=[];for(const c of i.pathFromRoot){const m=c.url.map(u=>String(u?.path??"").trim()).filter(Boolean);if(m.length>0)a.push(...m);const l=this.resolveRouteItem(c,a,e,r);if(l)o.push(l)}if(!n&&o.length>0)o.pop();return o}resolveLeafSnapshot(t){let e=t;while(e.firstChild)e=e.firstChild;return e}resolveRouteItem(t,e,r,n){const i=this.resolveRouteBreadcrumbConfig(t,r);if(i?.skip)return null;const a=n?this.resolveFallbackRouteLabel(t):"";const o=this.resolveRouteTemplate(String(i?.label??a??"").trim(),t,e);if(!o)return null;const c=this.resolveRouteTemplate(String(i?.value??"").trim(),t,e);const m=e.length>0?`/${e.join("/")}`:"/";return{label:o,value:c||m}}resolveRouteBreadcrumbConfig(t,e){const r=t.data?.[e];if(r===false||r===null)return{skip:true};if(typeof r==="string"){const i=r.trim();return i?{label:i}:null}if(!r||typeof r!=="object"||Array.isArray(r))return null;const n=r;return{label:String(n["label"]??"").trim()||void 0,value:String(n["value"]??"").trim()||void 0,skip:Boolean(n["skip"])}}resolveFallbackRouteLabel(t){const e=String(t.data?.["title"]??"").trim();if(e)return e;const r=t.url.map(i=>this.humanizeSegment(String(i?.path??"").trim())).filter(Boolean).join(" / ");if(r)return r;const n=String(t.routeConfig?.path??"").trim();if(n.startsWith(":")){const i=n.slice(1).split("/")[0];const a=String(t.params?.[i]??"").trim();if(a)return a}return""}humanizeSegment(t){const e=decodeURIComponent(String(t??"").trim());if(!e)return"";return e.replace(/[-_]+/g," ").replace(/\s+/g," ").trim().replace(/\b\w/g,r=>r.toUpperCase())}resolveRouteTemplate(t,e,r){const n=String(t??"").trim();if(!n)return"";const i=r.length>0?`/${r.join("/")}`:"/";const a=String(e.params?.["id"]??e.paramMap.get("id")??"").trim()||void 0;const o={route:{id:a,url:i,params:e.params??{},queryParams:e.queryParams??{},data:e.data??{},fragment:e.fragment??"",path:String(e.routeConfig?.path??"").trim()},id:a,url:i,params:e.params??{},queryParams:e.queryParams??{},data:e.data??{}};const c=m=>{const l=String(m??"").trim();if(!l)return"";const u=C(o,l);if(u===null||u===void 0)return"";return String(u)};return n.replace(/\{\{([^}]+)\}\}/g,(m,l)=>c(l)).replace(/\{([^}]+)\}/g,(m,l)=>c(l))}static ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:s,type:p,deps:[],target:s.ɵɵFactoryTarget.Component});static ɵcmp=s.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:p,isStandalone:true,selector:"breadcrumbs-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:s,template:"<element-wrapper [model]=\"model()\">\n  <nav class=\"nvb-breadcrumbs\" aria-label=\"Breadcrumbs\" [attr.data-testid]=\"tid('root')\">\n    <ol>\n      @for (item of renderedItems(); track $index; let itemIndex = $index; let isLast = $last) {\n        <li>\n          @if (item.ellipsis) {\n            <span class=\"nvb-breadcrumbs__ellipsis\">...</span>\n          } @else if (!isLast && item.value) {\n            <a [attr.data-testid]=\"tid('link', itemIndex)\"\n              [attr.href]=\"resolveItemHref(item.value | dynamicText: model())\"\n              (click)=\"onItemClick(item, itemIndex, $event)\"\n            >\n              {{ item.label | dynamicText: model() }}\n            </a>\n          } @else {\n            <span class=\"nvb-breadcrumbs__current\">{{ item.label | dynamicText: model() }}</span>\n          }\n\n          @if (!isLast) {\n            <nvb-icon class=\"nvb-breadcrumbs__separator\" [name]=\"separatorIcon()\"></nvb-icon>\n          }\n        </li>\n      }\n    </ol>\n  </nav>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-breadcrumbs{width:100%}.nvb-breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}.nvb-breadcrumbs li{display:inline-flex;align-items:center;gap:6px;min-width:0}.nvb-breadcrumbs a,.nvb-breadcrumbs__current,.nvb-breadcrumbs__ellipsis{font-size:12px;line-height:1.3;text-decoration:none;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nvb-breadcrumbs a{color:var(--nvb-color-primary-700);cursor:pointer}.nvb-breadcrumbs a:hover{text-decoration:underline}.nvb-breadcrumbs__current{color:var(--nvb-color-neutral-700);font-weight:600}.nvb-breadcrumbs__ellipsis{color:var(--nvb-color-neutral-500)}.nvb-breadcrumbs__separator{font-size:14px;color:var(--nvb-color-neutral-500)}\n"],dependencies:[{kind:"component",type:f,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"component",type:v,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"pipe",type:b,name:"dynamicText"}],changeDetection:s.ChangeDetectionStrategy.OnPush})};s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:s,type:g,decorators:[{type:_,args:[{selector:"breadcrumbs-element",changeDetection:w.OnPush,imports:[f,b,v],template:"<element-wrapper [model]=\"model()\">\n  <nav class=\"nvb-breadcrumbs\" aria-label=\"Breadcrumbs\" [attr.data-testid]=\"tid('root')\">\n    <ol>\n      @for (item of renderedItems(); track $index; let itemIndex = $index; let isLast = $last) {\n        <li>\n          @if (item.ellipsis) {\n            <span class=\"nvb-breadcrumbs__ellipsis\">...</span>\n          } @else if (!isLast && item.value) {\n            <a [attr.data-testid]=\"tid('link', itemIndex)\"\n              [attr.href]=\"resolveItemHref(item.value | dynamicText: model())\"\n              (click)=\"onItemClick(item, itemIndex, $event)\"\n            >\n              {{ item.label | dynamicText: model() }}\n            </a>\n          } @else {\n            <span class=\"nvb-breadcrumbs__current\">{{ item.label | dynamicText: model() }}</span>\n          }\n\n          @if (!isLast) {\n            <nvb-icon class=\"nvb-breadcrumbs__separator\" [name]=\"separatorIcon()\"></nvb-icon>\n          }\n        </li>\n      }\n    </ol>\n  </nav>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-breadcrumbs{width:100%}.nvb-breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}.nvb-breadcrumbs li{display:inline-flex;align-items:center;gap:6px;min-width:0}.nvb-breadcrumbs a,.nvb-breadcrumbs__current,.nvb-breadcrumbs__ellipsis{font-size:12px;line-height:1.3;text-decoration:none;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nvb-breadcrumbs a{color:var(--nvb-color-primary-700);cursor:pointer}.nvb-breadcrumbs a:hover{text-decoration:underline}.nvb-breadcrumbs__current{color:var(--nvb-color-neutral-700);font-weight:600}.nvb-breadcrumbs__ellipsis{color:var(--nvb-color-neutral-500)}.nvb-breadcrumbs__separator{font-size:14px;color:var(--nvb-color-neutral-500)}\n"]}]}],propDecorators:{model:[{type:s.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{g as BreadcrumbsElement};

package/fesm2022/{ngxviewbuilder-runtime-button-element-DLKWXLDr.mjs → ngxviewbuilder-runtime-button-element-BWI56rGB.mjs}

@@ -1 +1 @@
-import{t as S}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as k,g as C,t as m}from"./ngxviewbuilder-runtime-dynamic-text.pipe-DJNHX-1z.mjs";import{o as h,r as D,rt as I,t as g}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.mjs";import{t as A}from"./ngxviewbuilder-runtime-dropdown-coordinator.service-CDJcQkrB.mjs";import*as i from"@angular/core";import{ChangeDetectionStrategy as T,ChangeDetectorRef as z,Component as P,ElementRef as B,HostListener as b,ViewChild as N,computed as e,inject as a,input as O,signal as l}from"@angular/core";import{NgClass as L,NgStyle as f}from"@angular/common";var W=S({ButtonElement:()=>s});var s=class u{model=O.required(...ngDevMode?[{debugName:"model"}]:[]);tid=D(this.model,"nvb-button","button");buttonTrigger;elementActionService=a(I);dataService=a(k);eventService=a(C);cdr=a(z);elementRef=a(B);dropdownCoordinatorService=a(A);dropdownId=`button-menu-${Math.random().toString(36).slice(2,11)}`;dropdownCoordinatorSubscription=null;onPropertyChangedHandler=n=>{const o=String(this.model()?.dataPath??"").trim();if(!o)return;if(String(n?.payload?.elementNameOrPath??"").trim()!==o)return;this.cdr.markForCheck()};menuOpen=l(false,...ngDevMode?[{debugName:"menuOpen"}]:[]);menuPosition=l("bottom",...ngDevMode?[{debugName:"menuPosition"}]:[]);menuStyle=l({},...ngDevMode?[{debugName:"menuStyle"}]:[]);isMenuOpen=e(()=>this.menuOpen(),...ngDevMode?[{debugName:"isMenuOpen"}]:[]);menuActions=e(()=>{const n=this.model()?.menuActions;return Array.isArray(n)?n.filter(Boolean):[]},...ngDevMode?[{debugName:"menuActions"}]:[]);isMenuButton=e(()=>this.menuActions().length>0,...ngDevMode?[{debugName:"isMenuButton"}]:[]);buttonText=e(()=>{if(this.isIconOnly())return"";const n=String(this.model()?.text??"").trim();if(n)return n;const o=String(this.model()?.label??"").trim();if(o)return o;return"Button"},...ngDevMode?[{debugName:"buttonText"}]:[]);buttonIcon=e(()=>String(this.model()?.icon??"").trim(),...ngDevMode?[{debugName:"buttonIcon"}]:[]);badgeText=e(()=>String(this.model()?.badge??"").trim(),...ngDevMode?[{debugName:"badgeText"}]:[]);hasIcon=e(()=>this.buttonIcon().length>0,...ngDevMode?[{debugName:"hasIcon"}]:[]);hasBadge=e(()=>this.badgeText().length>0,...ngDevMode?[{debugName:"hasBadge"}]:[]);iconPosition=e(()=>{const n=String(this.model()?.iconPosition??"left").trim().toLowerCase();if(n==="right")return"right";if(n==="top")return"top";if(n==="bottom")return"bottom";return"left"},...ngDevMode?[{debugName:"iconPosition"}]:[]);buttonSize=e(()=>{const n=String(this.model()?.size??"normal").trim().toLowerCase();if(n==="small")return"small";if(n==="large")return"large";return"normal"},...ngDevMode?[{debugName:"buttonSize"}]:[]);isLoading=e(()=>Boolean(this.model()?.loading),...ngDevMode?[{debugName:"isLoading"}]:[]);isIconOnly=e(()=>{if(this.hasBadge())return false;if(Boolean(this.model()?.iconOnly)&&this.hasIcon())return true;const n=String(this.model()?.text??"").trim();const o=String(this.model()?.label??"").trim();return this.hasIcon()&&n.length===0&&o.length===0},...ngDevMode?[{debugName:"isIconOnly"}]:[]);showText=e(()=>this.buttonText().length>0,...ngDevMode?[{debugName:"showText"}]:[]);showVisual=e(()=>this.isLoading()||this.hasIcon(),...ngDevMode?[{debugName:"showVisual"}]:[]);shellClass=e(()=>this.isIconOnly()?"nvb-button-shell nvb-button-shell--compact":"nvb-button-shell",...ngDevMode?[{debugName:"shellClass"}]:[]);buttonClass=e(()=>{const n=String(this.model()?.variant??"solid").trim();const o=String(this.model()?.tone??"primary").trim().toLowerCase();const t=["nvb-button"];if(n==="outline")t.push("nvb-button--outline");else if(n==="text")t.push("nvb-button--text");else t.push("nvb-button--solid");if(this.hasIcon())t.push("nvb-button--with-icon");if(this.iconPosition()==="right")t.push("nvb-button--icon-right");else if(this.iconPosition()==="top")t.push("nvb-button--icon-top");else if(this.iconPosition()==="bottom")t.push("nvb-button--icon-bottom");else t.push("nvb-button--icon-left");if(this.isIconOnly())t.push("nvb-button--icon-only");if(this.isLoading())t.push("nvb-button--loading");if(this.hasBadge())t.push("nvb-button--with-badge");t.push(`nvb-button--tone-${o||"primary"}`);t.push(`nvb-button--size-${this.buttonSize()}`);return t.join(" ")},...ngDevMode?[{debugName:"buttonClass"}]:[]);buttonStyle=e(()=>{const n=String(this.model()?.color??"").trim();const o=String(this.model()?.textColor??"").trim();const t={};if(n)t["--nvb-button-color"]=n;if(o){t["--nvb-button-text-color"]=o;t["--nvb-button-own-text-color"]=o}return t},...ngDevMode?[{debugName:"buttonStyle"}]:[]);constructor(){this.dropdownCoordinatorSubscription=this.dropdownCoordinatorService.activeDropdownId$.subscribe(n=>{this.menuOpen.set(String(n??"").trim()===this.dropdownId)})}ngOnInit(){this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler)}ngOnDestroy(){this.dropdownCoordinatorSubscription?.unsubscribe();this.dropdownCoordinatorSubscription=null;this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler);this.closeMenu()}onButtonClick(n){n.preventDefault();n.stopPropagation();if(this.model().disabled||this.model().readOnly)return;if(this.isMenuButton()){this.toggleMenu();return}this.runButtonActions()}async onMenuActionClick(n,o){o.preventDefault();o.stopPropagation();if(this.model().disabled||this.model().readOnly)return;const t=this.buildRuntimeContext();await this.elementActionService.runAction(this.model(),n,t);this.closeMenu()}resolveMenuActionLabel(n,o){const t=String(n?.label??"").trim();if(t)return t;const r=String(n?.type??"").trim().toLowerCase();if(r==="navigate")return"Navigate";if(r==="datasource")return"Run data source";if(r==="setvalue")return"Set value";if(r==="reloadelements")return"Reload elements";if(r==="dialog")return"Dialog";if(r==="toast")return"Show toast";return`Action ${o+1}`}resolveMenuActionIcon(n){const o=String(n?.icon??"").trim();if(o)return o;const t=String(n?.type??"").trim().toLowerCase();if(t==="navigate")return"open_in_new";if(t==="datasource")return"database";if(t==="setvalue")return"edit_note";if(t==="reloadelements")return"refresh";if(t==="dialog")return"web_asset";if(t==="toast")return"notifications";return""}onDocumentPointerDown(n){if(!this.isMenuOpen())return;const o=this.elementRef.nativeElement;const t=n.target;if(o&&t&&!o.contains(t))this.closeMenu()}onDocumentEscape(){this.closeMenu()}onWindowResize(){if(!this.isMenuOpen())return;this.calculateMenuPosition()}onDocumentScroll(){if(!this.isMenuOpen())return;this.calculateMenuPosition()}async runButtonActions(){const n=this.buildRuntimeContext();await this.elementActionService.runActions(this.model(),this.model().events??[],"click",n);await this.elementActionService.runActions(this.model(),this.model().events??[],"submit",n)}buildRuntimeContext(){const n=this.ensureArray(this.dataService.getValue("__table.selectedItems"));const o=this.ensureArray(this.dataService.getValue("__table.selectedRows"));const t=this.ensureArray(this.dataService.getValue("__table.selectedKeys"));const r=Number(this.dataService.getValue("__table.selectedCount")??o.length);return{item:null,row:null,selectedItems:n,selectedRows:o,selectedKeys:t,selectedCount:Number.isFinite(r)?r:o.length,table:this.dataService.getValue("__table")??null}}ensureArray(n){return Array.isArray(n)?n:[]}toggleMenu(){if(this.isMenuOpen()){this.closeMenu();return}this.calculateMenuPosition();this.dropdownCoordinatorService.requestOpen(this.dropdownId)}closeMenu(){this.dropdownCoordinatorService.requestClose(this.dropdownId)}calculateMenuPosition(){const n=this.buttonTrigger?.nativeElement;if(typeof window==="undefined"||!n||typeof n.getBoundingClientRect!=="function"){this.menuPosition.set("bottom");this.menuStyle.set({minWidth:"180px"});return}const o=n.getBoundingClientRect();const t=8;const r=6;const x=Math.max(window.innerWidth??0,0);const c=Math.max(180,Math.round(o.width));const y=Math.max(96,this.menuActions().length*40+16);const v=window.innerHeight-o.bottom-t;const w=o.top-t;const d=v<Math.min(y,220)&&w>v;const p=t;const _=Math.max(p,x-c-t);const M=Math.min(Math.max(Math.round(o.left),p),_);this.menuPosition.set(d?"top":"bottom");this.menuStyle.set({position:"fixed",left:`${M}px`,top:`${Math.round(d?o.top-r:o.bottom+r)}px`,minWidth:`${c}px`,zIndex:"var(--nvb-floating-overlay-z-index, 1400)"})}static ɵfac=i.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:i,type:u,deps:[],target:i.ɵɵFactoryTarget.Component});static ɵcmp=i.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:u,isStandalone:true,selector:"button-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},host:{listeners:{"document:pointerdown":"onDocumentPointerDown($event)","document:keydown.escape":"onDocumentEscape()","window:resize":"onWindowResize()","document:scroll":"onDocumentScroll()"}},viewQueries:[{propertyName:"buttonTrigger",first:true,predicate:["buttonTrigger"],descendants:true}],ngImport:i,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div [class]=\"shellClass()\">\n    <button\n      #buttonTrigger\n      type=\"button\"\n      [class]=\"buttonClass()\"\n      [disabled]=\"model().disabled || model().readOnly\"\n      [attr.aria-busy]=\"isLoading()\"\n      [attr.aria-haspopup]=\"isMenuButton() ? 'menu' : null\"\n      [attr.aria-expanded]=\"isMenuButton() ? isMenuOpen() : null\"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n      [attr.aria-label]=\"\n        fieldWrapper.hasLabelText() ? null : buttonText() || model().label || model().name\n      \"\n      [attr.data-testid]=\"tid('trigger')\"\n      [ngStyle]=\"buttonStyle()\"\n      (click)=\"onButtonClick($event)\"\n    >\n      @if (showVisual()) {\n        @if (isLoading()) {\n          <span class=\"nvb-button__spinner\" aria-hidden=\"true\"></span>\n        } @else if (hasIcon()) {\n          <nvb-icon class=\"nvb-button__icon\" [name]=\"buttonIcon()\"></nvb-icon>\n        }\n      }\n      @if (showText() || hasBadge()) {\n        <span class=\"nvb-button__content\">\n          @if (showText()) {\n            <span class=\"nvb-button__text\">{{ buttonText() | dynamicText: model() }}</span>\n          }\n          @if (hasBadge()) {\n            <span class=\"nvb-button__badge\">{{ badgeText() | dynamicText: model() }}</span>\n          }\n        </span>\n      }\n    </button>\n\n    @if (isMenuButton() && isMenuOpen()) {\n      <div\n        class=\"nvb-button-menu\"\n        [class.nvb-button-menu--top]=\"menuPosition() === 'top'\"\n        [ngStyle]=\"menuStyle()\"\n        role=\"menu\"\n      >\n        @for (action of menuActions(); track action.id || action.label || $index; let i = $index) {\n          <button\n            type=\"button\"\n            class=\"nvb-button-menu__item\"\n            role=\"menuitem\"\n            [attr.aria-label]=\"resolveMenuActionLabel(action, i)\"\n            [attr.data-testid]=\"tid('menu-item', i)\"\n            (click)=\"onMenuActionClick(action, $event)\"\n          >\n            @if (resolveMenuActionIcon(action)) {\n              <nvb-icon\n                class=\"nvb-button-menu__icon\"\n                [name]=\"resolveMenuActionIcon(action)\"\n              ></nvb-icon>\n            }\n            <span>{{ resolveMenuActionLabel(action, i) }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-button-shell{position:relative;display:inline-flex;width:100%}.nvb-button-shell--compact{width:auto}.nvb-button{width:100%;min-height:var(--nvb-control-height, 40px);border-radius:var(--nvb-input-radius, var(--nvb-radius-sm));border:var(--nvb-input-border-width, 1px) solid transparent;font-size:var(--nvb-control-font-size, 14px);font-weight:600;padding:0 var(--nvb-control-padding-x, 12px);line-height:20px;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:none}.nvb-button:focus-visible{outline:none;box-shadow:var(--nvb-focus-ring, 0 0 0 1px var(--nvb-color-neutral-000), 0 0 0 3px color-mix(in oklab, var(--nvb-color-primary-400) 55%, transparent))}.nvb-button--tone-primary{--nvb-button-tone-color: var(--nvb-color-primary-600);--nvb-button-tone-border: var(--nvb-color-primary-600);--nvb-button-tone-text: var(--nvb-color-primary-700);--nvb-button-tone-surface: var(--nvb-color-primary-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-neutral{--nvb-button-tone-color: var(--nvb-color-neutral-700);--nvb-button-tone-border: var(--nvb-color-neutral-300);--nvb-button-tone-text: var(--nvb-color-neutral-700);--nvb-button-tone-surface: var(--nvb-color-neutral-100);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-success{--nvb-button-tone-color: var(--nvb-color-success-500);--nvb-button-tone-border: var(--nvb-color-success-300);--nvb-button-tone-text: var(--nvb-color-success-700);--nvb-button-tone-surface: var(--nvb-color-success-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-info{--nvb-button-tone-color: var(--nvb-color-info-500);--nvb-button-tone-border: var(--nvb-color-info-300);--nvb-button-tone-text: var(--nvb-color-info-700);--nvb-button-tone-surface: var(--nvb-color-info-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-warning{--nvb-button-tone-color: var(--nvb-color-warning-500);--nvb-button-tone-border: var(--nvb-color-warning-300);--nvb-button-tone-text: var(--nvb-color-warning-800);--nvb-button-tone-surface: var(--nvb-color-warning-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-950)}.nvb-button--tone-risk{--nvb-button-tone-color: var(--nvb-color-risk-500);--nvb-button-tone-border: var(--nvb-color-risk-300);--nvb-button-tone-text: var(--nvb-color-risk-700);--nvb-button-tone-surface: var(--nvb-color-risk-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button:disabled{cursor:not-allowed;opacity:.65}.nvb-button--solid{background-color:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)));border-color:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)));color:var(--nvb-button-own-text-color, var(--nvb-button-tone-contrast, var(--nvb-color-neutral-000)))}.nvb-button--solid:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-600))) 90%,var(--nvb-color-neutral-950));border-color:color-mix(in oklab,var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-600))) 90%,var(--nvb-color-neutral-950))}.nvb-button--outline{background-color:var(--nvb-color-neutral-000);border-color:var(--nvb-button-color, var(--nvb-button-tone-border, var(--nvb-button-tone-color, var(--nvb-color-primary-500))));color:var(--nvb-button-text-color, var(--nvb-button-color, var(--nvb-button-tone-text, var(--nvb-color-primary-700))))}.nvb-button--outline:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-button-tone-surface) 70%,var(--nvb-color-neutral-000))}.nvb-button--text{background-color:transparent;border-color:transparent;color:var(--nvb-button-text-color, var(--nvb-button-color, var(--nvb-button-tone-text, var(--nvb-color-primary-700))))}.nvb-button--text:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-button-tone-surface) 68%,var(--nvb-color-neutral-000))}.nvb-button__icon{font-size:18px;line-height:1;flex:0 0 auto}.nvb-button__content{display:inline-flex;align-items:center;justify-content:center;gap:8px}.nvb-button__text{white-space:nowrap}.nvb-button__badge{min-width:18px;height:18px;padding:0 6px;border-radius:var(--nvb-radius-full);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1}.nvb-button__spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:nvb-button-spin .7s linear infinite}.nvb-button--icon-right{flex-direction:row-reverse}.nvb-button--icon-top{flex-direction:column}.nvb-button--icon-bottom{flex-direction:column-reverse}.nvb-button--size-small{min-height:var(--nvb-control-height-sm, 32px);padding:0 max(var(--nvb-control-padding-x, 12px) - 2px,8px);font-size:13px}.nvb-button--size-small.nvb-button--icon-only{width:var(--nvb-control-height-sm, 32px);min-width:var(--nvb-control-height-sm, 32px)}.nvb-button--size-large{min-height:44px;padding:0 16px;font-size:15px}.nvb-button--size-large.nvb-button--icon-only{width:44px;min-width:44px}.nvb-button--icon-only{width:var(--nvb-control-height, 40px);min-width:var(--nvb-control-height, 40px);padding:0;justify-content:center}.nvb-button-menu{position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:180px;padding:6px;border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--nvb-radius-md)));border:1px solid var(--nvb-color-neutral-200, #d6dbe1);background:var(--nvb-color-neutral-000, #ffffff);box-shadow:var(--nvb-shadow-8);display:flex;flex-direction:column;gap:4px}.nvb-button-menu--top{transform:translateY(calc(-100% - 6px))}.nvb-button-menu__item{width:100%;min-height:36px;border:0;border-radius:var(--nvb-radius-sm);background:transparent;color:var(--nvb-color-neutral-800, #1f2937);display:inline-flex;align-items:center;gap:8px;padding:8px 10px;text-align:left;cursor:pointer}.nvb-button-menu__item:hover{background:var(--nvb-color-neutral-100, #f3f4f6)}.nvb-button-menu__icon{flex:0 0 auto}.nvb-button--solid .nvb-button__badge{background:var(--nvb-color-neutral-000);color:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)))}.nvb-button--outline .nvb-button__badge,.nvb-button--text .nvb-button__badge{background:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)));color:var(--nvb-color-neutral-000)}@keyframes nvb-button-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"],dependencies:[{kind:"component",type:g,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:f,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"component",type:h,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"pipe",type:m,name:"dynamicText"}],changeDetection:i.ChangeDetectionStrategy.OnPush})};i.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:i,type:s,decorators:[{type:P,args:[{selector:"button-element",changeDetection:T.OnPush,imports:[g,L,f,m,h],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div [class]=\"shellClass()\">\n    <button\n      #buttonTrigger\n      type=\"button\"\n      [class]=\"buttonClass()\"\n      [disabled]=\"model().disabled || model().readOnly\"\n      [attr.aria-busy]=\"isLoading()\"\n      [attr.aria-haspopup]=\"isMenuButton() ? 'menu' : null\"\n      [attr.aria-expanded]=\"isMenuButton() ? isMenuOpen() : null\"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n      [attr.aria-label]=\"\n        fieldWrapper.hasLabelText() ? null : buttonText() || model().label || model().name\n      \"\n      [attr.data-testid]=\"tid('trigger')\"\n      [ngStyle]=\"buttonStyle()\"\n      (click)=\"onButtonClick($event)\"\n    >\n      @if (showVisual()) {\n        @if (isLoading()) {\n          <span class=\"nvb-button__spinner\" aria-hidden=\"true\"></span>\n        } @else if (hasIcon()) {\n          <nvb-icon class=\"nvb-button__icon\" [name]=\"buttonIcon()\"></nvb-icon>\n        }\n      }\n      @if (showText() || hasBadge()) {\n        <span class=\"nvb-button__content\">\n          @if (showText()) {\n            <span class=\"nvb-button__text\">{{ buttonText() | dynamicText: model() }}</span>\n          }\n          @if (hasBadge()) {\n            <span class=\"nvb-button__badge\">{{ badgeText() | dynamicText: model() }}</span>\n          }\n        </span>\n      }\n    </button>\n\n    @if (isMenuButton() && isMenuOpen()) {\n      <div\n        class=\"nvb-button-menu\"\n        [class.nvb-button-menu--top]=\"menuPosition() === 'top'\"\n        [ngStyle]=\"menuStyle()\"\n        role=\"menu\"\n      >\n        @for (action of menuActions(); track action.id || action.label || $index; let i = $index) {\n          <button\n            type=\"button\"\n            class=\"nvb-button-menu__item\"\n            role=\"menuitem\"\n            [attr.aria-label]=\"resolveMenuActionLabel(action, i)\"\n            [attr.data-testid]=\"tid('menu-item', i)\"\n            (click)=\"onMenuActionClick(action, $event)\"\n          >\n            @if (resolveMenuActionIcon(action)) {\n              <nvb-icon\n                class=\"nvb-button-menu__icon\"\n                [name]=\"resolveMenuActionIcon(action)\"\n              ></nvb-icon>\n            }\n            <span>{{ resolveMenuActionLabel(action, i) }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-button-shell{position:relative;display:inline-flex;width:100%}.nvb-button-shell--compact{width:auto}.nvb-button{width:100%;min-height:var(--nvb-control-height, 40px);border-radius:var(--nvb-input-radius, var(--nvb-radius-sm));border:var(--nvb-input-border-width, 1px) solid transparent;font-size:var(--nvb-control-font-size, 14px);font-weight:600;padding:0 var(--nvb-control-padding-x, 12px);line-height:20px;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:none}.nvb-button:focus-visible{outline:none;box-shadow:var(--nvb-focus-ring, 0 0 0 1px var(--nvb-color-neutral-000), 0 0 0 3px color-mix(in oklab, var(--nvb-color-primary-400) 55%, transparent))}.nvb-button--tone-primary{--nvb-button-tone-color: var(--nvb-color-primary-600);--nvb-button-tone-border: var(--nvb-color-primary-600);--nvb-button-tone-text: var(--nvb-color-primary-700);--nvb-button-tone-surface: var(--nvb-color-primary-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-neutral{--nvb-button-tone-color: var(--nvb-color-neutral-700);--nvb-button-tone-border: var(--nvb-color-neutral-300);--nvb-button-tone-text: var(--nvb-color-neutral-700);--nvb-button-tone-surface: var(--nvb-color-neutral-100);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-success{--nvb-button-tone-color: var(--nvb-color-success-500);--nvb-button-tone-border: var(--nvb-color-success-300);--nvb-button-tone-text: var(--nvb-color-success-700);--nvb-button-tone-surface: var(--nvb-color-success-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-info{--nvb-button-tone-color: var(--nvb-color-info-500);--nvb-button-tone-border: var(--nvb-color-info-300);--nvb-button-tone-text: var(--nvb-color-info-700);--nvb-button-tone-surface: var(--nvb-color-info-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-warning{--nvb-button-tone-color: var(--nvb-color-warning-500);--nvb-button-tone-border: var(--nvb-color-warning-300);--nvb-button-tone-text: var(--nvb-color-warning-800);--nvb-button-tone-surface: var(--nvb-color-warning-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-950)}.nvb-button--tone-risk{--nvb-button-tone-color: var(--nvb-color-risk-500);--nvb-button-tone-border: var(--nvb-color-risk-300);--nvb-button-tone-text: var(--nvb-color-risk-700);--nvb-button-tone-surface: var(--nvb-color-risk-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button:disabled{cursor:not-allowed;opacity:.65}.nvb-button--solid{background-color:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)));border-color:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)));color:var(--nvb-button-own-text-color, var(--nvb-button-tone-contrast, var(--nvb-color-neutral-000)))}.nvb-button--solid:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-600))) 90%,var(--nvb-color-neutral-950));border-color:color-mix(in oklab,var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-600))) 90%,var(--nvb-color-neutral-950))}.nvb-button--outline{background-color:var(--nvb-color-neutral-000);border-color:var(--nvb-button-color, var(--nvb-button-tone-border, var(--nvb-button-tone-color, var(--nvb-color-primary-500))));color:var(--nvb-button-text-color, var(--nvb-button-color, var(--nvb-button-tone-text, var(--nvb-color-primary-700))))}.nvb-button--outline:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-button-tone-surface) 70%,var(--nvb-color-neutral-000))}.nvb-button--text{background-color:transparent;border-color:transparent;color:var(--nvb-button-text-color, var(--nvb-button-color, var(--nvb-button-tone-text, var(--nvb-color-primary-700))))}.nvb-button--text:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-button-tone-surface) 68%,var(--nvb-color-neutral-000))}.nvb-button__icon{font-size:18px;line-height:1;flex:0 0 auto}.nvb-button__content{display:inline-flex;align-items:center;justify-content:center;gap:8px}.nvb-button__text{white-space:nowrap}.nvb-button__badge{min-width:18px;height:18px;padding:0 6px;border-radius:var(--nvb-radius-full);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1}.nvb-button__spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:nvb-button-spin .7s linear infinite}.nvb-button--icon-right{flex-direction:row-reverse}.nvb-button--icon-top{flex-direction:column}.nvb-button--icon-bottom{flex-direction:column-reverse}.nvb-button--size-small{min-height:var(--nvb-control-height-sm, 32px);padding:0 max(var(--nvb-control-padding-x, 12px) - 2px,8px);font-size:13px}.nvb-button--size-small.nvb-button--icon-only{width:var(--nvb-control-height-sm, 32px);min-width:var(--nvb-control-height-sm, 32px)}.nvb-button--size-large{min-height:44px;padding:0 16px;font-size:15px}.nvb-button--size-large.nvb-button--icon-only{width:44px;min-width:44px}.nvb-button--icon-only{width:var(--nvb-control-height, 40px);min-width:var(--nvb-control-height, 40px);padding:0;justify-content:center}.nvb-button-menu{position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:180px;padding:6px;border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--nvb-radius-md)));border:1px solid var(--nvb-color-neutral-200, #d6dbe1);background:var(--nvb-color-neutral-000, #ffffff);box-shadow:var(--nvb-shadow-8);display:flex;flex-direction:column;gap:4px}.nvb-button-menu--top{transform:translateY(calc(-100% - 6px))}.nvb-button-menu__item{width:100%;min-height:36px;border:0;border-radius:var(--nvb-radius-sm);background:transparent;color:var(--nvb-color-neutral-800, #1f2937);display:inline-flex;align-items:center;gap:8px;padding:8px 10px;text-align:left;cursor:pointer}.nvb-button-menu__item:hover{background:var(--nvb-color-neutral-100, #f3f4f6)}.nvb-button-menu__icon{flex:0 0 auto}.nvb-button--solid .nvb-button__badge{background:var(--nvb-color-neutral-000);color:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)))}.nvb-button--outline .nvb-button__badge,.nvb-button--text .nvb-button__badge{background:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)));color:var(--nvb-color-neutral-000)}@keyframes nvb-button-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]}]}],ctorParameters:()=>[],propDecorators:{model:[{type:i.Input,args:[{isSignal:true,alias:"model",required:true}]}],buttonTrigger:[{type:N,args:["buttonTrigger"]}],onDocumentPointerDown:[{type:b,args:["document:pointerdown",["$event"]]}],onDocumentEscape:[{type:b,args:["document:keydown.escape"]}],onWindowResize:[{type:b,args:["window:resize"]}],onDocumentScroll:[{type:b,args:["document:scroll"]}]}});export{W as n,s as t};
+import{t as S}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{g as k,on as C,t as m}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{o as h,r as D,rt as I,t as g}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs";import{t as A}from"./ngxviewbuilder-runtime-dropdown-coordinator.service-CDJcQkrB.mjs";import*as i from"@angular/core";import{ChangeDetectionStrategy as T,ChangeDetectorRef as z,Component as P,ElementRef as B,HostListener as b,ViewChild as N,computed as e,inject as a,input as O,signal as l}from"@angular/core";import{NgClass as L,NgStyle as f}from"@angular/common";var W=S({ButtonElement:()=>s});var s=class u{model=O.required(...ngDevMode?[{debugName:"model"}]:[]);tid=D(this.model,"nvb-button","button");buttonTrigger;elementActionService=a(I);dataService=a(C);eventService=a(k);cdr=a(z);elementRef=a(B);dropdownCoordinatorService=a(A);dropdownId=`button-menu-${Math.random().toString(36).slice(2,11)}`;dropdownCoordinatorSubscription=null;onPropertyChangedHandler=n=>{const o=String(this.model()?.dataPath??"").trim();if(!o)return;if(String(n?.payload?.elementNameOrPath??"").trim()!==o)return;this.cdr.markForCheck()};menuOpen=l(false,...ngDevMode?[{debugName:"menuOpen"}]:[]);menuPosition=l("bottom",...ngDevMode?[{debugName:"menuPosition"}]:[]);menuStyle=l({},...ngDevMode?[{debugName:"menuStyle"}]:[]);isMenuOpen=e(()=>this.menuOpen(),...ngDevMode?[{debugName:"isMenuOpen"}]:[]);menuActions=e(()=>{const n=this.model()?.menuActions;return Array.isArray(n)?n.filter(Boolean):[]},...ngDevMode?[{debugName:"menuActions"}]:[]);isMenuButton=e(()=>this.menuActions().length>0,...ngDevMode?[{debugName:"isMenuButton"}]:[]);buttonText=e(()=>{if(this.isIconOnly())return"";const n=String(this.model()?.text??"").trim();if(n)return n;const o=String(this.model()?.label??"").trim();if(o)return o;return"Button"},...ngDevMode?[{debugName:"buttonText"}]:[]);buttonIcon=e(()=>String(this.model()?.icon??"").trim(),...ngDevMode?[{debugName:"buttonIcon"}]:[]);badgeText=e(()=>String(this.model()?.badge??"").trim(),...ngDevMode?[{debugName:"badgeText"}]:[]);hasIcon=e(()=>this.buttonIcon().length>0,...ngDevMode?[{debugName:"hasIcon"}]:[]);hasBadge=e(()=>this.badgeText().length>0,...ngDevMode?[{debugName:"hasBadge"}]:[]);iconPosition=e(()=>{const n=String(this.model()?.iconPosition??"left").trim().toLowerCase();if(n==="right")return"right";if(n==="top")return"top";if(n==="bottom")return"bottom";return"left"},...ngDevMode?[{debugName:"iconPosition"}]:[]);buttonSize=e(()=>{const n=String(this.model()?.size??"normal").trim().toLowerCase();if(n==="small")return"small";if(n==="large")return"large";return"normal"},...ngDevMode?[{debugName:"buttonSize"}]:[]);isLoading=e(()=>Boolean(this.model()?.loading),...ngDevMode?[{debugName:"isLoading"}]:[]);isIconOnly=e(()=>{if(this.hasBadge())return false;if(Boolean(this.model()?.iconOnly)&&this.hasIcon())return true;const n=String(this.model()?.text??"").trim();const o=String(this.model()?.label??"").trim();return this.hasIcon()&&n.length===0&&o.length===0},...ngDevMode?[{debugName:"isIconOnly"}]:[]);showText=e(()=>this.buttonText().length>0,...ngDevMode?[{debugName:"showText"}]:[]);showVisual=e(()=>this.isLoading()||this.hasIcon(),...ngDevMode?[{debugName:"showVisual"}]:[]);shellClass=e(()=>this.isIconOnly()?"nvb-button-shell nvb-button-shell--compact":"nvb-button-shell",...ngDevMode?[{debugName:"shellClass"}]:[]);buttonClass=e(()=>{const n=String(this.model()?.variant??"solid").trim();const o=String(this.model()?.tone??"primary").trim().toLowerCase();const t=["nvb-button"];if(n==="outline")t.push("nvb-button--outline");else if(n==="text")t.push("nvb-button--text");else t.push("nvb-button--solid");if(this.hasIcon())t.push("nvb-button--with-icon");if(this.iconPosition()==="right")t.push("nvb-button--icon-right");else if(this.iconPosition()==="top")t.push("nvb-button--icon-top");else if(this.iconPosition()==="bottom")t.push("nvb-button--icon-bottom");else t.push("nvb-button--icon-left");if(this.isIconOnly())t.push("nvb-button--icon-only");if(this.isLoading())t.push("nvb-button--loading");if(this.hasBadge())t.push("nvb-button--with-badge");t.push(`nvb-button--tone-${o||"primary"}`);t.push(`nvb-button--size-${this.buttonSize()}`);return t.join(" ")},...ngDevMode?[{debugName:"buttonClass"}]:[]);buttonStyle=e(()=>{const n=String(this.model()?.color??"").trim();const o=String(this.model()?.textColor??"").trim();const t={};if(n)t["--nvb-button-color"]=n;if(o){t["--nvb-button-text-color"]=o;t["--nvb-button-own-text-color"]=o}return t},...ngDevMode?[{debugName:"buttonStyle"}]:[]);constructor(){this.dropdownCoordinatorSubscription=this.dropdownCoordinatorService.activeDropdownId$.subscribe(n=>{this.menuOpen.set(String(n??"").trim()===this.dropdownId)})}ngOnInit(){this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler)}ngOnDestroy(){this.dropdownCoordinatorSubscription?.unsubscribe();this.dropdownCoordinatorSubscription=null;this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler);this.closeMenu()}onButtonClick(n){n.preventDefault();n.stopPropagation();if(this.model().disabled||this.model().readOnly)return;if(this.isMenuButton()){this.toggleMenu();return}this.runButtonActions()}async onMenuActionClick(n,o){o.preventDefault();o.stopPropagation();if(this.model().disabled||this.model().readOnly)return;const t=this.buildRuntimeContext();await this.elementActionService.runAction(this.model(),n,t);this.closeMenu()}resolveMenuActionLabel(n,o){const t=String(n?.label??"").trim();if(t)return t;const r=String(n?.type??"").trim().toLowerCase();if(r==="navigate")return"Navigate";if(r==="datasource")return"Run data source";if(r==="setvalue")return"Set value";if(r==="reloadelements")return"Reload elements";if(r==="dialog")return"Dialog";if(r==="toast")return"Show toast";return`Action ${o+1}`}resolveMenuActionIcon(n){const o=String(n?.icon??"").trim();if(o)return o;const t=String(n?.type??"").trim().toLowerCase();if(t==="navigate")return"open_in_new";if(t==="datasource")return"database";if(t==="setvalue")return"edit_note";if(t==="reloadelements")return"refresh";if(t==="dialog")return"web_asset";if(t==="toast")return"notifications";return""}onDocumentPointerDown(n){if(!this.isMenuOpen())return;const o=this.elementRef.nativeElement;const t=n.target;if(o&&t&&!o.contains(t))this.closeMenu()}onDocumentEscape(){this.closeMenu()}onWindowResize(){if(!this.isMenuOpen())return;this.calculateMenuPosition()}onDocumentScroll(){if(!this.isMenuOpen())return;this.calculateMenuPosition()}async runButtonActions(){const n=this.buildRuntimeContext();await this.elementActionService.runActions(this.model(),this.model().events??[],"click",n);await this.elementActionService.runActions(this.model(),this.model().events??[],"submit",n)}buildRuntimeContext(){const n=this.ensureArray(this.dataService.getValue("__table.selectedItems"));const o=this.ensureArray(this.dataService.getValue("__table.selectedRows"));const t=this.ensureArray(this.dataService.getValue("__table.selectedKeys"));const r=Number(this.dataService.getValue("__table.selectedCount")??o.length);return{item:null,row:null,selectedItems:n,selectedRows:o,selectedKeys:t,selectedCount:Number.isFinite(r)?r:o.length,table:this.dataService.getValue("__table")??null}}ensureArray(n){return Array.isArray(n)?n:[]}toggleMenu(){if(this.isMenuOpen()){this.closeMenu();return}this.calculateMenuPosition();this.dropdownCoordinatorService.requestOpen(this.dropdownId)}closeMenu(){this.dropdownCoordinatorService.requestClose(this.dropdownId)}calculateMenuPosition(){const n=this.buttonTrigger?.nativeElement;if(typeof window==="undefined"||!n||typeof n.getBoundingClientRect!=="function"){this.menuPosition.set("bottom");this.menuStyle.set({minWidth:"180px"});return}const o=n.getBoundingClientRect();const t=8;const r=6;const x=Math.max(window.innerWidth??0,0);const c=Math.max(180,Math.round(o.width));const y=Math.max(96,this.menuActions().length*40+16);const v=window.innerHeight-o.bottom-t;const w=o.top-t;const d=v<Math.min(y,220)&&w>v;const p=t;const _=Math.max(p,x-c-t);const M=Math.min(Math.max(Math.round(o.left),p),_);this.menuPosition.set(d?"top":"bottom");this.menuStyle.set({position:"fixed",left:`${M}px`,top:`${Math.round(d?o.top-r:o.bottom+r)}px`,minWidth:`${c}px`,zIndex:"var(--nvb-floating-overlay-z-index, 1400)"})}static ɵfac=i.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:i,type:u,deps:[],target:i.ɵɵFactoryTarget.Component});static ɵcmp=i.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:u,isStandalone:true,selector:"button-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},host:{listeners:{"document:pointerdown":"onDocumentPointerDown($event)","document:keydown.escape":"onDocumentEscape()","window:resize":"onWindowResize()","document:scroll":"onDocumentScroll()"}},viewQueries:[{propertyName:"buttonTrigger",first:true,predicate:["buttonTrigger"],descendants:true}],ngImport:i,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div [class]=\"shellClass()\">\n    <button\n      #buttonTrigger\n      type=\"button\"\n      [class]=\"buttonClass()\"\n      [disabled]=\"model().disabled || model().readOnly\"\n      [attr.aria-busy]=\"isLoading()\"\n      [attr.aria-haspopup]=\"isMenuButton() ? 'menu' : null\"\n      [attr.aria-expanded]=\"isMenuButton() ? isMenuOpen() : null\"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n      [attr.aria-label]=\"\n        fieldWrapper.hasLabelText() ? null : buttonText() || model().label || model().name\n      \"\n      [attr.data-testid]=\"tid('trigger')\"\n      [ngStyle]=\"buttonStyle()\"\n      (click)=\"onButtonClick($event)\"\n    >\n      @if (showVisual()) {\n        @if (isLoading()) {\n          <span class=\"nvb-button__spinner\" aria-hidden=\"true\"></span>\n        } @else if (hasIcon()) {\n          <nvb-icon class=\"nvb-button__icon\" [name]=\"buttonIcon()\"></nvb-icon>\n        }\n      }\n      @if (showText() || hasBadge()) {\n        <span class=\"nvb-button__content\">\n          @if (showText()) {\n            <span class=\"nvb-button__text\">{{ buttonText() | dynamicText: model() }}</span>\n          }\n          @if (hasBadge()) {\n            <span class=\"nvb-button__badge\">{{ badgeText() | dynamicText: model() }}</span>\n          }\n        </span>\n      }\n    </button>\n\n    @if (isMenuButton() && isMenuOpen()) {\n      <div\n        class=\"nvb-button-menu\"\n        [class.nvb-button-menu--top]=\"menuPosition() === 'top'\"\n        [ngStyle]=\"menuStyle()\"\n        role=\"menu\"\n      >\n        @for (action of menuActions(); track action.id || action.label || $index; let i = $index) {\n          <button\n            type=\"button\"\n            class=\"nvb-button-menu__item\"\n            role=\"menuitem\"\n            [attr.aria-label]=\"resolveMenuActionLabel(action, i)\"\n            [attr.data-testid]=\"tid('menu-item', i)\"\n            (click)=\"onMenuActionClick(action, $event)\"\n          >\n            @if (resolveMenuActionIcon(action)) {\n              <nvb-icon\n                class=\"nvb-button-menu__icon\"\n                [name]=\"resolveMenuActionIcon(action)\"\n              ></nvb-icon>\n            }\n            <span>{{ resolveMenuActionLabel(action, i) }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-button-shell{position:relative;display:inline-flex;width:100%}.nvb-button-shell--compact{width:auto}.nvb-button{width:100%;min-height:var(--nvb-control-height, 40px);border-radius:var(--nvb-input-radius, var(--nvb-radius-sm));border:var(--nvb-input-border-width, 1px) solid transparent;font-size:var(--nvb-control-font-size, 14px);font-weight:600;padding:0 var(--nvb-control-padding-x, 12px);line-height:20px;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:none}.nvb-button:focus-visible{outline:none;box-shadow:var(--nvb-focus-ring, 0 0 0 1px var(--nvb-color-neutral-000), 0 0 0 3px color-mix(in oklab, var(--nvb-color-primary-400) 55%, transparent))}.nvb-button--tone-primary{--nvb-button-tone-color: var(--nvb-color-primary-600);--nvb-button-tone-border: var(--nvb-color-primary-600);--nvb-button-tone-text: var(--nvb-color-primary-700);--nvb-button-tone-surface: var(--nvb-color-primary-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-neutral{--nvb-button-tone-color: var(--nvb-color-neutral-700);--nvb-button-tone-border: var(--nvb-color-neutral-300);--nvb-button-tone-text: var(--nvb-color-neutral-700);--nvb-button-tone-surface: var(--nvb-color-neutral-100);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-success{--nvb-button-tone-color: var(--nvb-color-success-500);--nvb-button-tone-border: var(--nvb-color-success-300);--nvb-button-tone-text: var(--nvb-color-success-700);--nvb-button-tone-surface: var(--nvb-color-success-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-info{--nvb-button-tone-color: var(--nvb-color-info-500);--nvb-button-tone-border: var(--nvb-color-info-300);--nvb-button-tone-text: var(--nvb-color-info-700);--nvb-button-tone-surface: var(--nvb-color-info-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-warning{--nvb-button-tone-color: var(--nvb-color-warning-500);--nvb-button-tone-border: var(--nvb-color-warning-300);--nvb-button-tone-text: var(--nvb-color-warning-800);--nvb-button-tone-surface: var(--nvb-color-warning-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-950)}.nvb-button--tone-risk{--nvb-button-tone-color: var(--nvb-color-risk-500);--nvb-button-tone-border: var(--nvb-color-risk-300);--nvb-button-tone-text: var(--nvb-color-risk-700);--nvb-button-tone-surface: var(--nvb-color-risk-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button:disabled{cursor:not-allowed;opacity:.65}.nvb-button--solid{background-color:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)));border-color:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)));color:var(--nvb-button-own-text-color, var(--nvb-button-tone-contrast, var(--nvb-color-neutral-000)))}.nvb-button--solid:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-600))) 90%,var(--nvb-color-neutral-950));border-color:color-mix(in oklab,var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-600))) 90%,var(--nvb-color-neutral-950))}.nvb-button--outline{background-color:var(--nvb-color-neutral-000);border-color:var(--nvb-button-color, var(--nvb-button-tone-border, var(--nvb-button-tone-color, var(--nvb-color-primary-500))));color:var(--nvb-button-text-color, var(--nvb-button-color, var(--nvb-button-tone-text, var(--nvb-color-primary-700))))}.nvb-button--outline:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-button-tone-surface) 70%,var(--nvb-color-neutral-000))}.nvb-button--text{background-color:transparent;border-color:transparent;color:var(--nvb-button-text-color, var(--nvb-button-color, var(--nvb-button-tone-text, var(--nvb-color-primary-700))))}.nvb-button--text:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-button-tone-surface) 68%,var(--nvb-color-neutral-000))}.nvb-button__icon{font-size:18px;line-height:1;flex:0 0 auto}.nvb-button__content{display:inline-flex;align-items:center;justify-content:center;gap:8px}.nvb-button__text{white-space:nowrap}.nvb-button__badge{min-width:18px;height:18px;padding:0 6px;border-radius:var(--nvb-radius-full);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1}.nvb-button__spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:nvb-button-spin .7s linear infinite}.nvb-button--icon-right{flex-direction:row-reverse}.nvb-button--icon-top{flex-direction:column}.nvb-button--icon-bottom{flex-direction:column-reverse}.nvb-button--size-small{min-height:var(--nvb-control-height-sm, 32px);padding:0 max(var(--nvb-control-padding-x, 12px) - 2px,8px);font-size:13px}.nvb-button--size-small.nvb-button--icon-only{width:var(--nvb-control-height-sm, 32px);min-width:var(--nvb-control-height-sm, 32px)}.nvb-button--size-large{min-height:44px;padding:0 16px;font-size:15px}.nvb-button--size-large.nvb-button--icon-only{width:44px;min-width:44px}.nvb-button--icon-only{width:var(--nvb-control-height, 40px);min-width:var(--nvb-control-height, 40px);padding:0;justify-content:center}.nvb-button-menu{position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:180px;padding:6px;border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--nvb-radius-md)));border:1px solid var(--nvb-color-neutral-200, #d6dbe1);background:var(--nvb-color-neutral-000, #ffffff);box-shadow:var(--nvb-shadow-8);display:flex;flex-direction:column;gap:4px}.nvb-button-menu--top{transform:translateY(calc(-100% - 6px))}.nvb-button-menu__item{width:100%;min-height:36px;border:0;border-radius:var(--nvb-radius-sm);background:transparent;color:var(--nvb-color-neutral-800, #1f2937);display:inline-flex;align-items:center;gap:8px;padding:8px 10px;text-align:left;cursor:pointer}.nvb-button-menu__item:hover{background:var(--nvb-color-neutral-100, #f3f4f6)}.nvb-button-menu__icon{flex:0 0 auto}.nvb-button--solid .nvb-button__badge{background:var(--nvb-color-neutral-000);color:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)))}.nvb-button--outline .nvb-button__badge,.nvb-button--text .nvb-button__badge{background:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)));color:var(--nvb-color-neutral-000)}@keyframes nvb-button-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"],dependencies:[{kind:"component",type:g,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:f,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"component",type:h,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"pipe",type:m,name:"dynamicText"}],changeDetection:i.ChangeDetectionStrategy.OnPush})};i.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:i,type:s,decorators:[{type:P,args:[{selector:"button-element",changeDetection:T.OnPush,imports:[g,L,f,m,h],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div [class]=\"shellClass()\">\n    <button\n      #buttonTrigger\n      type=\"button\"\n      [class]=\"buttonClass()\"\n      [disabled]=\"model().disabled || model().readOnly\"\n      [attr.aria-busy]=\"isLoading()\"\n      [attr.aria-haspopup]=\"isMenuButton() ? 'menu' : null\"\n      [attr.aria-expanded]=\"isMenuButton() ? isMenuOpen() : null\"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n      [attr.aria-label]=\"\n        fieldWrapper.hasLabelText() ? null : buttonText() || model().label || model().name\n      \"\n      [attr.data-testid]=\"tid('trigger')\"\n      [ngStyle]=\"buttonStyle()\"\n      (click)=\"onButtonClick($event)\"\n    >\n      @if (showVisual()) {\n        @if (isLoading()) {\n          <span class=\"nvb-button__spinner\" aria-hidden=\"true\"></span>\n        } @else if (hasIcon()) {\n          <nvb-icon class=\"nvb-button__icon\" [name]=\"buttonIcon()\"></nvb-icon>\n        }\n      }\n      @if (showText() || hasBadge()) {\n        <span class=\"nvb-button__content\">\n          @if (showText()) {\n            <span class=\"nvb-button__text\">{{ buttonText() | dynamicText: model() }}</span>\n          }\n          @if (hasBadge()) {\n            <span class=\"nvb-button__badge\">{{ badgeText() | dynamicText: model() }}</span>\n          }\n        </span>\n      }\n    </button>\n\n    @if (isMenuButton() && isMenuOpen()) {\n      <div\n        class=\"nvb-button-menu\"\n        [class.nvb-button-menu--top]=\"menuPosition() === 'top'\"\n        [ngStyle]=\"menuStyle()\"\n        role=\"menu\"\n      >\n        @for (action of menuActions(); track action.id || action.label || $index; let i = $index) {\n          <button\n            type=\"button\"\n            class=\"nvb-button-menu__item\"\n            role=\"menuitem\"\n            [attr.aria-label]=\"resolveMenuActionLabel(action, i)\"\n            [attr.data-testid]=\"tid('menu-item', i)\"\n            (click)=\"onMenuActionClick(action, $event)\"\n          >\n            @if (resolveMenuActionIcon(action)) {\n              <nvb-icon\n                class=\"nvb-button-menu__icon\"\n                [name]=\"resolveMenuActionIcon(action)\"\n              ></nvb-icon>\n            }\n            <span>{{ resolveMenuActionLabel(action, i) }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-button-shell{position:relative;display:inline-flex;width:100%}.nvb-button-shell--compact{width:auto}.nvb-button{width:100%;min-height:var(--nvb-control-height, 40px);border-radius:var(--nvb-input-radius, var(--nvb-radius-sm));border:var(--nvb-input-border-width, 1px) solid transparent;font-size:var(--nvb-control-font-size, 14px);font-weight:600;padding:0 var(--nvb-control-padding-x, 12px);line-height:20px;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:none}.nvb-button:focus-visible{outline:none;box-shadow:var(--nvb-focus-ring, 0 0 0 1px var(--nvb-color-neutral-000), 0 0 0 3px color-mix(in oklab, var(--nvb-color-primary-400) 55%, transparent))}.nvb-button--tone-primary{--nvb-button-tone-color: var(--nvb-color-primary-600);--nvb-button-tone-border: var(--nvb-color-primary-600);--nvb-button-tone-text: var(--nvb-color-primary-700);--nvb-button-tone-surface: var(--nvb-color-primary-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-neutral{--nvb-button-tone-color: var(--nvb-color-neutral-700);--nvb-button-tone-border: var(--nvb-color-neutral-300);--nvb-button-tone-text: var(--nvb-color-neutral-700);--nvb-button-tone-surface: var(--nvb-color-neutral-100);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-success{--nvb-button-tone-color: var(--nvb-color-success-500);--nvb-button-tone-border: var(--nvb-color-success-300);--nvb-button-tone-text: var(--nvb-color-success-700);--nvb-button-tone-surface: var(--nvb-color-success-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-info{--nvb-button-tone-color: var(--nvb-color-info-500);--nvb-button-tone-border: var(--nvb-color-info-300);--nvb-button-tone-text: var(--nvb-color-info-700);--nvb-button-tone-surface: var(--nvb-color-info-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button--tone-warning{--nvb-button-tone-color: var(--nvb-color-warning-500);--nvb-button-tone-border: var(--nvb-color-warning-300);--nvb-button-tone-text: var(--nvb-color-warning-800);--nvb-button-tone-surface: var(--nvb-color-warning-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-950)}.nvb-button--tone-risk{--nvb-button-tone-color: var(--nvb-color-risk-500);--nvb-button-tone-border: var(--nvb-color-risk-300);--nvb-button-tone-text: var(--nvb-color-risk-700);--nvb-button-tone-surface: var(--nvb-color-risk-050);--nvb-button-tone-contrast: var(--nvb-color-neutral-000)}.nvb-button:disabled{cursor:not-allowed;opacity:.65}.nvb-button--solid{background-color:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)));border-color:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)));color:var(--nvb-button-own-text-color, var(--nvb-button-tone-contrast, var(--nvb-color-neutral-000)))}.nvb-button--solid:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-600))) 90%,var(--nvb-color-neutral-950));border-color:color-mix(in oklab,var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-600))) 90%,var(--nvb-color-neutral-950))}.nvb-button--outline{background-color:var(--nvb-color-neutral-000);border-color:var(--nvb-button-color, var(--nvb-button-tone-border, var(--nvb-button-tone-color, var(--nvb-color-primary-500))));color:var(--nvb-button-text-color, var(--nvb-button-color, var(--nvb-button-tone-text, var(--nvb-color-primary-700))))}.nvb-button--outline:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-button-tone-surface) 70%,var(--nvb-color-neutral-000))}.nvb-button--text{background-color:transparent;border-color:transparent;color:var(--nvb-button-text-color, var(--nvb-button-color, var(--nvb-button-tone-text, var(--nvb-color-primary-700))))}.nvb-button--text:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-button-tone-surface) 68%,var(--nvb-color-neutral-000))}.nvb-button__icon{font-size:18px;line-height:1;flex:0 0 auto}.nvb-button__content{display:inline-flex;align-items:center;justify-content:center;gap:8px}.nvb-button__text{white-space:nowrap}.nvb-button__badge{min-width:18px;height:18px;padding:0 6px;border-radius:var(--nvb-radius-full);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1}.nvb-button__spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:nvb-button-spin .7s linear infinite}.nvb-button--icon-right{flex-direction:row-reverse}.nvb-button--icon-top{flex-direction:column}.nvb-button--icon-bottom{flex-direction:column-reverse}.nvb-button--size-small{min-height:var(--nvb-control-height-sm, 32px);padding:0 max(var(--nvb-control-padding-x, 12px) - 2px,8px);font-size:13px}.nvb-button--size-small.nvb-button--icon-only{width:var(--nvb-control-height-sm, 32px);min-width:var(--nvb-control-height-sm, 32px)}.nvb-button--size-large{min-height:44px;padding:0 16px;font-size:15px}.nvb-button--size-large.nvb-button--icon-only{width:44px;min-width:44px}.nvb-button--icon-only{width:var(--nvb-control-height, 40px);min-width:var(--nvb-control-height, 40px);padding:0;justify-content:center}.nvb-button-menu{position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:180px;padding:6px;border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--nvb-radius-md)));border:1px solid var(--nvb-color-neutral-200, #d6dbe1);background:var(--nvb-color-neutral-000, #ffffff);box-shadow:var(--nvb-shadow-8);display:flex;flex-direction:column;gap:4px}.nvb-button-menu--top{transform:translateY(calc(-100% - 6px))}.nvb-button-menu__item{width:100%;min-height:36px;border:0;border-radius:var(--nvb-radius-sm);background:transparent;color:var(--nvb-color-neutral-800, #1f2937);display:inline-flex;align-items:center;gap:8px;padding:8px 10px;text-align:left;cursor:pointer}.nvb-button-menu__item:hover{background:var(--nvb-color-neutral-100, #f3f4f6)}.nvb-button-menu__icon{flex:0 0 auto}.nvb-button--solid .nvb-button__badge{background:var(--nvb-color-neutral-000);color:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)))}.nvb-button--outline .nvb-button__badge,.nvb-button--text .nvb-button__badge{background:var(--nvb-button-color, var(--nvb-button-tone-color, var(--nvb-color-primary-500)));color:var(--nvb-color-neutral-000)}@keyframes nvb-button-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]}]}],ctorParameters:()=>[],propDecorators:{model:[{type:i.Input,args:[{isSignal:true,alias:"model",required:true}]}],buttonTrigger:[{type:N,args:["buttonTrigger"]}],onDocumentPointerDown:[{type:b,args:["document:pointerdown",["$event"]]}],onDocumentEscape:[{type:b,args:["document:keydown.escape"]}],onWindowResize:[{type:b,args:["window:resize"]}],onDocumentScroll:[{type:b,args:["document:scroll"]}]}});export{W as n,s as t};