@ngxviewbuilder/runtime 0.12.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngxviewbuilder/runtime",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Native Angular runtime for NGX View Builder: renders forms, dashboards, data tables and guided flows defined as JSON.",
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://ngxviewbuilder.io",

package/types/ngxviewbuilder-runtime.d.ts

@@ -8658,6 +8658,8 @@ export declare class NvbSelect implements ControlValueAccessor, AfterViewInit, O
   private optionsObserver;
   private removeGlobalListeners;
   private forwardedHostClasses;
+  /** Host attributes mirrored onto each inner element, so only those are ever taken back. */
+  private readonly forwardedHostAttributes;
   private internalValue;
   private filterMode;
   private filterThresholdValue;
@@ -8705,6 +8707,12 @@ export declare class NvbSelect implements ControlValueAccessor, AfterViewInit, O
   private syncProjectedState;
   private forwardHostClasses;
   private shouldForwardHostClass;
+  /**
+   * Mirrors the host's attributes (spellcheck, aria-label, the parent's `_ngcontent` scope
+   * so its styles reach the trigger, ...) onto an inner element. Only what was forwarded
+   * before is ever removed: the element's own attributes (`data-testid`, `aria-haspopup`,
+   * `aria-expanded`, `tabindex`, `aria-hidden`) stay, which a test or a screen reader needs.
+   */
   private forwardHostAttributesTo;
   private syncNativeValue;
   private syncDisabledState;
@@ -8785,6 +8793,11 @@ export declare class ElementContentRow implements OnInit, OnDestroy {
   model: import("@angular/core").InputSignal<RowModel>;
   rows: import("@angular/core").InputSignal<RowModel[]>;
   index: import("@angular/core").InputSignal<number>;
+  /**
+   * The row's test id token: the name of its first element, which stays the same across
+   * reloads (the row's uuid is drawn fresh every time a view is opened).
+   */
+  rowTestToken(): string;
   isTemplateElement: import("@angular/core").InputSignal<boolean>;
   rowLength: import("@angular/core").InputSignal<number>;
   parentPath: import("@angular/core").InputSignal<string[]>;
@@ -10099,6 +10112,15 @@ export declare class DomInstrumentationService {
   private ensureUniqueDataTestIds;
   private instrumentImages;
   private instrumentInputs;
+  /**
+   * Only a control that has no name of its own gets a generated aria-label. An aria-label
+   * replaces the name a screen reader would read, so text inside a button, a <label> tied
+   * to an input or a hidden helper element must be left alone, and a container that only
+   * takes programmatic focus (tabindex="-1") is not a control at all.
+   */
+  private needsAccessibleName;
+  /** Text a screen reader would read from the node: aria-hidden parts left out. */
+  private readableText;
   private resolveAriaLabel;
   private buildTestId;
   private buildDomId;
@@ -10636,6 +10658,13 @@ export declare function nextNumberedName(base: string, reserved: Set<string>, st
 export declare function nextCopyName(original: string, reserved: Set<string>): string;
 /** Whether `name` still looks generated for `type` (text3), or is a legacy `el7`. */
 export declare function isGeneratedElementName(name: string, type: string): boolean;
+/**
+ * Element types that show their own content (a caption, a title, a picture, a chart) and
+ * have no use for the field label row the wrapper draws above an element. Added without a
+ * label (from the library or by an AI client), they get none, instead of their type or
+ * technical name in bold above them.
+ */
+export declare const NO_LABEL_ELEMENT_TYPES: Set<string>;
 export interface IResponsiveViewportState {
   isMobile?: boolean;
   isTablet?: boolean;

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

@@ -1 +0,0 @@
-import{t as v}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as m,d as h,g,in as d}from"./ngxviewbuilder-runtime-dynamic-text.pipe-DJNHX-1z.mjs";import{ft as f,i as p,rt as x,t as b}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.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(m);eventService=r(g);expressionService=r(h);elementActionService=r(x);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 f([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};