@ngxviewbuilder/runtime 0.12.2 → 0.12.3

package/fesm2022/ngxviewbuilder-runtime-autocomplete-element-DU7SLoLr.mjs

@@ -0,0 +1 @@
+import{t as f}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{_ as y,bt as x,f as L,l as z,m as _,n as p,on as m,r as g,sn as w}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{Z as O,ot as C}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import{r as T,t as v}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.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=T(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(m.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(O);dataService=l(w);eventService=l(y);expressionService=l(L);dataSourceService=l(z);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(m.isEditor());if(this.model()?.parentElement&&this.model()?.parentElement instanceof x)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 C([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:p,name:"dynamicText"},{kind:"pipe",type:g,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,p,b,g],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-BWDaCDjn.mjs

@@ -0,0 +1 @@
+import{n as o}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{Z as v}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import{r as m,t as s}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.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=m(this.model,"nvb-avatar","avatar");previewOpen=p(false,...ngDevMode?[{debugName:"previewOpen"}]:[]);previewSrc=p("",...ngDevMode?[{debugName:"previewSrc"}]:[]);elementActionService=b(v);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-BUv50o0Q.mjs

@@ -0,0 +1 @@
+import{t as b}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{f as d,n as l}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{r as v,t as s}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs";import*as o from"@angular/core";import{ChangeDetectionStrategy as m,Component as g,computed as a,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=a(()=>this.resolveVariant(),...ngDevMode?[{debugName:"resolvedVariant"}]:[]);badgeClass=a(()=>{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=a(()=>{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 n=String(r?.condition??"").trim();if(!n)continue;if(Boolean(this.expressionService.evaluateInlineExpression(n,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 n=this.expressionService.evaluateInlineExpression(r,this.model());return String(n??"").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-Cb6NqxmR.mjs

@@ -0,0 +1 @@
+import{cn as y,n as b}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{Z as x,lt as S}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import{o as v,r as I,t as f}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs";import*as s from"@angular/core";import{ChangeDetectionStrategy as w,Component as _,computed as g,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 h=class p{model=k.required(...ngDevMode?[{debugName:"model"}]:[]);tid=I(this.model,"nvb-breadcrumbs","breadcrumbs");elementActionService=d(x);markupSecurityService=d(S);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=g(()=>{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=g(()=>{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:h,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{h as BreadcrumbsElement};

package/fesm2022/ngxviewbuilder-runtime-button-element-LyUxiJtc.mjs

@@ -0,0 +1 @@
+import{t as S}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{_ as k,n as m,sn as C}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{Z as D}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import{o as h,r as I,t as g}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.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=I(this.model,"nvb-button","button");buttonTrigger;elementActionService=a(D);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.propertyVersion.update(t=>t+1);this.cdr.markForCheck()};propertyVersion=l(0,...ngDevMode?[{debugName:"propertyVersion"}]:[]);liveModel=e(()=>{this.propertyVersion();return this.model()},{...ngDevMode?{debugName:"liveModel"}:{},equal:()=>false});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.liveModel()?.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.liveModel()?.text??"").trim();if(n)return n;const o=String(this.liveModel()?.label??"").trim();if(o)return o;return"Button"},...ngDevMode?[{debugName:"buttonText"}]:[]);buttonIcon=e(()=>String(this.liveModel()?.icon??"").trim(),...ngDevMode?[{debugName:"buttonIcon"}]:[]);badgeText=e(()=>String(this.liveModel()?.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.liveModel()?.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.liveModel()?.size??"normal").trim().toLowerCase();if(n==="small")return"small";if(n==="large")return"large";return"normal"},...ngDevMode?[{debugName:"buttonSize"}]:[]);isLoading=e(()=>Boolean(this.liveModel()?.loading),...ngDevMode?[{debugName:"isLoading"}]:[]);isIconOnly=e(()=>{if(this.hasBadge())return false;if(Boolean(this.liveModel()?.iconOnly)&&this.hasIcon())return true;const n=String(this.liveModel()?.text??"").trim();const o=String(this.liveModel()?.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.liveModel()?.variant??"solid").trim();const o=String(this.liveModel()?.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.liveModel()?.color??"").trim();const o=String(this.liveModel()?.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.liveModel().disabled||this.liveModel().readOnly)return;if(this.isMenuButton()){this.toggleMenu();return}this.runButtonActions()}async onMenuActionClick(n,o){o.preventDefault();o.stopPropagation();if(this.liveModel().disabled||this.liveModel().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.liveModel().events??[],"click",n);await this.elementActionService.runActions(this.model(),this.liveModel().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 v=Math.max(180,Math.round(o.width));const y=Math.max(96,this.menuActions().length*40+16);const c=window.innerHeight-o.bottom-t;const w=o.top-t;const d=c<Math.min(y,220)&&w>c;const p=t;const M=Math.max(p,x-v-t);const _=Math.min(Math.max(Math.round(o.left),p),M);this.menuPosition.set(d?"top":"bottom");this.menuStyle.set({position:"fixed",left:`${_}px`,top:`${Math.round(d?o.top-r:o.bottom+r)}px`,minWidth:`${v}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};

package/fesm2022/ngxviewbuilder-runtime-chart-element-B1uBvHYa.mjs

@@ -0,0 +1 @@
+import{t as A}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{n as M,r as $}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{Z as I}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import{r as N,t as S}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs";import*as p from"@angular/core";import{ChangeDetectionStrategy as z,Component as P,DestroyRef as D,ElementRef as V,computed as o,inject as _,input as R,signal as g,viewChild as E}from"@angular/core";import{NgTemplateOutlet as T}from"@angular/common";var G=A({ChartElement:()=>x});const C=6;const H=8;const O=24;const L=11;var x=class f{model=R.required(...ngDevMode?[{debugName:"model"}]:[]);tid=N(this.model,"nvb-chart","chart");dataSourceLoaded=g(false,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);activeIndex=g(null,...ngDevMode?[{debugName:"activeIndex"}]:[]);plotWidth=g(480,...ngDevMode?[{debugName:"plotWidth"}]:[]);dataVersion=g(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);elementActionService=_(I);hostRef=_(V);destroyRef=_(D);plotRef=E("chartRoot",...ngDevMode?[{debugName:"plotRef"}]:[]);measureContext=null;fontFamily="system-ui, sans-serif";numberFormat=new Intl.NumberFormat(void 0,{maximumFractionDigits:2});compactFormat=new Intl.NumberFormat(void 0,{notation:"compact",maximumFractionDigits:1});points=o(()=>{this.dataVersion();const t=(Array.isArray(this.model()?.points)?this.model().points:[]).map((e,n)=>{const a=String(e?.label??`Item ${n+1}`).trim()||`Item ${n+1}`;const r=Number(e?.value);return{label:a,value:Number.isFinite(r)?r:0}}).filter(e=>e.label.length>0);return this.mergeDuplicateLabels()?this.sumPointsByLabel(t):t},...ngDevMode?[{debugName:"points"}]:[]);chartType=o(()=>{const t=String(this.model()?.chartType??"bar").trim().toLowerCase();if(["line","pie","area","donut"].includes(t))return t;return t==="horizontalbar"?"horizontalBar":"bar"},...ngDevMode?[{debugName:"chartType"}]:[]);isClickable=o(()=>{const t=this.model()?.events;return Array.isArray(t)&&t.some(e=>{const n=e?.trigger??"click";return n==="click"||n==="always"})},...ngDevMode?[{debugName:"isClickable"}]:[]);isCircular=o(()=>["pie","donut"].includes(this.chartType()),...ngDevMode?[{debugName:"isCircular"}]:[]);legendLayout=o(()=>String(this.model()?.["legendLayout"]??"").trim().toLowerCase()==="horizontal"?"horizontal":"vertical",...ngDevMode?[{debugName:"legendLayout"}]:[]);showLegend=o(()=>this.isCircular()&&this.model().showLegend!==false,...ngDevMode?[{debugName:"showLegend"}]:[]);width=o(()=>Math.max(160,Math.round(this.plotWidth())),...ngDevMode?[{debugName:"width"}]:[]);height=o(()=>this.resolveChartHeightPixels(),...ngDevMode?[{debugName:"height"}]:[]);domain=o(()=>{const t=this.points().map(a=>a.value);const e=Math.min(0,...t);const n=Math.max(0,...t);return this.niceScale(e,n===e?e+1:n)},...ngDevMode?[{debugName:"domain"}]:[]);yTicksRaw=o(()=>{const{min:t,max:e,step:n}=this.domain();const a=[];for(let r=t;r<=e+n/2;r+=n)a.push(Number(r.toFixed(10)));return a},...ngDevMode?[{debugName:"yTicksRaw"}]:[]);plot=o(()=>{const t=Math.max(...this.yTicksRaw().map(i=>this.measure(this.formatTick(i))),8);const e=Math.ceil(t)+10;const n=this.chartType()==="line"||this.chartType()==="area"?16:4;const a=18;const r=this.height()-26;return{left:e,right:this.width()-n,top:a,bottom:r}},...ngDevMode?[{debugName:"plot"}]:[]);scaleY(t){const{min:e,max:n}=this.domain();const a=this.plot();return a.bottom-(t-e)/(n-e)*(a.bottom-a.top)}baselineY=o(()=>this.scaleY(0),...ngDevMode?[{debugName:"baselineY"}]:[]);yTicks=o(()=>this.yTicksRaw().map(t=>({value:t,label:this.formatTick(t),pos:this.scaleY(t)})),...ngDevMode?[{debugName:"yTicks"}]:[]);columns=o(()=>{const t=this.points();if(!t.length||this.chartType()!=="bar")return[];const e=this.plot();const n=(e.right-e.left)/t.length;const a=Math.max(4,Math.min(O,n*.62));const r=this.labelStep(t.map(s=>s.label),n);const i=t.length<=6&&t.every(s=>this.measure(this.formatValue(s.value))<=n-2);const c=this.baselineY();return t.map((s,v)=>{const u=e.left+n*v;const b=u+(n-a)/2;const l=this.scaleY(s.value);const h=Math.min(l,c);const d=Math.abs(c-l);return{index:v,point:s,bandX:u,bandWidth:n,x:b,width:a,y:h,height:d,path:this.columnPath(b,a,c,l),valueLabel:this.formatValue(s.value),showValue:i,valueY:s.value<0?l+13:l-6,axisLabel:this.truncate(s.label,Math.max(n*r-6,24)),showAxisLabel:v%r===0}})},...ngDevMode?[{debugName:"columns"}]:[]);lineMarks=o(()=>{const t=this.points();const e=this.chartType();if(!t.length||e!=="line"&&e!=="area")return[];const n=this.plot();const a=n.right-n.left;const r=t.length>1?a/(t.length-1):0;const i=this.labelStep(t.map(c=>c.label),t.length>1?r:a);return t.map((c,s)=>({index:s,point:c,x:t.length>1?n.left+r*s:n.left+a/2,y:this.scaleY(c.value),axisLabel:this.truncate(c.label,Math.max(r*i-6,40)),showAxisLabel:s%i===0||s===t.length-1}))},...ngDevMode?[{debugName:"lineMarks"}]:[]);linePath=o(()=>this.lineMarks().map((t,e)=>`${e===0?"M":"L"} ${t.x} ${t.y}`).join(" "),...ngDevMode?[{debugName:"linePath"}]:[]);areaPath=o(()=>{const t=this.lineMarks();if(!t.length)return"";const e=this.baselineY();return`${this.linePath()} L ${t[t.length-1].x} ${e} L ${t[0].x} ${e} Z`},...ngDevMode?[{debugName:"areaPath"}]:[]);lastLineMark=o(()=>{const t=this.lineMarks();return t.length?t[t.length-1]:null},...ngDevMode?[{debugName:"lastLineMark"}]:[]);rows=o(()=>{const t=this.points();if(!t.length||this.chartType()!=="horizontalBar")return[];const e=this.width();const n=Math.min(Math.max(...t.map(d=>this.measure(d.label,12)))+12,Math.round(e*.38));const a=Math.max(...t.map(d=>this.measure(this.formatValue(d.value))))+10;const r=n;const i=e-a;const c=32;const s=16;const v=t.map(d=>d.value);const u=Math.min(0,...v);const b=Math.max(0,...v)-u||1;const l=d=>r+(d-u)/b*(i-r);const h=l(0);return t.map((d,y)=>{const w=y*c;const k=w+8;const m=l(d.value);return{index:y,point:d,rowY:w,rowHeight:c,y:k,height:s,x:Math.min(h,m),width:Math.abs(m-h),path:this.rowPath(h,m,k,s),label:this.truncate(d.label,n-12,12),valueLabel:this.formatValue(d.value),valueX:Math.max(h,m)+6}})},...ngDevMode?[{debugName:"rows"}]:[]);rowsHeight=o(()=>Math.max(this.rows().length*32,32),...ngDevMode?[{debugName:"rowsHeight"}]:[]);pieTotal=o(()=>this.points().reduce((t,e)=>t+Math.max(e.value,0),0),...ngDevMode?[{debugName:"pieTotal"}]:[]);slices=o(()=>{const t=this.pieTotal();if(!this.isCircular()||t<=0)return[];const e=[...this.points().map((l,h)=>({index:h,label:l.label,value:Math.max(l.value,0)})).filter(l=>l.value>0)].sort((l,h)=>h.value-l.value);const n=e.length>C?e.slice(0,5):e;const a=e.length>C?e.slice(5):[];const r=[...n].sort((l,h)=>l.index-h.index).map(l=>l.index);const i=n.map(l=>({index:l.index,label:l.label,value:l.value,color:`var(--nvb-chart-${r.indexOf(l.index)%H+1})`}));if(a.length)i.push({index:-1,label:"Other",value:a.reduce((l,h)=>l+h.value,0),color:"var(--nvb-chart-other)"});const{cx:c,cy:s,outer:v,inner:u}=this.pieGeometry();let b=-90;return i.map(l=>{const h=l.value/t*360;const d=this.arcPath(c,s,v,u,b,b+h);b+=h;return{...l,share:l.value/t,path:d}})},...ngDevMode?[{debugName:"slices"}]:[]);pieGeometry=o(()=>{const t=this.pieSize();const e=t/2-2;return{size:t,cx:t/2,cy:t/2,outer:e,inner:this.chartType()==="donut"?e*.62:0}},...ngDevMode?[{debugName:"pieGeometry"}]:[]);pieSize=o(()=>{const t=this.height();const e=this.width();const n=this.legendBeside();return Math.max(120,Math.min(t,n?e*.45:e))},...ngDevMode?[{debugName:"pieSize"}]:[]);legendBeside=o(()=>this.showLegend()&&this.legendLayout()==="vertical"&&this.width()>=420,...ngDevMode?[{debugName:"legendBeside"}]:[]);activeSlice=o(()=>{const t=this.activeIndex();return t===null?null:this.slices().find(e=>e.index===t)??null},...ngDevMode?[{debugName:"activeSlice"}]:[]);hover=o(()=>{const t=this.activeIndex();if(t===null)return null;const e=this.chartType();if(e==="bar"){const n=this.columns()[t];return n?{label:n.point.label,value:n.point.value,share:null,color:"var(--nvb-chart-single)",x:n.x+n.width/2,y:n.y}:null}if(e==="line"||e==="area"){const n=this.lineMarks()[t];return n?{label:n.point.label,value:n.point.value,share:null,color:"var(--nvb-chart-single)",x:n.x,y:n.y}:null}if(e==="horizontalBar"){const n=this.rows()[t];return n?{label:n.point.label,value:n.point.value,share:null,color:"var(--nvb-chart-single)",x:n.x+n.width,y:n.y}:null}return null},...ngDevMode?[{debugName:"hover"}]:[]);tooltipStyle=o(()=>{const t=this.hover();if(!t)return null;const e=t.x>this.width()-150;return{left:`${t.x}px`,top:`${Math.max(t.y,8)}px`,transform:e?"translate(calc(-100% - 12px), -50%)":"translate(12px, -50%)"}},...ngDevMode?[{debugName:"tooltipStyle"}]:[]);ariaSummary=o(()=>{const t=String(this.model()?.title??"").trim();const e=this.points().length;const n=this.isClickable()?" Use arrow keys to move, Enter to select.":"";return`${t?`${t}. `:""}${e} ${e===1?"item":"items"}.${n}`},...ngDevMode?[{debugName:"ariaSummary"}]:[]);ngOnInit(){const t=!this.model().dataSource||Boolean(this.model().dataSourceLoaded);this.dataSourceLoaded.set(t);this.model().afterDataSourceLoad.add(()=>{this.dataSourceLoaded.set(true);this.dataVersion.update(e=>e+1)})}ngAfterViewInit(){const t=this.hostRef.nativeElement;const e=getComputedStyle(t).fontFamily;if(e)this.fontFamily=e;const n=this.plotRef()?.nativeElement??t;if(typeof ResizeObserver==="undefined"){this.plotWidth.set(n.clientWidth||480);return}const a=new ResizeObserver(r=>{const i=r[0]?.contentRect.width??0;if(i>0&&Math.abs(i-this.plotWidth())>.5)this.plotWidth.set(i)});a.observe(n);this.destroyRef.onDestroy(()=>a.disconnect())}onLinePointerMove(t){const e=this.lineMarks();if(!e.length)return;const n=t.currentTarget;const a=t.clientX-n.getBoundingClientRect().left;let r=0;e.forEach((i,c)=>{if(Math.abs(i.x-a)<Math.abs(e[r].x-a))r=c});this.activeIndex.set(r)}setActive(t){this.activeIndex.set(t)}onPlotKeydown(t){const e=this.isCircular()?this.slices().length:this.points().length;if(!e)return;const n=this.isCircular()?this.slices().findIndex(r=>r.index===this.activeIndex()):this.activeIndex()??-1;let a=n;if(t.key==="ArrowRight"||t.key==="ArrowDown")a=n<0?0:Math.min(e-1,n+1);else if(t.key==="ArrowLeft"||t.key==="ArrowUp")a=n<0?0:Math.max(0,n-1);else if(t.key==="Home")a=0;else if(t.key==="End")a=e-1;else if((t.key==="Enter"||t.key===" ")&&n>=0){t.preventDefault();const r=this.isCircular()?this.slices()[n].index:n;if(r>=0)this.runClick(r);return}else if(t.key==="Escape"){this.activeIndex.set(null);return}else return;t.preventDefault();this.activeIndex.set(this.isCircular()?this.slices()[a].index:a)}onPointClick(t,e){e.preventDefault();e.stopPropagation();if(t>=0)this.runClick(t)}onLineClick(t){const e=this.activeIndex();if(e!==null&&e>=0)this.onPointClick(e,t)}formatValue(t){return this.numberFormat.format(t)}formatShare(t){const e=t*100;return`${e<10&&e>0?e.toFixed(1):Math.round(e)}%`}runClick(t){const e=this.points()[t];if(!e||!this.isClickable())return;const n={item:e,row:e,index:t,value:e.value};const a=String(this.model().name??"").trim();if(a)n[a]=e.value;this.elementActionService.runActions(this.model(),this.model().events??[],"click",n)}mergeDuplicateLabels(){const t=this.model()?.["mergeDuplicateLabels"];return t===void 0||t===null?true:Boolean(t)}sumPointsByLabel(t){const e=new Map;t.forEach(n=>{const a=e.get(n.label);if(a){a.value+=n.value;return}e.set(n.label,{label:n.label,value:n.value})});return Array.from(e.values())}niceScale(t,e){const n=(e-t)/4;const a=Math.pow(10,Math.floor(Math.log10(n||1)));const r=n/a;const i=(r<=1?1:r<=2?2:r<=2.5?2.5:r<=5?5:10)*a;return{min:Math.floor(t/i)*i,max:Math.ceil(e/i)*i,step:i}}formatTick(t){return Math.abs(t)>=1e4?this.compactFormat.format(t):this.numberFormat.format(t)}labelStep(t,e){const n=Math.min(Math.max(...t.map(a=>this.measure(a)),0),120);return Math.max(1,Math.ceil((n+8)/Math.max(e,1)))}columnPath(t,e,n,a){const r=Math.abs(n-a);if(r<.5)return"";const i=Math.min(4,e/2,r);if(a<=n)return[`M ${t} ${n}`,`V ${a+i}`,`Q ${t} ${a} ${t+i} ${a}`,`H ${t+e-i}`,`Q ${t+e} ${a} ${t+e} ${a+i}`,`V ${n}`,"Z"].join(" ");return[`M ${t} ${n}`,`V ${a-i}`,`Q ${t} ${a} ${t+i} ${a}`,`H ${t+e-i}`,`Q ${t+e} ${a} ${t+e} ${a-i}`,`V ${n}`,"Z"].join(" ")}rowPath(t,e,n,a){const r=Math.abs(e-t);if(r<.5)return"";const i=Math.min(4,a/2,r);const c=e-(e>=t?1:-1)*i;return[`M ${t} ${n}`,`H ${c}`,`Q ${e} ${n} ${e} ${n+i}`,`V ${n+a-i}`,`Q ${e} ${n+a} ${c} ${n+a}`,`H ${t}`,"Z"].join(" ")}arcPath(t,e,n,a,r,i){if(i-r>=359.999){const v=r+180;return`${this.arcPath(t,e,n,a,r,v)} ${this.arcPath(t,e,n,a,v,i-.001)}`}const c=i-r>180?1:0;const s=(v,u)=>{const b=u*Math.PI/180;return`${t+v*Math.cos(b)} ${e+v*Math.sin(b)}`};if(a<=0)return`M ${t} ${e} L ${s(n,r)} A ${n} ${n} 0 ${c} 1 ${s(n,i)} Z`;return[`M ${s(n,r)}`,`A ${n} ${n} 0 ${c} 1 ${s(n,i)}`,`L ${s(a,i)}`,`A ${a} ${a} 0 ${c} 0 ${s(a,r)}`,"Z"].join(" ")}measure(t,e=L){if(!this.measureContext&&typeof document!=="undefined")this.measureContext=document.createElement("canvas").getContext("2d");if(!this.measureContext)return String(t).length*e*.6;this.measureContext.font=`${e}px ${this.fontFamily}`;return this.measureContext.measureText(String(t)).width}truncate(t,e,n=L){if(this.measure(t,n)<=e)return t;let a=0;let r=t.length;while(a<r){const i=Math.ceil((a+r)/2);if(this.measure(`${t.slice(0,i)}…`,n)<=e)a=i;else r=i-1}return a>0?`${t.slice(0,a).trimEnd()}…`:"…"}resolveChartHeightPixels(){const t=String(this.model()?.chartHeight??"").trim();const e=Number.parseFloat(t);if(!t||t.endsWith("%")||!Number.isFinite(e)||e<=0)return 220;return Math.max(140,Math.round(e))}static ɵfac=p.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:f,deps:[],target:p.ɵɵFactoryTarget.Component});static ɵcmp=p.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:f,isStandalone:true,selector:"chart-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},viewQueries:[{propertyName:"plotRef",first:true,predicate:["chartRoot"],descendants:true,isSignal:true}],ngImport:p,template:"<element-wrapper [model]=\"model()\">\n  <section\n    class=\"nvb-chart\"\n    [class.nvb-chart--clickable]=\"isClickable()\"\n    [attr.data-testid]=\"tid('root')\"\n    #chartRoot\n  >\n    @if (model().title) {\n      <h4 class=\"nvb-chart__title\">{{ model().title | dynamicText: model() }}</h4>\n    }\n\n    @if (model().dataSource && !dataSourceLoaded()) {\n      <div class=\"nvb-chart__state\" [style.height.px]=\"height()\">\n        {{ 'chart.loading' | uiT: 'Loading chart data...' }}\n      </div>\n    } @else if (!points().length) {\n      <div class=\"nvb-chart__state\" [style.height.px]=\"height()\">\n        {{ 'chart.empty' | uiT: 'No data to show yet.' }}\n      </div>\n    } @else if (isCircular()) {\n      <div\n        class=\"nvb-chart__circular\"\n        [class.nvb-chart__circular--beside]=\"legendBeside()\"\n      >\n        <svg\n          class=\"nvb-chart__svg nvb-chart__svg--circular\"\n          [attr.width]=\"pieGeometry().size\"\n          [attr.height]=\"pieGeometry().size\"\n          [attr.viewBox]=\"'0 0 ' + pieGeometry().size + ' ' + pieGeometry().size\"\n          role=\"img\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"ariaSummary()\"\n          (keydown)=\"onPlotKeydown($event)\"\n          (blur)=\"setActive(null)\"\n          (pointerleave)=\"setActive(null)\"\n          [attr.data-testid]=\"tid('plot')\"\n        >\n          @for (slice of slices(); track slice.index; let tidIndex1 = $index) {\n            <path [attr.data-testid]=\"tid('slice', tidIndex1)\"\n              class=\"nvb-chart__slice\"\n              [class.nvb-chart__slice--dim]=\"activeIndex() !== null && activeIndex() !== slice.index\"\n              [attr.d]=\"slice.path\"\n              [attr.fill]=\"slice.color\"\n              (pointerenter)=\"setActive(slice.index)\"\n              (click)=\"onPointClick(slice.index, $event)\"\n            ></path>\n          }\n          @if (chartType() === 'donut') {\n            <text\n              [attr.x]=\"pieGeometry().cx\"\n              [attr.y]=\"pieGeometry().cy - 2\"\n              text-anchor=\"middle\"\n              class=\"nvb-chart__center-value\"\n            >\n              {{ formatValue(activeSlice()?.value ?? pieTotal()) }}\n            </text>\n            <text\n              [attr.x]=\"pieGeometry().cx\"\n              [attr.y]=\"pieGeometry().cy + 16\"\n              text-anchor=\"middle\"\n              class=\"nvb-chart__center-label\"\n            >\n              @if (activeSlice(); as slice) {\n                {{ formatShare(slice.share) }} ·\n                {{ slice.index === -1 ? ('chart.other' | uiT: 'Other') : slice.label }}\n              } @else {\n                {{ 'chart.total' | uiT: 'Total' }}\n              }\n            </text>\n            @if (activeSlice() && isClickable() && activeSlice()!.index >= 0) {\n              <text\n                [attr.x]=\"pieGeometry().cx\"\n                [attr.y]=\"pieGeometry().cy + 32\"\n                text-anchor=\"middle\"\n                class=\"nvb-chart__center-hint\"\n              >\n                {{ 'chart.clickHint' | uiT: 'Click to select' }}\n              </text>\n            }\n          }\n        </svg>\n\n        @if (showLegend()) {\n          <ul\n            class=\"nvb-chart__legend\"\n            [class.nvb-chart__legend--inline]=\"legendLayout() === 'horizontal'\"\n            [attr.data-testid]=\"tid('legend')\"\n          >\n            @for (slice of slices(); track slice.index; let tidIndex2 = $index) {\n              <li [attr.data-testid]=\"tid('legend-item', tidIndex2)\"\n                class=\"nvb-chart__legend-item\"\n                [class.nvb-chart__legend-item--active]=\"activeIndex() === slice.index\"\n                [class.nvb-chart__legend-item--dim]=\"activeIndex() !== null && activeIndex() !== slice.index\"\n                (pointerenter)=\"setActive(slice.index)\"\n                (pointerleave)=\"setActive(null)\"\n                (click)=\"onPointClick(slice.index, $event)\"\n              >\n                <span class=\"nvb-chart__swatch\" [style.background]=\"slice.color\"></span>\n                <span class=\"nvb-chart__legend-label\" [attr.title]=\"slice.label\">{{\n                  slice.index === -1 ? ('chart.other' | uiT: 'Other') : slice.label\n                }}</span>\n                <span class=\"nvb-chart__legend-value\">{{ formatValue(slice.value) }}</span>\n                <span class=\"nvb-chart__legend-share\">{{ formatShare(slice.share) }}</span>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n    } @else {\n      <div class=\"nvb-chart__plot\">\n        @switch (chartType()) {\n          @case ('horizontalBar') {\n            <svg\n              class=\"nvb-chart__svg\"\n              [attr.width]=\"width()\"\n              [attr.height]=\"rowsHeight()\"\n              role=\"img\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"ariaSummary()\"\n              (keydown)=\"onPlotKeydown($event)\"\n              (blur)=\"setActive(null)\"\n              (pointerleave)=\"setActive(null)\"\n              [attr.data-testid]=\"tid('plot')\"\n            >\n              @for (row of rows(); track row.index; let tidIndex3 = $index) {\n                <g [attr.data-testid]=\"tid('mark', tidIndex3)\"\n                  class=\"nvb-chart__mark\"\n                  [class.nvb-chart__mark--active]=\"activeIndex() === row.index\"\n                  (pointerenter)=\"setActive(row.index)\"\n                  (click)=\"onPointClick(row.index, $event)\"\n                >\n                  <rect\n                    class=\"nvb-chart__band\"\n                    x=\"0\"\n                    [attr.y]=\"row.rowY\"\n                    [attr.width]=\"width()\"\n                    [attr.height]=\"row.rowHeight\"\n                  ></rect>\n                  <text\n                    x=\"0\"\n                    [attr.y]=\"row.rowY + row.rowHeight / 2\"\n                    dominant-baseline=\"central\"\n                    class=\"nvb-chart__category\"\n                  >\n                    {{ row.label }}\n                  </text>\n                  <path class=\"nvb-chart__fill\" [attr.d]=\"row.path\"></path>\n                  <text\n                    [attr.x]=\"row.valueX\"\n                    [attr.y]=\"row.rowY + row.rowHeight / 2\"\n                    dominant-baseline=\"central\"\n                    class=\"nvb-chart__value\"\n                  >\n                    {{ row.valueLabel }}\n                  </text>\n                </g>\n              }\n            </svg>\n          }\n\n          @case ('bar') {\n            <svg\n              class=\"nvb-chart__svg\"\n              [attr.width]=\"width()\"\n              [attr.height]=\"height()\"\n              role=\"img\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"ariaSummary()\"\n              (keydown)=\"onPlotKeydown($event)\"\n              (blur)=\"setActive(null)\"\n              (pointerleave)=\"setActive(null)\"\n              [attr.data-testid]=\"tid('plot')\"\n            >\n              <ng-container *ngTemplateOutlet=\"yAxis\"></ng-container>\n              @for (column of columns(); track column.index; let tidIndex4 = $index) {\n                <g [attr.data-testid]=\"tid('mark', tidIndex4)\"\n                  class=\"nvb-chart__mark\"\n                  [class.nvb-chart__mark--active]=\"activeIndex() === column.index\"\n                  (pointerenter)=\"setActive(column.index)\"\n                  (click)=\"onPointClick(column.index, $event)\"\n                >\n                  <rect\n                    class=\"nvb-chart__band\"\n                    [attr.x]=\"column.bandX\"\n                    [attr.y]=\"plot().top\"\n                    [attr.width]=\"column.bandWidth\"\n                    [attr.height]=\"plot().bottom - plot().top\"\n                  ></rect>\n                  <path class=\"nvb-chart__fill\" [attr.d]=\"column.path\"></path>\n                  @if (column.showValue && activeIndex() !== column.index) {\n                    <text\n                      [attr.x]=\"column.x + column.width / 2\"\n                      [attr.y]=\"column.valueY\"\n                      text-anchor=\"middle\"\n                      class=\"nvb-chart__value\"\n                    >\n                      {{ column.valueLabel }}\n                    </text>\n                  }\n                  @if (column.showAxisLabel) {\n                    <text\n                      [attr.x]=\"column.bandX + column.bandWidth / 2\"\n                      [attr.y]=\"plot().bottom + 17\"\n                      text-anchor=\"middle\"\n                      class=\"nvb-chart__category\"\n                    >\n                      {{ column.axisLabel }}\n                    </text>\n                  }\n                </g>\n              }\n              <line\n                class=\"nvb-chart__baseline\"\n                [attr.x1]=\"plot().left\"\n                [attr.x2]=\"plot().right\"\n                [attr.y1]=\"baselineY()\"\n                [attr.y2]=\"baselineY()\"\n              ></line>\n            </svg>\n          }\n\n          @default {\n            <svg\n              class=\"nvb-chart__svg\"\n              [attr.width]=\"width()\"\n              [attr.height]=\"height()\"\n              role=\"img\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"ariaSummary()\"\n              (keydown)=\"onPlotKeydown($event)\"\n              (blur)=\"setActive(null)\"\n              (pointermove)=\"onLinePointerMove($event)\"\n              (pointerleave)=\"setActive(null)\"\n              (click)=\"onLineClick($event)\"\n              [attr.data-testid]=\"tid('plot')\"\n            >\n              <ng-container *ngTemplateOutlet=\"yAxis\"></ng-container>\n              @if (chartType() === 'area') {\n                <path class=\"nvb-chart__area\" [attr.d]=\"areaPath()\"></path>\n              }\n              <path class=\"nvb-chart__line\" [attr.d]=\"linePath()\"></path>\n              @for (mark of lineMarks(); track mark.index) {\n                @if (mark.showAxisLabel) {\n                  <text\n                    [attr.x]=\"mark.x\"\n                    [attr.y]=\"plot().bottom + 17\"\n                    [attr.text-anchor]=\"\n                      $first && lineMarks().length > 1 ? 'start' : $last && lineMarks().length > 1 ? 'end' : 'middle'\n                    \"\n                    class=\"nvb-chart__category\"\n                  >\n                    {{ mark.axisLabel }}\n                  </text>\n                }\n              }\n              <line\n                class=\"nvb-chart__baseline\"\n                [attr.x1]=\"plot().left\"\n                [attr.x2]=\"plot().right\"\n                [attr.y1]=\"baselineY()\"\n                [attr.y2]=\"baselineY()\"\n              ></line>\n              @if (hover(); as active) {\n                <line\n                  class=\"nvb-chart__crosshair\"\n                  [attr.x1]=\"active.x\"\n                  [attr.x2]=\"active.x\"\n                  [attr.y1]=\"plot().top\"\n                  [attr.y2]=\"plot().bottom\"\n                ></line>\n                <circle class=\"nvb-chart__dot\" [attr.cx]=\"active.x\" [attr.cy]=\"active.y\" r=\"4.5\"></circle>\n              } @else if (lastLineMark(); as last) {\n                <circle class=\"nvb-chart__dot\" [attr.cx]=\"last.x\" [attr.cy]=\"last.y\" r=\"4\"></circle>\n                <text\n                  [attr.x]=\"last.x\"\n                  [attr.y]=\"last.y - 11\"\n                  [attr.text-anchor]=\"lineMarks().length > 1 ? 'end' : 'middle'\"\n                  class=\"nvb-chart__value\"\n                >\n                  {{ formatValue(last.point.value) }}\n                </text>\n              }\n            </svg>\n          }\n        }\n\n        @if (hover(); as active) {\n          <div\n            class=\"nvb-chart__tooltip\"\n            role=\"status\"\n            [style.left]=\"tooltipStyle()?.left\"\n            [style.top]=\"tooltipStyle()?.top\"\n            [style.transform]=\"tooltipStyle()?.transform\"\n            [attr.data-testid]=\"tid('tooltip')\"\n          >\n            <span class=\"nvb-chart__tooltip-key\" [style.background]=\"active.color\"></span>\n            <span class=\"nvb-chart__tooltip-value\">{{ formatValue(active.value) }}</span>\n            <span class=\"nvb-chart__tooltip-label\">{{ active.label }}</span>\n            @if (isClickable()) {\n              <span class=\"nvb-chart__tooltip-hint\">{{ 'chart.clickHint' | uiT: 'Click to select' }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <ng-template #yAxis>\n      <svg:g class=\"nvb-chart__axis\">\n        @for (tick of yTicks(); track tick.value) {\n          <svg:line\n            class=\"nvb-chart__grid\"\n            [attr.x1]=\"plot().left\"\n            [attr.x2]=\"plot().right\"\n            [attr.y1]=\"tick.pos\"\n            [attr.y2]=\"tick.pos\"\n          ></svg:line>\n          <svg:text\n            [attr.x]=\"plot().left - 10\"\n            [attr.y]=\"tick.pos\"\n            text-anchor=\"end\"\n            dominant-baseline=\"central\"\n            class=\"nvb-chart__tick\"\n          >\n            {{ tick.label }}\n          </svg:text>\n        }\n      </svg:g>\n    </ng-template>\n\n    @if (points().length) {\n      <table class=\"nvb-chart__sr-table\">\n        <caption>{{ model().title || ('chart.data' | uiT: 'Chart data') }}</caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">{{ 'chart.label' | uiT: 'Label' }}</th>\n            <th scope=\"col\">{{ 'chart.value' | uiT: 'Value' }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (point of points(); track $index) {\n            <tr>\n              <th scope=\"row\">{{ point.label }}</th>\n              <td>{{ formatValue(point.value) }}</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    }\n  </section>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;min-width:0}.nvb-chart{position:relative;width:100%;box-sizing:border-box;padding:16px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-md, var(--nvb-radius-lg));background:var(--nvb-color-neutral-000);display:flex;flex-direction:column;gap:12px;min-width:0}.nvb-chart__title{margin:0;font-size:14px;font-weight:600;line-height:1.4;color:var(--nvb-color-neutral-900)}.nvb-chart__state{display:flex;align-items:center;justify-content:center;color:var(--nvb-color-neutral-500);font-size:13px}.nvb-chart__plot{position:relative;min-width:0}.nvb-chart__svg{display:block;overflow:visible;outline:none;font-family:inherit}.nvb-chart__svg:focus-visible{outline:2px solid var(--nvb-color-primary-500);outline-offset:4px;border-radius:var(--nvb-radius-sm)}.nvb-chart__grid{stroke:var(--nvb-color-neutral-150, var(--nvb-color-neutral-100));stroke-width:1;shape-rendering:crispEdges}.nvb-chart__baseline{stroke:var(--nvb-color-neutral-300);stroke-width:1;shape-rendering:crispEdges}.nvb-chart__tick{font-size:11px;fill:var(--nvb-color-neutral-500);font-variant-numeric:tabular-nums}.nvb-chart__category{font-size:11px;fill:var(--nvb-color-neutral-600)}.nvb-chart__value{font-size:11px;font-weight:600;fill:var(--nvb-color-neutral-700);font-variant-numeric:tabular-nums;pointer-events:none}.nvb-chart__mark{cursor:default}.nvb-chart--clickable .nvb-chart__mark,.nvb-chart--clickable .nvb-chart__slice,.nvb-chart--clickable .nvb-chart__legend-item,.nvb-chart--clickable .nvb-chart__line-hit{cursor:pointer}.nvb-chart__band{fill:transparent}.nvb-chart__mark--active .nvb-chart__band{fill:var(--nvb-color-neutral-050)}.nvb-chart__fill{fill:var(--nvb-chart-single, var(--nvb-color-primary-500));transition:fill .12s ease}.nvb-chart__mark--active .nvb-chart__fill{fill:color-mix(in oklab,var(--nvb-chart-single, var(--nvb-color-primary-500)) 82%,black)}.nvb-chart__line{fill:none;stroke:var(--nvb-chart-single, var(--nvb-color-primary-500));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nvb-chart__area{fill:var(--nvb-chart-single, var(--nvb-color-primary-500));fill-opacity:.1}.nvb-chart__crosshair{stroke:var(--nvb-color-neutral-300);stroke-width:1;shape-rendering:crispEdges;pointer-events:none}.nvb-chart__dot{fill:var(--nvb-chart-single, var(--nvb-color-primary-500));stroke:var(--nvb-color-neutral-000);stroke-width:2;pointer-events:none}.nvb-chart__circular{display:flex;flex-direction:column;align-items:center;gap:16px}.nvb-chart__circular--beside{flex-direction:row;align-items:center;gap:24px}.nvb-chart__svg--circular{flex:0 0 auto}.nvb-chart__slice{stroke:var(--nvb-color-neutral-000);stroke-width:2;stroke-linejoin:round;transition:opacity .12s ease}.nvb-chart__slice--dim{opacity:.35}.nvb-chart__center-value{font-size:22px;font-weight:600;fill:var(--nvb-color-neutral-900)}.nvb-chart__center-label{font-size:12px;fill:var(--nvb-color-neutral-500)}.nvb-chart__legend{flex:1 1 auto;width:100%;min-width:0;margin:0;padding:0;list-style:none;display:flex;flex-direction:column}.nvb-chart__legend-item{display:grid;grid-template-columns:10px minmax(0,1fr) auto 44px;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--nvb-radius-md);font-size:13px;line-height:1.3;color:var(--nvb-color-neutral-700);transition:background-color .12s ease,opacity .12s ease}.nvb-chart__legend-item+.nvb-chart__legend-item{border-top:1px solid var(--nvb-color-neutral-100)}.nvb-chart__legend-item--active{background:var(--nvb-color-neutral-050)}.nvb-chart__legend-item--dim{opacity:.55}.nvb-chart__swatch{width:10px;height:10px;border-radius:var(--nvb-radius-sm)}.nvb-chart__legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-chart__legend-value{font-weight:600;color:var(--nvb-color-neutral-900);font-variant-numeric:tabular-nums}.nvb-chart__legend-share{text-align:right;color:var(--nvb-color-neutral-500);font-variant-numeric:tabular-nums}.nvb-chart__legend--inline{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 16px}.nvb-chart__legend--inline .nvb-chart__legend-item{display:inline-flex;gap:6px;padding:2px 4px;border-top:0}.nvb-chart__legend--inline .nvb-chart__legend-label{max-width:160px}.nvb-chart__legend--inline .nvb-chart__legend-value{display:none}.nvb-chart__tooltip{position:absolute;z-index:20;display:grid;grid-template-columns:12px auto;align-items:center;column-gap:8px;row-gap:2px;padding:8px 10px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-lg);background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-8, 0 4px 16px rgba(0, 0, 0, .12));pointer-events:none;white-space:nowrap}.nvb-chart__tooltip-key{width:12px;height:2px;border-radius:1px}.nvb-chart__tooltip-value{font-size:14px;font-weight:600;color:var(--nvb-color-neutral-900);font-variant-numeric:tabular-nums}.nvb-chart__tooltip-hint{grid-column:2;margin-top:2px;font-size:11px;color:var(--nvb-color-primary-600)}.nvb-chart__center-hint{font-size:11px;fill:var(--nvb-color-primary-600)}.nvb-chart--clickable .nvb-chart__svg{cursor:pointer}.nvb-chart__tooltip-label{grid-column:2;font-size:12px;color:var(--nvb-color-neutral-600)}.nvb-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.nvb-chart__fill,.nvb-chart__slice,.nvb-chart__legend-item{transition:none}}\n"],dependencies:[{kind:"component",type:S,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:T,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"pipe",type:M,name:"dynamicText"},{kind:"pipe",type:$,name:"uiT"}],changeDetection:p.ChangeDetectionStrategy.OnPush})};p.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:x,decorators:[{type:P,args:[{selector:"chart-element",changeDetection:z.OnPush,imports:[S,T,M,$],template:"<element-wrapper [model]=\"model()\">\n  <section\n    class=\"nvb-chart\"\n    [class.nvb-chart--clickable]=\"isClickable()\"\n    [attr.data-testid]=\"tid('root')\"\n    #chartRoot\n  >\n    @if (model().title) {\n      <h4 class=\"nvb-chart__title\">{{ model().title | dynamicText: model() }}</h4>\n    }\n\n    @if (model().dataSource && !dataSourceLoaded()) {\n      <div class=\"nvb-chart__state\" [style.height.px]=\"height()\">\n        {{ 'chart.loading' | uiT: 'Loading chart data...' }}\n      </div>\n    } @else if (!points().length) {\n      <div class=\"nvb-chart__state\" [style.height.px]=\"height()\">\n        {{ 'chart.empty' | uiT: 'No data to show yet.' }}\n      </div>\n    } @else if (isCircular()) {\n      <div\n        class=\"nvb-chart__circular\"\n        [class.nvb-chart__circular--beside]=\"legendBeside()\"\n      >\n        <svg\n          class=\"nvb-chart__svg nvb-chart__svg--circular\"\n          [attr.width]=\"pieGeometry().size\"\n          [attr.height]=\"pieGeometry().size\"\n          [attr.viewBox]=\"'0 0 ' + pieGeometry().size + ' ' + pieGeometry().size\"\n          role=\"img\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"ariaSummary()\"\n          (keydown)=\"onPlotKeydown($event)\"\n          (blur)=\"setActive(null)\"\n          (pointerleave)=\"setActive(null)\"\n          [attr.data-testid]=\"tid('plot')\"\n        >\n          @for (slice of slices(); track slice.index; let tidIndex1 = $index) {\n            <path [attr.data-testid]=\"tid('slice', tidIndex1)\"\n              class=\"nvb-chart__slice\"\n              [class.nvb-chart__slice--dim]=\"activeIndex() !== null && activeIndex() !== slice.index\"\n              [attr.d]=\"slice.path\"\n              [attr.fill]=\"slice.color\"\n              (pointerenter)=\"setActive(slice.index)\"\n              (click)=\"onPointClick(slice.index, $event)\"\n            ></path>\n          }\n          @if (chartType() === 'donut') {\n            <text\n              [attr.x]=\"pieGeometry().cx\"\n              [attr.y]=\"pieGeometry().cy - 2\"\n              text-anchor=\"middle\"\n              class=\"nvb-chart__center-value\"\n            >\n              {{ formatValue(activeSlice()?.value ?? pieTotal()) }}\n            </text>\n            <text\n              [attr.x]=\"pieGeometry().cx\"\n              [attr.y]=\"pieGeometry().cy + 16\"\n              text-anchor=\"middle\"\n              class=\"nvb-chart__center-label\"\n            >\n              @if (activeSlice(); as slice) {\n                {{ formatShare(slice.share) }} ·\n                {{ slice.index === -1 ? ('chart.other' | uiT: 'Other') : slice.label }}\n              } @else {\n                {{ 'chart.total' | uiT: 'Total' }}\n              }\n            </text>\n            @if (activeSlice() && isClickable() && activeSlice()!.index >= 0) {\n              <text\n                [attr.x]=\"pieGeometry().cx\"\n                [attr.y]=\"pieGeometry().cy + 32\"\n                text-anchor=\"middle\"\n                class=\"nvb-chart__center-hint\"\n              >\n                {{ 'chart.clickHint' | uiT: 'Click to select' }}\n              </text>\n            }\n          }\n        </svg>\n\n        @if (showLegend()) {\n          <ul\n            class=\"nvb-chart__legend\"\n            [class.nvb-chart__legend--inline]=\"legendLayout() === 'horizontal'\"\n            [attr.data-testid]=\"tid('legend')\"\n          >\n            @for (slice of slices(); track slice.index; let tidIndex2 = $index) {\n              <li [attr.data-testid]=\"tid('legend-item', tidIndex2)\"\n                class=\"nvb-chart__legend-item\"\n                [class.nvb-chart__legend-item--active]=\"activeIndex() === slice.index\"\n                [class.nvb-chart__legend-item--dim]=\"activeIndex() !== null && activeIndex() !== slice.index\"\n                (pointerenter)=\"setActive(slice.index)\"\n                (pointerleave)=\"setActive(null)\"\n                (click)=\"onPointClick(slice.index, $event)\"\n              >\n                <span class=\"nvb-chart__swatch\" [style.background]=\"slice.color\"></span>\n                <span class=\"nvb-chart__legend-label\" [attr.title]=\"slice.label\">{{\n                  slice.index === -1 ? ('chart.other' | uiT: 'Other') : slice.label\n                }}</span>\n                <span class=\"nvb-chart__legend-value\">{{ formatValue(slice.value) }}</span>\n                <span class=\"nvb-chart__legend-share\">{{ formatShare(slice.share) }}</span>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n    } @else {\n      <div class=\"nvb-chart__plot\">\n        @switch (chartType()) {\n          @case ('horizontalBar') {\n            <svg\n              class=\"nvb-chart__svg\"\n              [attr.width]=\"width()\"\n              [attr.height]=\"rowsHeight()\"\n              role=\"img\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"ariaSummary()\"\n              (keydown)=\"onPlotKeydown($event)\"\n              (blur)=\"setActive(null)\"\n              (pointerleave)=\"setActive(null)\"\n              [attr.data-testid]=\"tid('plot')\"\n            >\n              @for (row of rows(); track row.index; let tidIndex3 = $index) {\n                <g [attr.data-testid]=\"tid('mark', tidIndex3)\"\n                  class=\"nvb-chart__mark\"\n                  [class.nvb-chart__mark--active]=\"activeIndex() === row.index\"\n                  (pointerenter)=\"setActive(row.index)\"\n                  (click)=\"onPointClick(row.index, $event)\"\n                >\n                  <rect\n                    class=\"nvb-chart__band\"\n                    x=\"0\"\n                    [attr.y]=\"row.rowY\"\n                    [attr.width]=\"width()\"\n                    [attr.height]=\"row.rowHeight\"\n                  ></rect>\n                  <text\n                    x=\"0\"\n                    [attr.y]=\"row.rowY + row.rowHeight / 2\"\n                    dominant-baseline=\"central\"\n                    class=\"nvb-chart__category\"\n                  >\n                    {{ row.label }}\n                  </text>\n                  <path class=\"nvb-chart__fill\" [attr.d]=\"row.path\"></path>\n                  <text\n                    [attr.x]=\"row.valueX\"\n                    [attr.y]=\"row.rowY + row.rowHeight / 2\"\n                    dominant-baseline=\"central\"\n                    class=\"nvb-chart__value\"\n                  >\n                    {{ row.valueLabel }}\n                  </text>\n                </g>\n              }\n            </svg>\n          }\n\n          @case ('bar') {\n            <svg\n              class=\"nvb-chart__svg\"\n              [attr.width]=\"width()\"\n              [attr.height]=\"height()\"\n              role=\"img\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"ariaSummary()\"\n              (keydown)=\"onPlotKeydown($event)\"\n              (blur)=\"setActive(null)\"\n              (pointerleave)=\"setActive(null)\"\n              [attr.data-testid]=\"tid('plot')\"\n            >\n              <ng-container *ngTemplateOutlet=\"yAxis\"></ng-container>\n              @for (column of columns(); track column.index; let tidIndex4 = $index) {\n                <g [attr.data-testid]=\"tid('mark', tidIndex4)\"\n                  class=\"nvb-chart__mark\"\n                  [class.nvb-chart__mark--active]=\"activeIndex() === column.index\"\n                  (pointerenter)=\"setActive(column.index)\"\n                  (click)=\"onPointClick(column.index, $event)\"\n                >\n                  <rect\n                    class=\"nvb-chart__band\"\n                    [attr.x]=\"column.bandX\"\n                    [attr.y]=\"plot().top\"\n                    [attr.width]=\"column.bandWidth\"\n                    [attr.height]=\"plot().bottom - plot().top\"\n                  ></rect>\n                  <path class=\"nvb-chart__fill\" [attr.d]=\"column.path\"></path>\n                  @if (column.showValue && activeIndex() !== column.index) {\n                    <text\n                      [attr.x]=\"column.x + column.width / 2\"\n                      [attr.y]=\"column.valueY\"\n                      text-anchor=\"middle\"\n                      class=\"nvb-chart__value\"\n                    >\n                      {{ column.valueLabel }}\n                    </text>\n                  }\n                  @if (column.showAxisLabel) {\n                    <text\n                      [attr.x]=\"column.bandX + column.bandWidth / 2\"\n                      [attr.y]=\"plot().bottom + 17\"\n                      text-anchor=\"middle\"\n                      class=\"nvb-chart__category\"\n                    >\n                      {{ column.axisLabel }}\n                    </text>\n                  }\n                </g>\n              }\n              <line\n                class=\"nvb-chart__baseline\"\n                [attr.x1]=\"plot().left\"\n                [attr.x2]=\"plot().right\"\n                [attr.y1]=\"baselineY()\"\n                [attr.y2]=\"baselineY()\"\n              ></line>\n            </svg>\n          }\n\n          @default {\n            <svg\n              class=\"nvb-chart__svg\"\n              [attr.width]=\"width()\"\n              [attr.height]=\"height()\"\n              role=\"img\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"ariaSummary()\"\n              (keydown)=\"onPlotKeydown($event)\"\n              (blur)=\"setActive(null)\"\n              (pointermove)=\"onLinePointerMove($event)\"\n              (pointerleave)=\"setActive(null)\"\n              (click)=\"onLineClick($event)\"\n              [attr.data-testid]=\"tid('plot')\"\n            >\n              <ng-container *ngTemplateOutlet=\"yAxis\"></ng-container>\n              @if (chartType() === 'area') {\n                <path class=\"nvb-chart__area\" [attr.d]=\"areaPath()\"></path>\n              }\n              <path class=\"nvb-chart__line\" [attr.d]=\"linePath()\"></path>\n              @for (mark of lineMarks(); track mark.index) {\n                @if (mark.showAxisLabel) {\n                  <text\n                    [attr.x]=\"mark.x\"\n                    [attr.y]=\"plot().bottom + 17\"\n                    [attr.text-anchor]=\"\n                      $first && lineMarks().length > 1 ? 'start' : $last && lineMarks().length > 1 ? 'end' : 'middle'\n                    \"\n                    class=\"nvb-chart__category\"\n                  >\n                    {{ mark.axisLabel }}\n                  </text>\n                }\n              }\n              <line\n                class=\"nvb-chart__baseline\"\n                [attr.x1]=\"plot().left\"\n                [attr.x2]=\"plot().right\"\n                [attr.y1]=\"baselineY()\"\n                [attr.y2]=\"baselineY()\"\n              ></line>\n              @if (hover(); as active) {\n                <line\n                  class=\"nvb-chart__crosshair\"\n                  [attr.x1]=\"active.x\"\n                  [attr.x2]=\"active.x\"\n                  [attr.y1]=\"plot().top\"\n                  [attr.y2]=\"plot().bottom\"\n                ></line>\n                <circle class=\"nvb-chart__dot\" [attr.cx]=\"active.x\" [attr.cy]=\"active.y\" r=\"4.5\"></circle>\n              } @else if (lastLineMark(); as last) {\n                <circle class=\"nvb-chart__dot\" [attr.cx]=\"last.x\" [attr.cy]=\"last.y\" r=\"4\"></circle>\n                <text\n                  [attr.x]=\"last.x\"\n                  [attr.y]=\"last.y - 11\"\n                  [attr.text-anchor]=\"lineMarks().length > 1 ? 'end' : 'middle'\"\n                  class=\"nvb-chart__value\"\n                >\n                  {{ formatValue(last.point.value) }}\n                </text>\n              }\n            </svg>\n          }\n        }\n\n        @if (hover(); as active) {\n          <div\n            class=\"nvb-chart__tooltip\"\n            role=\"status\"\n            [style.left]=\"tooltipStyle()?.left\"\n            [style.top]=\"tooltipStyle()?.top\"\n            [style.transform]=\"tooltipStyle()?.transform\"\n            [attr.data-testid]=\"tid('tooltip')\"\n          >\n            <span class=\"nvb-chart__tooltip-key\" [style.background]=\"active.color\"></span>\n            <span class=\"nvb-chart__tooltip-value\">{{ formatValue(active.value) }}</span>\n            <span class=\"nvb-chart__tooltip-label\">{{ active.label }}</span>\n            @if (isClickable()) {\n              <span class=\"nvb-chart__tooltip-hint\">{{ 'chart.clickHint' | uiT: 'Click to select' }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <ng-template #yAxis>\n      <svg:g class=\"nvb-chart__axis\">\n        @for (tick of yTicks(); track tick.value) {\n          <svg:line\n            class=\"nvb-chart__grid\"\n            [attr.x1]=\"plot().left\"\n            [attr.x2]=\"plot().right\"\n            [attr.y1]=\"tick.pos\"\n            [attr.y2]=\"tick.pos\"\n          ></svg:line>\n          <svg:text\n            [attr.x]=\"plot().left - 10\"\n            [attr.y]=\"tick.pos\"\n            text-anchor=\"end\"\n            dominant-baseline=\"central\"\n            class=\"nvb-chart__tick\"\n          >\n            {{ tick.label }}\n          </svg:text>\n        }\n      </svg:g>\n    </ng-template>\n\n    @if (points().length) {\n      <table class=\"nvb-chart__sr-table\">\n        <caption>{{ model().title || ('chart.data' | uiT: 'Chart data') }}</caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">{{ 'chart.label' | uiT: 'Label' }}</th>\n            <th scope=\"col\">{{ 'chart.value' | uiT: 'Value' }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (point of points(); track $index) {\n            <tr>\n              <th scope=\"row\">{{ point.label }}</th>\n              <td>{{ formatValue(point.value) }}</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    }\n  </section>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;min-width:0}.nvb-chart{position:relative;width:100%;box-sizing:border-box;padding:16px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-md, var(--nvb-radius-lg));background:var(--nvb-color-neutral-000);display:flex;flex-direction:column;gap:12px;min-width:0}.nvb-chart__title{margin:0;font-size:14px;font-weight:600;line-height:1.4;color:var(--nvb-color-neutral-900)}.nvb-chart__state{display:flex;align-items:center;justify-content:center;color:var(--nvb-color-neutral-500);font-size:13px}.nvb-chart__plot{position:relative;min-width:0}.nvb-chart__svg{display:block;overflow:visible;outline:none;font-family:inherit}.nvb-chart__svg:focus-visible{outline:2px solid var(--nvb-color-primary-500);outline-offset:4px;border-radius:var(--nvb-radius-sm)}.nvb-chart__grid{stroke:var(--nvb-color-neutral-150, var(--nvb-color-neutral-100));stroke-width:1;shape-rendering:crispEdges}.nvb-chart__baseline{stroke:var(--nvb-color-neutral-300);stroke-width:1;shape-rendering:crispEdges}.nvb-chart__tick{font-size:11px;fill:var(--nvb-color-neutral-500);font-variant-numeric:tabular-nums}.nvb-chart__category{font-size:11px;fill:var(--nvb-color-neutral-600)}.nvb-chart__value{font-size:11px;font-weight:600;fill:var(--nvb-color-neutral-700);font-variant-numeric:tabular-nums;pointer-events:none}.nvb-chart__mark{cursor:default}.nvb-chart--clickable .nvb-chart__mark,.nvb-chart--clickable .nvb-chart__slice,.nvb-chart--clickable .nvb-chart__legend-item,.nvb-chart--clickable .nvb-chart__line-hit{cursor:pointer}.nvb-chart__band{fill:transparent}.nvb-chart__mark--active .nvb-chart__band{fill:var(--nvb-color-neutral-050)}.nvb-chart__fill{fill:var(--nvb-chart-single, var(--nvb-color-primary-500));transition:fill .12s ease}.nvb-chart__mark--active .nvb-chart__fill{fill:color-mix(in oklab,var(--nvb-chart-single, var(--nvb-color-primary-500)) 82%,black)}.nvb-chart__line{fill:none;stroke:var(--nvb-chart-single, var(--nvb-color-primary-500));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nvb-chart__area{fill:var(--nvb-chart-single, var(--nvb-color-primary-500));fill-opacity:.1}.nvb-chart__crosshair{stroke:var(--nvb-color-neutral-300);stroke-width:1;shape-rendering:crispEdges;pointer-events:none}.nvb-chart__dot{fill:var(--nvb-chart-single, var(--nvb-color-primary-500));stroke:var(--nvb-color-neutral-000);stroke-width:2;pointer-events:none}.nvb-chart__circular{display:flex;flex-direction:column;align-items:center;gap:16px}.nvb-chart__circular--beside{flex-direction:row;align-items:center;gap:24px}.nvb-chart__svg--circular{flex:0 0 auto}.nvb-chart__slice{stroke:var(--nvb-color-neutral-000);stroke-width:2;stroke-linejoin:round;transition:opacity .12s ease}.nvb-chart__slice--dim{opacity:.35}.nvb-chart__center-value{font-size:22px;font-weight:600;fill:var(--nvb-color-neutral-900)}.nvb-chart__center-label{font-size:12px;fill:var(--nvb-color-neutral-500)}.nvb-chart__legend{flex:1 1 auto;width:100%;min-width:0;margin:0;padding:0;list-style:none;display:flex;flex-direction:column}.nvb-chart__legend-item{display:grid;grid-template-columns:10px minmax(0,1fr) auto 44px;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--nvb-radius-md);font-size:13px;line-height:1.3;color:var(--nvb-color-neutral-700);transition:background-color .12s ease,opacity .12s ease}.nvb-chart__legend-item+.nvb-chart__legend-item{border-top:1px solid var(--nvb-color-neutral-100)}.nvb-chart__legend-item--active{background:var(--nvb-color-neutral-050)}.nvb-chart__legend-item--dim{opacity:.55}.nvb-chart__swatch{width:10px;height:10px;border-radius:var(--nvb-radius-sm)}.nvb-chart__legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-chart__legend-value{font-weight:600;color:var(--nvb-color-neutral-900);font-variant-numeric:tabular-nums}.nvb-chart__legend-share{text-align:right;color:var(--nvb-color-neutral-500);font-variant-numeric:tabular-nums}.nvb-chart__legend--inline{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 16px}.nvb-chart__legend--inline .nvb-chart__legend-item{display:inline-flex;gap:6px;padding:2px 4px;border-top:0}.nvb-chart__legend--inline .nvb-chart__legend-label{max-width:160px}.nvb-chart__legend--inline .nvb-chart__legend-value{display:none}.nvb-chart__tooltip{position:absolute;z-index:20;display:grid;grid-template-columns:12px auto;align-items:center;column-gap:8px;row-gap:2px;padding:8px 10px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-lg);background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-8, 0 4px 16px rgba(0, 0, 0, .12));pointer-events:none;white-space:nowrap}.nvb-chart__tooltip-key{width:12px;height:2px;border-radius:1px}.nvb-chart__tooltip-value{font-size:14px;font-weight:600;color:var(--nvb-color-neutral-900);font-variant-numeric:tabular-nums}.nvb-chart__tooltip-hint{grid-column:2;margin-top:2px;font-size:11px;color:var(--nvb-color-primary-600)}.nvb-chart__center-hint{font-size:11px;fill:var(--nvb-color-primary-600)}.nvb-chart--clickable .nvb-chart__svg{cursor:pointer}.nvb-chart__tooltip-label{grid-column:2;font-size:12px;color:var(--nvb-color-neutral-600)}.nvb-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.nvb-chart__fill,.nvb-chart__slice,.nvb-chart__legend-item{transition:none}}\n"]}]}],propDecorators:{model:[{type:p.Input,args:[{isSignal:true,alias:"model",required:true}]}],plotRef:[{type:p.ViewChild,args:["chartRoot",{isSignal:true}]}]}});export{G as n,x as t};

package/fesm2022/ngxviewbuilder-runtime-checkbox-element-CQzqJqdF.mjs

@@ -0,0 +1 @@
+import{t as v}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{_ as m,f as h,on as d,sn as g}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{Z as f,ot as x}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import{i as p,t as b}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs";import*as o from"@angular/core";import{ChangeDetectionStrategy as y,Component as w,computed as u,inject as r,input as k,signal as l}from"@angular/core";var I=v({CheckboxElement:()=>s});var s=class c{model=k.required(...ngDevMode?[{debugName:"model"}]:[]);dataSourceLoaded=l(false,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);isEditorView=l(d.isEditor(),...ngDevMode?[{debugName:"isEditorView"}]:[]);loadingPlaceholderItems=[0,1,2];dataVersion=l(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);dataService=r(g);eventService=r(m);expressionService=r(h);elementActionService=r(f);visibleOptions=u(()=>{this.dataVersion();return(this.model().options??[]).filter(e=>this.passesOptionFilters(e)&&this.isOptionVisible(e))},...ngDevMode?[{debugName:"visibleOptions"}]:[]);dataSourceLoading=u(()=>Boolean(this.model().dataSource)&&!this.dataSourceLoaded()&&!this.isEditorView(),...ngDevMode?[{debugName:"dataSourceLoading"}]:[]);onDataSourceLoadedHandler=()=>{this.dataSourceLoaded.set(true);this.dataVersion.update(e=>e+1)};onDataValueChangedHandler=()=>{this.dataVersion.update(e=>e+1)};ngOnInit(){const e=!this.model().dataSource||!!this.model().dataSourceLoaded;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(d.isEditor())}ngOnDestroy(){this.model().afterDataSourceLoad.remove(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.remove(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.remove(this.onDataValueChangedHandler)}selectOption(e){if(this.isInteractionLocked())return;const n=Array.isArray(this.model().value)?[...this.model().value]:[];const t=n.findIndex(i=>i===e.value);if(t>=0)n.splice(t,1);else n.push(e.value);this.model().setValue(n,"change");this.runActions("input",e);this.runActions("change",e)}onOptionFocus(e){if(this.isInteractionLocked())return;this.runActions("focus",e)}onOptionBlur(e){if(this.isInteractionLocked())return;this.runActions("blur",e)}valueChecked(e){return Array.isArray(this.model().value)&&this.model().value.includes(e.value)}resolveOptionInputId(e,n){return`${this.slugify(String(this.model()?.dataPath??"").trim()||String(this.model()?.name??"").trim()||"checkbox")}-option-${this.slugify(String(e?.value??n).trim()||String(n+1))}`}resolveOptionTestId(e,n){return`nvb-${p(String(this.model()?.dataPath??"").trim()||String(this.model()?.name??"").trim()||"checkbox")}-checkbox-${p(String(e?.value??n).trim()||String(n+1))}`}resolveOptionAriaLabel(e,n){const t=String(e?.label??"").trim();if(t)return t;return`Option ${n+1}`}isOptionVisible(e){const n=String(e?.visibleIf??"").trim();if(!n)return true;try{const t=n.replace(/{/g,"").replace(/}/g,"").trim();if(!t)return true;const i=this.expressionService.applyContextToExpression(t,this.model());return!!this.expressionService.runPropertyConditionSync(this.dataService.getData(),i)}catch{return true}}passesOptionFilters(e){const n=String(this.model().filterOptionsBy??"").trim()||String(this.model().dataSource?.filterOptionsBy??"").trim();const t=String(this.model().filterIfEqual??"").trim();const i=String(this.model().filterIfNotEqual??"").trim();if(!n&&!t&&!i)return true;const a=this.dataService.getData()??{};return x([e],n,a,{valuePath:"value",filterIfEqual:t,filterIfNotEqual:i}).length>0}runActions(e,n){const t=Array.isArray(this.model().value)?[...this.model().value]:[];const i=String(this.model().name??"").trim();const a={value:t,item:n??null,row:null};if(i)a[i]=t;this.elementActionService.runActions(this.model(),this.model().events??[],e,a)}isInteractionLocked(){const e=this.model();if(!e)return false;if(Boolean(e["__pfInteractionLocked"]))return true;return this.dataSourceLoading()||Boolean(e.disabled)||Boolean(e.readOnly)}slugify(e){return String(e??"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+/,"").replace(/-+$/,"").slice(0,50)}static ɵfac=o.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:o,type:c,deps:[],target:o.ɵɵFactoryTarget.Component});static ɵcmp=o.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:c,isStandalone:true,selector:"checkbox-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:o,template:'<element-wrapper\n  [model]="model()"\n  [labelForInput]="null"\n  groupRole="group"\n  #fieldWrapper="elementWrapper"\n>\n  @if (model().dataSource && !dataSourceLoaded()) {\n    @if (isEditorView()) {\n      <div class="nvb-empty-element-wrapper">\n        <ul class="nvb-empty-row" [class.nvb-row]="model().showInline" [class.nvb-column]="!model().showInline">\n          <li>\n            <input type="checkbox" class="nvb-control__checkbox-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n          <li>\n            <input type="checkbox" class="nvb-control__checkbox-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n          <li>\n            <input type="checkbox" class="nvb-control__checkbox-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n        </ul>\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      <ul\n        [id]="fieldWrapper.controlId()"\n        class="nvb-choice-list nvb-choice-list--loading"\n        [class.nvb-choice-list--fit-content]="model().fitContent"\n        [class.nvb-row]="model().showInline"\n        [class.nvb-column]="!model().showInline"\n        [attr.aria-describedby]="fieldWrapper.describedByIds()"\n        aria-busy="true"\n        aria-live="polite"\n        role="status"\n      >\n        @for (placeholder of loadingPlaceholderItems; track placeholder) {\n          <li class="nvb-choice-loading-item" aria-hidden="true">\n            <span class="nvb-choice-loading-box"></span>\n            <span class="nvb-choice-loading-line"></span>\n          </li>\n        }\n        <span class="nvb-sr-only">Loading checkbox options...</span>\n      </ul>\n    }\n  } @else {\n    <ul\n      [id]="fieldWrapper.controlId()"\n      class="nvb-choice-list"\n      [class.nvb-choice-list--fit-content]="model().fitContent"\n      [class.nvb-row]="model().showInline"\n      [class.nvb-column]="!this.model().showInline"\n      [attr.aria-describedby]="fieldWrapper.describedByIds()"\n    >\n      @for (option of visibleOptions(); track option.value ?? $index; let optionIndex = $index) {\n        <li class="nvb-input-wrapper">\n          <input\n            type="checkbox"\n            [id]="resolveOptionInputId(option, optionIndex)"\n            [attr.name]="model().name"\n            [attr.value]="option.value"\n            [attr.data-testid]="resolveOptionTestId(option, optionIndex)"\n            [attr.aria-describedby]="fieldWrapper.describedByIds()"\n            class="nvb-control__checkbox-input"\n            [disabled]="model().disabled"\n            (click)="selectOption(option)"\n            (focus)="onOptionFocus(option)"\n            (blur)="onOptionBlur(option)"\n            [checked]="valueChecked(option)"\n          />\n          <label [for]="resolveOptionInputId(option, optionIndex)">{{ option.label }}</label>\n        </li>\n      }\n    </ul>\n  }\n</element-wrapper>\n',styles:[".nvb-input-wrapper{display:flex;gap:var(--nvb-space-3);justify-content:start;align-items:center;font-size:14px;line-height:20px}.nvb-input-wrapper .nvb-control__checkbox-input:disabled{cursor:not-allowed;opacity:.55}.nvb-input-wrapper .nvb-control__checkbox-input:disabled+label{color:var(--nvb-color-neutral-500)}.nvb-choice-list,ul{flex-wrap:wrap;display:flex;gap:var(--nvb-space-3);padding-top:0;margin:0}.nvb-row{flex-direction:row}.nvb-column{flex-direction:column}.nvb-choice-list--loading{width:100%}.nvb-choice-list--fit-content{width:fit-content;max-width:100%}.nvb-choice-loading-item{display:inline-flex;align-items:center;gap:var(--nvb-space-3);min-height:24px;min-width:min(180px,100%)}.nvb-column .nvb-choice-loading-item{width:100%}.nvb-choice-loading-box{width:16px;height:16px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-xs, var(--nvb-radius-sm));background:var(--nvb-color-neutral-000);flex:0 0 auto}.nvb-choice-loading-line{border-radius:var(--nvb-radius-full);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;height:12px;width:100%;max-width:132px;animation:checkbox-choice-shimmer 1.35s ease-in-out infinite}@keyframes checkbox-choice-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.nvb-meta-info{display:flex;flex-direction:column;gap:2px;font-size:small}.nvb-meta-info-wrapper{display:flex;gap:var(--nvb-space-7)}.nvb-empty-row{display:flex;gap:var(--nvb-space-3)}.nvb-empty-row li{display:flex;gap:var(--nvb-space-2);justify-content:start;align-items:center;font-size:14px;flex-grow:1}.nvb-empty-row__blank{border-color:var(--nvb-color-neutral-050);width:100%}.nvb-empty-row__title{color:var(--nvb-color-neutral-500)}.nvb-element-title{color:var(--nvb-color-neutral-400);display:flex;align-items:center;gap:var(--nvb-space-2)}.nvb-element-title span{font-size:20px}.nvb-empty-element-wrapper{display:flex;flex-direction:column;gap:var(--nvb-space-3)}\n"],dependencies:[{kind:"component",type:b,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]}],changeDetection:o.ChangeDetectionStrategy.OnPush})};o.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:o,type:s,decorators:[{type:w,args:[{selector:"checkbox-element",changeDetection:y.OnPush,imports:[b],template:'<element-wrapper\n  [model]="model()"\n  [labelForInput]="null"\n  groupRole="group"\n  #fieldWrapper="elementWrapper"\n>\n  @if (model().dataSource && !dataSourceLoaded()) {\n    @if (isEditorView()) {\n      <div class="nvb-empty-element-wrapper">\n        <ul class="nvb-empty-row" [class.nvb-row]="model().showInline" [class.nvb-column]="!model().showInline">\n          <li>\n            <input type="checkbox" class="nvb-control__checkbox-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n          <li>\n            <input type="checkbox" class="nvb-control__checkbox-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n          <li>\n            <input type="checkbox" class="nvb-control__checkbox-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n        </ul>\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      <ul\n        [id]="fieldWrapper.controlId()"\n        class="nvb-choice-list nvb-choice-list--loading"\n        [class.nvb-choice-list--fit-content]="model().fitContent"\n        [class.nvb-row]="model().showInline"\n        [class.nvb-column]="!model().showInline"\n        [attr.aria-describedby]="fieldWrapper.describedByIds()"\n        aria-busy="true"\n        aria-live="polite"\n        role="status"\n      >\n        @for (placeholder of loadingPlaceholderItems; track placeholder) {\n          <li class="nvb-choice-loading-item" aria-hidden="true">\n            <span class="nvb-choice-loading-box"></span>\n            <span class="nvb-choice-loading-line"></span>\n          </li>\n        }\n        <span class="nvb-sr-only">Loading checkbox options...</span>\n      </ul>\n    }\n  } @else {\n    <ul\n      [id]="fieldWrapper.controlId()"\n      class="nvb-choice-list"\n      [class.nvb-choice-list--fit-content]="model().fitContent"\n      [class.nvb-row]="model().showInline"\n      [class.nvb-column]="!this.model().showInline"\n      [attr.aria-describedby]="fieldWrapper.describedByIds()"\n    >\n      @for (option of visibleOptions(); track option.value ?? $index; let optionIndex = $index) {\n        <li class="nvb-input-wrapper">\n          <input\n            type="checkbox"\n            [id]="resolveOptionInputId(option, optionIndex)"\n            [attr.name]="model().name"\n            [attr.value]="option.value"\n            [attr.data-testid]="resolveOptionTestId(option, optionIndex)"\n            [attr.aria-describedby]="fieldWrapper.describedByIds()"\n            class="nvb-control__checkbox-input"\n            [disabled]="model().disabled"\n            (click)="selectOption(option)"\n            (focus)="onOptionFocus(option)"\n            (blur)="onOptionBlur(option)"\n            [checked]="valueChecked(option)"\n          />\n          <label [for]="resolveOptionInputId(option, optionIndex)">{{ option.label }}</label>\n        </li>\n      }\n    </ul>\n  }\n</element-wrapper>\n',styles:[".nvb-input-wrapper{display:flex;gap:var(--nvb-space-3);justify-content:start;align-items:center;font-size:14px;line-height:20px}.nvb-input-wrapper .nvb-control__checkbox-input:disabled{cursor:not-allowed;opacity:.55}.nvb-input-wrapper .nvb-control__checkbox-input:disabled+label{color:var(--nvb-color-neutral-500)}.nvb-choice-list,ul{flex-wrap:wrap;display:flex;gap:var(--nvb-space-3);padding-top:0;margin:0}.nvb-row{flex-direction:row}.nvb-column{flex-direction:column}.nvb-choice-list--loading{width:100%}.nvb-choice-list--fit-content{width:fit-content;max-width:100%}.nvb-choice-loading-item{display:inline-flex;align-items:center;gap:var(--nvb-space-3);min-height:24px;min-width:min(180px,100%)}.nvb-column .nvb-choice-loading-item{width:100%}.nvb-choice-loading-box{width:16px;height:16px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-xs, var(--nvb-radius-sm));background:var(--nvb-color-neutral-000);flex:0 0 auto}.nvb-choice-loading-line{border-radius:var(--nvb-radius-full);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;height:12px;width:100%;max-width:132px;animation:checkbox-choice-shimmer 1.35s ease-in-out infinite}@keyframes checkbox-choice-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.nvb-meta-info{display:flex;flex-direction:column;gap:2px;font-size:small}.nvb-meta-info-wrapper{display:flex;gap:var(--nvb-space-7)}.nvb-empty-row{display:flex;gap:var(--nvb-space-3)}.nvb-empty-row li{display:flex;gap:var(--nvb-space-2);justify-content:start;align-items:center;font-size:14px;flex-grow:1}.nvb-empty-row__blank{border-color:var(--nvb-color-neutral-050);width:100%}.nvb-empty-row__title{color:var(--nvb-color-neutral-500)}.nvb-element-title{color:var(--nvb-color-neutral-400);display:flex;align-items:center;gap:var(--nvb-space-2)}.nvb-element-title span{font-size:20px}.nvb-empty-element-wrapper{display:flex;flex-direction:column;gap:var(--nvb-space-3)}\n"]}]}],propDecorators:{model:[{type:o.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{I as n,s as t};