@limetech/lime-elements 39.29.3 → 39.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/lime-elements.cjs.js +1 -1
  3. package/dist/cjs/limel-breadcrumbs_8.cjs.entry.js +7 -1
  4. package/dist/cjs/limel-form.cjs.entry.js +100 -24
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/collection/components/form/adapters/widget-adapter.js +3 -1
  7. package/dist/collection/components/form/fields/array-field.js +7 -1
  8. package/dist/collection/components/form/fields/schema-field.js +3 -1
  9. package/dist/collection/components/form/form.js +30 -1
  10. package/dist/collection/components/form/form.test-schemas.js +88 -0
  11. package/dist/collection/components/form/templates/array-context.js +11 -0
  12. package/dist/collection/components/form/templates/array-field-collapsible-item.js +4 -2
  13. package/dist/collection/components/form/templates/array-field-item.js +4 -1
  14. package/dist/collection/components/form/templates/common.js +22 -0
  15. package/dist/collection/components/form/templates/grid-layout.js +3 -0
  16. package/dist/collection/components/form/templates/object-field.js +29 -12
  17. package/dist/collection/components/form/templates/row-layout.js +4 -2
  18. package/dist/collection/components/form/validation-display.js +7 -6
  19. package/dist/collection/components/input-field/input-field.js +7 -1
  20. package/dist/esm/lime-elements.js +1 -1
  21. package/dist/esm/limel-breadcrumbs_8.entry.js +7 -1
  22. package/dist/esm/limel-form.entry.js +100 -24
  23. package/dist/esm/loader.js +1 -1
  24. package/dist/lime-elements/lime-elements.esm.js +1 -1
  25. package/dist/lime-elements/{p-263bfd74.entry.js → p-9a08f55a.entry.js} +2 -2
  26. package/dist/lime-elements/{p-09466969.entry.js → p-e5e8a734.entry.js} +1 -1
  27. package/dist/types/components/form/form.d.ts +8 -0
  28. package/dist/types/components/form/form.test-schemas.d.ts +5 -0
  29. package/dist/types/components/form/templates/array-context.d.ts +12 -0
  30. package/dist/types/components/form/templates/array-field-collapsible-item.d.ts +14 -1
  31. package/dist/types/components/form/templates/common.d.ts +13 -0
  32. package/dist/types/components/form/templates/grid-layout.d.ts +2 -0
  33. package/dist/types/components/form/templates/object-field.d.ts +8 -0
  34. package/dist/types/components/form/templates/row-layout.d.ts +8 -3
  35. package/dist/types/components/form/validation-display.d.ts +3 -5
  36. package/dist/types/components.d.ts +15 -0
  37. package/package.json +12 -1
@@ -1,4 +1,4 @@
1
- import{r as t,c as e,h as i,a as l,H as n}from"./p-DBTJNfo7.js";import{m as r,r as o}from"./p-BgTwPGeH.js";import{c as d}from"./p-JbKhhoXs.js";import{g as a,b as s}from"./p-CgNJbSP4.js";import{T as c,A as m,b as h,E as f,a as u,S as x,c as p,d as b}from"./p-rI0IeKpx.js";import{b as g,a as v,g as _}from"./p-5KsJICvh.js";import{g as y}from"./p-Dnt5w_Bp.js";import{d as w}from"./p-BviYUVSD.js";import{M as k}from"./p-DZkKQUDM.js";import{_ as I,a as T,M as E,m as A,d as C,c as O,b as z}from"./p-ChRGk668.js";import{f as S,z as R}from"./p-D0F7gOYG.js";import{h as L,t as D,n as j}from"./p-BxrRWYts.js";import{i as F}from"./p-BcJ-TDVt.js";import{M}from"./p-BN1-aIOw.js";import{i as N}from"./p-B9Ofc5RB.js";import"./p-BJQylLSL.js";import"./p-D6dCQvwl.js";import"./p-BOEi1C7r.js";import"./p-oiMYqRQ0.js";import"./p-C9yTLqR8.js";import"./p-ByzvFNMm.js";import"./p-9W8bTt2G.js";import"./p-DbBZn7JO.js";import"./p-CZ30nDJE.js";const B=class{constructor(l){t(this,l),this.select=e(this,"select"),this.divider="›",this.renderSteps=()=>{const t=this.items.slice(0,-1);return this.areItemsLinks(this.items)?t.map(this.renderAsLink):t.map(this.renderAsButton)},this.renderAsButton=t=>{const e=d();return[i("button",{role:"listitem",id:e,class:"step",onClick:this.handleClick(t)},this.renderIcon(t),this.renderLabel(t)),this.renderTooltip(t,e)]},this.renderAsLink=t=>{const e=d();return[i("a",{role:"listitem",id:e,class:"step",href:t.link.href,title:t.link.title},this.renderIcon(t),this.renderLabel(t)),this.renderTooltip(t,e)]},this.renderLastStep=()=>{const t=this.items.slice(-1);return i("li",{class:"last step",tabindex:"-1","aria-current":this.areItemsLinks(this.items)?"page":"step"},this.renderIcon(t[0]),i("span",{class:"text"},t[0].text))},this.renderIcon=t=>{const e=a(t.icon),l=s(t.icon);if(e)return i("limel-icon",{style:{color:`${l}`},name:e})},this.renderLabel=t=>{if("icon-only"!==t.type)return i("span",{class:"text"},t.text)},this.renderTooltip=(t,e)=>{if("icon-only"===t.type)return i("limel-tooltip",{elementId:e,label:t.text})},this.areItemsLinks=t=>t.some((t=>"link"in t)),this.handleClick=t=>e=>{e.stopPropagation(),this.select.emit(t)}}render(){return i("ol",{key:"8d25beefb4884a5ca5f20685d93f26926811ddc3",role:"navigation","aria-label":"Breadcrumb",style:{"--limel-breadcrumbs-divider":`'${this.divider}'`}},this.renderSteps(),this.renderLastStep())}componentWillLoad(){r(this.host)}disconnectedCallback(){o(this.host)}get host(){return l(this)}};B.style='@charset "UTF-8";:host(limel-breadcrumbs){--limel-breadcrumbs-item-height:1.5rem;--limel-breadcrumbs-gap:0.75rem;--limel-breadcrumbs-gap:0.75rem;--limel-breadcrumbs-item-text-color:var( --breadcrumbs-item-text-color, rgb(var(--contrast-1500)) );--limel-overflow-mask-horizontal:linear-gradient( to right, transparent 0%, black calc(0% + var(--limel-left-edge-fade-width, 1rem)), black calc(100% - var(--limel-right-edge-fade-width, 1rem)), transparent 100% );-webkit-mask-image:var(--limel-overflow-mask-horizontal);mask-image:var(--limel-overflow-mask-horizontal);padding-left:var(--limel-left-edge-fade-width, 1rem);padding-right:var(--limel-right-edge-fade-width, 1rem);--limel-left-edge-fade-width:0.5rem;--limel-right-edge-fade-width:0.5rem}ol,li,.step{all:unset}*{box-sizing:border-box}ol{padding:0.5rem;gap:var(--limel-breadcrumbs-gap)}.step{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:var(--breadcrumbs-item-max-width, 10rem);height:var(--limel-breadcrumbs-item-height);color:var(--limel-breadcrumbs-item-text-color);border-radius:100vw;font-size:var(--limel-theme-default-font-size);padding:0 0.25rem}.step:not(:has(.text)){padding:0 0.125rem}.step:not(.last):focus{outline:none}.step:not(.last):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.step:not(.last):after{content:var(--limel-breadcrumbs-divider);display:flex;align-items:center;justify-content:center;width:var(--limel-breadcrumbs-gap);position:absolute;top:0;right:calc(var(--limel-breadcrumbs-gap) * -1);bottom:0;left:auto;text-align:center}a.step{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--limel-breadcrumbs-item-text-color)}a.step:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:"";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.step:hover{color:rgb(var(--color-blue-default))}a.step:hover:before{opacity:0.3;transform:scale(1)}button.step:not(.last){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-breadcrumbs-item-text-color);background-color:transparent}button.step:not(.last):hover,button.step:not(.last):focus,button.step:not(.last):focus-visible{will-change:color, background-color, box-shadow, transform}button.step:not(.last):hover,button.step:not(.last):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button.step:not(.last):hover{box-shadow:var(--button-shadow-hovered)}button.step:not(.last):active{--limel-clickable-transform-timing-function:cubic-bezier( 0.83, -0.15, 0.49, 1.16 );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.step:not(.last):hover,button.step:not(.last):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}limel-icon{flex-shrink:0;width:calc(var(--limel-breadcrumbs-item-height) - 0.25rem);height:calc(var(--limel-breadcrumbs-item-height) - 0.25rem)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}.last{opacity:0.7}:host(limel-breadcrumbs){box-sizing:border-box;display:flex;width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}:host(limel-breadcrumbs)::-webkit-scrollbar{display:none}:host(limel-breadcrumbs){direction:rtl}ol{display:flex;flex-direction:row-reverse;justify-content:flex-end;margin-right:auto}.step{direction:ltr}';const Y=class{constructor(l){t(this,l),this.change=e(this,"change"),this.action=e(this,"action"),this.disabled=!1,this.readonly=!1,this.invalid=!1,this.required=!1,this.type="text",this.formatNumber=!0,this.step="any",this.completions=[],this.showLink=!1,this.locale=y.defaultLocale,this.isFocused=!1,this.wasInvalid=!1,this.showCompletions=!1,this.completionsList=[],this.changeWaiting=!1,this.initialize=()=>{const t=this.limelInputField.shadowRoot.querySelector(".mdc-text-field");t&&(this.mdcTextField=new k(t),this.value&&(this.mdcTextField.value=this.value),this.invalid&&(this.mdcTextField.valid=!1),this.mapCompletions(),window.addEventListener("resize",this.layout,{passive:!0}),this.limelInputField.addEventListener("focus",this.setFocus))},this.mapCompletions=()=>{this.completionsList=[...this.completions].map((t=>({text:t})))},this.setFocus=()=>{this.mdcTextField.focus()},this.getContainerClassList=()=>{const t={"mdc-text-field":!0,"mdc-text-field--outlined":!0,"mdc-text-field--invalid":this.isInvalid(),"mdc-text-field--disabled":this.disabled||this.readonly,"lime-text-field--readonly":this.readonly,"mdc-text-field--required":this.required,"lime-text-field--empty":this.isEmpty(),"lime-has-prefix":this.hasPrefix(),"lime-has-suffix":this.hasSuffix()};return"textarea"===this.type?t["mdc-text-field--textarea"]=!0:(t["mdc-text-field--with-leading-icon"]=!!this.leadingIcon,t["mdc-text-field--with-trailing-icon"]=!!this.getTrailingIcon()),t},this.isEmpty=()=>{var t;return!("number"===this.type&&(null===(t=this.inputElement)||void 0===t?void 0:t.validity.badInput)||this.getCurrentValue())},this.getCurrentValue=()=>this.changeWaiting&&this.inputElement?this.inputElement.value:this.value,this.renderInput=t=>{if("textarea"!==this.type)return i("input",Object.assign({},t,{type:"urlAsText"===this.type?"text":this.type,pattern:this.pattern,onWheel:this.handleWheel,onKeyDown:this.onKeyDown,placeholder:this.placeholder}))},this.renderTextarea=t=>{if("textarea"===this.type)return i("span",{class:"mdc-text-field__resizer"},i("textarea",Object.assign({},t,{placeholder:this.placeholder})))},this.layout=()=>{var t;null===(t=this.mdcTextField)||void 0===t||t.layout(),this.restyleCompletionsDropDown()},this.restyleCompletionsDropDown=w((()=>{const t=this.showCompletions;this.showCompletions=!1,requestAnimationFrame((()=>{this.showCompletions=t}))}),100),this.getAdditionalProps=()=>{const t={};return"number"===this.type&&(t.step=this.step),"number"===this.type&&Number.isInteger(this.min)&&(t.min=this.min),"number"===this.type&&Number.isInteger(this.max)&&(t.max=this.max),this.minlength&&(t.minlength=this.minlength),this.maxlength&&(t.maxlength=this.maxlength),t},this.onFocus=()=>{this.isFocused=!0,this.showCompletions=!0},this.onBlur=()=>{this.isFocused=!1,this.validate(),this.changeEmitter.flush()},this.hasHelperText=()=>{var t;return!!(null!==(t=this.helperText)&&void 0!==t?t:this.validationMessage)},this.hasHelperLine=()=>this.maxlength>0||this.hasHelperText(),this.renderHelperLine=()=>{var t;const e=(this.getCurrentValue()||"").length;if(this.hasHelperLine())return i("limel-helper-line",{helperTextId:this.helperTextId,helperText:null!==(t=this.helperText)&&void 0!==t?t:this.validationMessage,length:e,maxLength:this.maxlength,invalid:this.isInvalid()})},this.renderSuffix=()=>{if(this.hasSuffix()&&"textarea"!==this.type)return i("span",{class:{"mdc-text-field__affix":!0,"mdc-text-field__affix--suffix":!0}},this.suffix)},this.hasSuffix=()=>null!=this.suffix,this.renderPrefix=()=>{if(this.hasPrefix()&&"textarea"!==this.type)return i("span",{class:{"mdc-text-field__affix":!0,"mdc-text-field__affix--prefix":!0}},this.prefix)},this.hasPrefix=()=>null!=this.prefix,this.isInvalid=()=>!this.readonly&&(!!this.invalid||this.wasInvalid),this.validate=()=>{this.readonly||this.invalid?this.wasInvalid=!1:this.inputElement&&(this.wasInvalid=!this.inputElement.checkValidity())},this.setInputElement=t=>{t&&(this.inputElement=t)},this.renderLeadingIcon=()=>{if("textarea"!==this.type)return this.leadingIcon?i("i",{class:"material-icons mdc-text-field__icon mdc-text-field__icon--leading"},i("limel-icon",{name:this.leadingIcon})):void 0},this.renderTrailingLinkOrButton=()=>{if("textarea"===this.type)return;const t=this.getTrailingIcon();return!this.isInvalid()&&this.hasLink()?this.renderLinkIcon(this.getLink(),t):t?this.renderTrailingIcon(t):void 0},this.hasLink=()=>this.showLink&&["email","tel","url","urlAsText"].includes(this.type),this.getLink=()=>{const t={href:""};switch(this.type){case"email":t.href=`mailto:${this.value}`;break;case"tel":t.href=`tel:${this.value}`;break;default:t.href=g(this.value),t.target=v(this.value),t.rel=_(t.target)}return t},this.renderLinkIcon=(t,e)=>i("a",Object.assign({},t,{class:"material-icons mdc-text-field__icon lime-trailing-icon-for-link",tabindex:this.disabled||this.isEmpty()?"-1":"0",role:"button"}),i("limel-icon",{name:e})),this.renderTrailingIcon=t=>this.isInvalid()?i("i",{key:"invalid",class:"material-icons mdc-text-field__icon invalid-icon"},i("limel-icon",{name:t})):i("i",{key:"action",class:"material-icons mdc-text-field__icon mdc-text-field__icon--trailing",tabIndex:0,role:"button",onKeyDown:this.handleIconKeyPress,onClick:this.handleIconClick},i("limel-icon",{name:t})),this.getTrailingIcon=()=>this.isInvalid()?"high_importance":this.trailingIcon?this.trailingIcon:this.showLink&&"email"===this.type?"filled_message":this.showLink&&"tel"===this.type?"phone":!this.showLink||"url"!==this.type&&"urlAsText"!==this.type?void 0:"external_link",this.renderFormattedNumber=()=>{if("number"!==this.type)return;let t=this.value;return this.formatNumber&&this.value&&(t=new Intl.NumberFormat(this.locale).format(Number(this.value)),"NaN"===t)?void 0:i("span",{class:"lime-formatted-input lime-looks-like-input-value"},t)},this.onKeyDown=t=>{this.showCompletions=!0;const e=t.key===c&&!t.altKey&&!t.metaKey&&!t.shiftKey,i=t.key===m,l=t.key===h;if(t.key===c&&t.shiftKey&&(this.showCompletions=!1),!e&&!i&&!l)return;const n=document.querySelector(` #${this.portalId} limel-list`);n&&(t.preventDefault(),e||l?n.shadowRoot.querySelector(".mdc-deprecated-list-item:first-child").focus():i&&n.shadowRoot.querySelector(".mdc-deprecated-list-item:last-child").focus())},this.handleCompletionChange=t=>{t.stopPropagation(),t.detail&&(this.showCompletions=!1,this.changeEmitter(t.detail.text),this.changeEmitter.flush())},this.renderAutocompleteList=()=>{if("textarea"===this.type||0===this.completions.length)return;const t=getComputedStyle(this.limelInputField).getPropertyValue("--dropdown-z-index");return i("limel-portal",{visible:this.showCompletions,containerId:this.portalId,inheritParentWidth:!0,containerStyle:{"z-index":t}},i("limel-menu-surface",{open:this.showCompletions,allowClicksElement:this.limelInputField,style:{"--menu-surface-width":"100%","max-height":"inherit",display:"flex"},onDismiss:this.handleCloseMenu},this.renderListResult()))},this.renderListResult=()=>{const t=this.filterCompletions(this.getCurrentValue());return t&&0!==t.length?i("limel-list",{onChange:this.handleCompletionChange,onKeyDown:this.handleKeyDownInDropdown,type:"selectable",items:t}):null},this.handleKeyDownInDropdown=t=>{[c,f,u].includes(t.key)&&this.setFocus()},this.handleCloseMenu=()=>{this.showCompletions=!1},this.filterCompletions=t=>t?this.completionsList.filter((e=>e.text.toLowerCase().includes(t.toLowerCase()))):this.completionsList,this.handleInput=t=>{t.stopPropagation();let e=t.target.value;if("number"===this.type){if(!e&&t.data)return void t.stopPropagation();e&&(e=Number(e))}this.changeWaiting=!0,this.changeEmitter(e)},this.changeEmitter=w((t=>{this.change.emit(t),this.changeWaiting=!1}),300),this.handleChange=t=>{t.stopPropagation(),this.changeEmitter.flush()},this.handleIconClick=()=>{this.action.emit()},this.handleIconKeyPress=t=>{(t.key===x||t.key===u)&&this.action.emit()},this.handleWheel=()=>{},this.portalId=d(),this.helperTextId=d(),this.labelId=d()}connectedCallback(){this.initialize()}componentDidLoad(){this.initialize()}disconnectedCallback(){this.mdcTextField&&this.mdcTextField.destroy(),this.restyleCompletionsDropDown.cancel(),window.removeEventListener("resize",this.layout),this.limelInputField.removeEventListener("focus",this.setFocus)}componentDidUpdate(){this.invalid&&(this.mdcTextField.valid=!1),this.mdcTextField.disabled=this.disabled||this.readonly}async getSelectionStart(){var t,e;try{return null!==(e=null===(t=this.inputElement)||void 0===t?void 0:t.selectionStart)&&void 0!==e?e:null}catch(t){return null}}async getSelectionEnd(){var t,e;try{return null!==(e=null===(t=this.inputElement)||void 0===t?void 0:t.selectionEnd)&&void 0!==e?e:null}catch(t){return null}}async getSelectionDirection(){var t,e;try{return null!==(e=null===(t=this.inputElement)||void 0===t?void 0:t.selectionDirection)&&void 0!==e?e:null}catch(t){return null}}render(){const t=this.getAdditionalProps();t["aria-labelledby"]=this.labelId,t.class="mdc-text-field__input",t.ref=this.setInputElement,t.onInput=this.handleInput,t.onChange=this.handleChange,t.onFocus=this.onFocus,t.onBlur=this.onBlur,t.required=this.required,t.readonly=this.readonly,t.disabled=this.disabled||this.readonly;let e="";return this.hasHelperText()&&(e+=this.helperTextId,t["aria-describedby"]=this.helperTextId),this.renderAutocompleteList()&&(e&&(e+=" "),e+=this.portalId),e&&(t["aria-controls"]=e),i(n,{key:"34d09f71861157cae3b4caa923c0c6c717f746a0"},i("limel-notched-outline",{key:"6184e68299c829dab64010a244801df550278f1c",labelId:this.labelId,label:this.label,required:this.required,invalid:this.invalid||this.isInvalid(),disabled:this.disabled,readonly:this.readonly,hasValue:!!this.value,hasLeadingIcon:!!this.leadingIcon},i("label",{key:"6edebc70941a0a6d3867beb4398a2dd9ccbace03",slot:"content",class:this.getContainerClassList()},this.renderLeadingIcon(),this.renderPrefix(),this.renderFormattedNumber(),this.renderInput(t),this.renderSuffix(),this.renderTextarea(t),this.renderTrailingLinkOrButton())),this.renderHelperLine(),this.renderAutocompleteList())}valueWatcher(t){this.mdcTextField&&(this.changeWaiting||"number"===this.type&&this.isFocused&&Number(t)===Number(this.mdcTextField.value)||(t!==this.mdcTextField.value&&(this.mdcTextField.value=t||""),this.wasInvalid&&this.validate()))}completionsWatcher(){this.mapCompletions()}get validationMessage(){var t;return this.isInvalid()&&!this.invalid&&(null===(t=this.inputElement)||void 0===t?void 0:t.validationMessage)||""}static get delegatesFocus(){return!0}get limelInputField(){return l(this)}static get watchers(){return{value:[{valueWatcher:0}],completions:[{completionsWatcher:0}]}}};
1
+ import{r as t,c as e,h as i,a as l,H as n}from"./p-DBTJNfo7.js";import{m as r,r as o}from"./p-BgTwPGeH.js";import{c as d}from"./p-JbKhhoXs.js";import{g as a,b as s}from"./p-CgNJbSP4.js";import{T as c,A as m,b as h,E as f,a as u,S as x,c as p,d as b}from"./p-rI0IeKpx.js";import{b as g,a as v,g as _}from"./p-5KsJICvh.js";import{g as y}from"./p-Dnt5w_Bp.js";import{d as w}from"./p-BviYUVSD.js";import{M as k}from"./p-DZkKQUDM.js";import{_ as I,a as T,M as E,m as A,d as C,c as O,b as z}from"./p-ChRGk668.js";import{f as S,z as R}from"./p-D0F7gOYG.js";import{h as L,t as D,n as j}from"./p-BxrRWYts.js";import{i as F}from"./p-BcJ-TDVt.js";import{M}from"./p-BN1-aIOw.js";import{i as N}from"./p-B9Ofc5RB.js";import"./p-BJQylLSL.js";import"./p-D6dCQvwl.js";import"./p-BOEi1C7r.js";import"./p-oiMYqRQ0.js";import"./p-C9yTLqR8.js";import"./p-ByzvFNMm.js";import"./p-9W8bTt2G.js";import"./p-DbBZn7JO.js";import"./p-CZ30nDJE.js";const B=class{constructor(l){t(this,l),this.select=e(this,"select"),this.divider="›",this.renderSteps=()=>{const t=this.items.slice(0,-1);return this.areItemsLinks(this.items)?t.map(this.renderAsLink):t.map(this.renderAsButton)},this.renderAsButton=t=>{const e=d();return[i("button",{role:"listitem",id:e,class:"step",onClick:this.handleClick(t)},this.renderIcon(t),this.renderLabel(t)),this.renderTooltip(t,e)]},this.renderAsLink=t=>{const e=d();return[i("a",{role:"listitem",id:e,class:"step",href:t.link.href,title:t.link.title},this.renderIcon(t),this.renderLabel(t)),this.renderTooltip(t,e)]},this.renderLastStep=()=>{const t=this.items.slice(-1);return i("li",{class:"last step",tabindex:"-1","aria-current":this.areItemsLinks(this.items)?"page":"step"},this.renderIcon(t[0]),i("span",{class:"text"},t[0].text))},this.renderIcon=t=>{const e=a(t.icon),l=s(t.icon);if(e)return i("limel-icon",{style:{color:`${l}`},name:e})},this.renderLabel=t=>{if("icon-only"!==t.type)return i("span",{class:"text"},t.text)},this.renderTooltip=(t,e)=>{if("icon-only"===t.type)return i("limel-tooltip",{elementId:e,label:t.text})},this.areItemsLinks=t=>t.some((t=>"link"in t)),this.handleClick=t=>e=>{e.stopPropagation(),this.select.emit(t)}}render(){return i("ol",{key:"8d25beefb4884a5ca5f20685d93f26926811ddc3",role:"navigation","aria-label":"Breadcrumb",style:{"--limel-breadcrumbs-divider":`'${this.divider}'`}},this.renderSteps(),this.renderLastStep())}componentWillLoad(){r(this.host)}disconnectedCallback(){o(this.host)}get host(){return l(this)}};B.style='@charset "UTF-8";:host(limel-breadcrumbs){--limel-breadcrumbs-item-height:1.5rem;--limel-breadcrumbs-gap:0.75rem;--limel-breadcrumbs-gap:0.75rem;--limel-breadcrumbs-item-text-color:var( --breadcrumbs-item-text-color, rgb(var(--contrast-1500)) );--limel-overflow-mask-horizontal:linear-gradient( to right, transparent 0%, black calc(0% + var(--limel-left-edge-fade-width, 1rem)), black calc(100% - var(--limel-right-edge-fade-width, 1rem)), transparent 100% );-webkit-mask-image:var(--limel-overflow-mask-horizontal);mask-image:var(--limel-overflow-mask-horizontal);padding-left:var(--limel-left-edge-fade-width, 1rem);padding-right:var(--limel-right-edge-fade-width, 1rem);--limel-left-edge-fade-width:0.5rem;--limel-right-edge-fade-width:0.5rem}ol,li,.step{all:unset}*{box-sizing:border-box}ol{padding:0.5rem;gap:var(--limel-breadcrumbs-gap)}.step{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:var(--breadcrumbs-item-max-width, 10rem);height:var(--limel-breadcrumbs-item-height);color:var(--limel-breadcrumbs-item-text-color);border-radius:100vw;font-size:var(--limel-theme-default-font-size);padding:0 0.25rem}.step:not(:has(.text)){padding:0 0.125rem}.step:not(.last):focus{outline:none}.step:not(.last):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.step:not(.last):after{content:var(--limel-breadcrumbs-divider);display:flex;align-items:center;justify-content:center;width:var(--limel-breadcrumbs-gap);position:absolute;top:0;right:calc(var(--limel-breadcrumbs-gap) * -1);bottom:0;left:auto;text-align:center}a.step{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--limel-breadcrumbs-item-text-color)}a.step:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:"";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.step:hover{color:rgb(var(--color-blue-default))}a.step:hover:before{opacity:0.3;transform:scale(1)}button.step:not(.last){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-breadcrumbs-item-text-color);background-color:transparent}button.step:not(.last):hover,button.step:not(.last):focus,button.step:not(.last):focus-visible{will-change:color, background-color, box-shadow, transform}button.step:not(.last):hover,button.step:not(.last):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button.step:not(.last):hover{box-shadow:var(--button-shadow-hovered)}button.step:not(.last):active{--limel-clickable-transform-timing-function:cubic-bezier( 0.83, -0.15, 0.49, 1.16 );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.step:not(.last):hover,button.step:not(.last):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}limel-icon{flex-shrink:0;width:calc(var(--limel-breadcrumbs-item-height) - 0.25rem);height:calc(var(--limel-breadcrumbs-item-height) - 0.25rem)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}.last{opacity:0.7}:host(limel-breadcrumbs){box-sizing:border-box;display:flex;width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}:host(limel-breadcrumbs)::-webkit-scrollbar{display:none}:host(limel-breadcrumbs){direction:rtl}ol{display:flex;flex-direction:row-reverse;justify-content:flex-end;margin-right:auto}.step{direction:ltr}';const Y=class{constructor(l){t(this,l),this.change=e(this,"change"),this.action=e(this,"action"),this.disabled=!1,this.readonly=!1,this.invalid=!1,this.required=!1,this.type="text",this.formatNumber=!0,this.step="any",this.completions=[],this.showLink=!1,this.locale=y.defaultLocale,this.isFocused=!1,this.wasInvalid=!1,this.showCompletions=!1,this.completionsList=[],this.changeWaiting=!1,this.initialize=()=>{const t=this.limelInputField.shadowRoot.querySelector(".mdc-text-field");t&&(this.mdcTextField=new k(t),this.value&&(this.mdcTextField.value=this.value),this.invalid&&(this.mdcTextField.valid=!1),this.mapCompletions(),window.addEventListener("resize",this.layout,{passive:!0}),this.limelInputField.addEventListener("focus",this.setFocus))},this.mapCompletions=()=>{this.completionsList=[...this.completions].map((t=>({text:t})))},this.setFocus=()=>{this.mdcTextField.focus()},this.getContainerClassList=()=>{const t={"mdc-text-field":!0,"mdc-text-field--outlined":!0,"mdc-text-field--invalid":this.isInvalid(),"mdc-text-field--disabled":this.disabled||this.readonly,"lime-text-field--readonly":this.readonly,"mdc-text-field--required":this.required,"lime-text-field--empty":this.isEmpty(),"lime-has-prefix":this.hasPrefix(),"lime-has-suffix":this.hasSuffix()};return"textarea"===this.type?t["mdc-text-field--textarea"]=!0:(t["mdc-text-field--with-leading-icon"]=!!this.leadingIcon,t["mdc-text-field--with-trailing-icon"]=!!this.getTrailingIcon()),t},this.isEmpty=()=>{var t;return!("number"===this.type&&(null===(t=this.inputElement)||void 0===t?void 0:t.validity.badInput)||this.getCurrentValue())},this.getCurrentValue=()=>this.changeWaiting&&this.inputElement?this.inputElement.value:this.value,this.renderInput=t=>{if("textarea"!==this.type)return i("input",Object.assign({},t,{type:"urlAsText"===this.type?"text":this.type,pattern:this.pattern,onWheel:this.handleWheel,onKeyDown:this.onKeyDown,placeholder:this.placeholder}))},this.renderTextarea=t=>{if("textarea"===this.type)return i("span",{class:"mdc-text-field__resizer"},i("textarea",Object.assign({},t,{placeholder:this.placeholder})))},this.layout=()=>{var t;null===(t=this.mdcTextField)||void 0===t||t.layout(),this.restyleCompletionsDropDown()},this.restyleCompletionsDropDown=w((()=>{const t=this.showCompletions;this.showCompletions=!1,requestAnimationFrame((()=>{this.showCompletions=t}))}),100),this.getAdditionalProps=()=>{const t={};return"number"===this.type&&(t.step=this.step),"number"===this.type&&Number.isInteger(this.min)&&(t.min=this.min),"number"===this.type&&Number.isInteger(this.max)&&(t.max=this.max),this.minlength&&(t.minlength=this.minlength),this.maxlength&&(t.maxlength=this.maxlength),t},this.onFocus=()=>{this.isFocused=!0,this.showCompletions=!0},this.onBlur=()=>{this.isFocused=!1,this.validate(),this.changeEmitter.flush()},this.hasHelperText=()=>{var t;return!!(null!==(t=this.helperText)&&void 0!==t?t:this.validationMessage)},this.hasHelperLine=()=>this.maxlength>0||this.hasHelperText(),this.renderHelperLine=()=>{var t;const e=(this.getCurrentValue()||"").length;if(this.hasHelperLine())return i("limel-helper-line",{helperTextId:this.helperTextId,helperText:null!==(t=this.helperText)&&void 0!==t?t:this.validationMessage,length:e,maxLength:this.maxlength,invalid:this.isInvalid()})},this.renderSuffix=()=>{if(this.hasSuffix()&&"textarea"!==this.type)return i("span",{class:{"mdc-text-field__affix":!0,"mdc-text-field__affix--suffix":!0}},this.suffix)},this.hasSuffix=()=>null!=this.suffix,this.renderPrefix=()=>{if(this.hasPrefix()&&"textarea"!==this.type)return i("span",{class:{"mdc-text-field__affix":!0,"mdc-text-field__affix--prefix":!0}},this.prefix)},this.hasPrefix=()=>null!=this.prefix,this.isInvalid=()=>!this.readonly&&(!!this.invalid||this.wasInvalid),this.validate=()=>{this.readonly||this.invalid?this.wasInvalid=!1:this.inputElement&&(this.wasInvalid=!this.inputElement.checkValidity())},this.setInputElement=t=>{t&&(this.inputElement=t)},this.renderLeadingIcon=()=>{if("textarea"!==this.type)return this.leadingIcon?i("i",{class:"material-icons mdc-text-field__icon mdc-text-field__icon--leading"},i("limel-icon",{name:this.leadingIcon})):void 0},this.renderTrailingLinkOrButton=()=>{if("textarea"===this.type)return;const t=this.getTrailingIcon();return!this.isInvalid()&&this.hasLink()?this.renderLinkIcon(this.getLink(),t):t?this.renderTrailingIcon(t):void 0},this.hasLink=()=>this.showLink&&["email","tel","url","urlAsText"].includes(this.type),this.getLink=()=>{const t={href:""};switch(this.type){case"email":t.href=`mailto:${this.value}`;break;case"tel":t.href=`tel:${this.value}`;break;default:t.href=g(this.value),t.target=v(this.value),t.rel=_(t.target)}return t},this.renderLinkIcon=(t,e)=>i("a",Object.assign({},t,{class:"material-icons mdc-text-field__icon lime-trailing-icon-for-link",tabindex:this.disabled||this.isEmpty()?"-1":"0",role:"button"}),i("limel-icon",{name:e})),this.renderTrailingIcon=t=>this.isInvalid()?i("i",{key:"invalid",class:"material-icons mdc-text-field__icon invalid-icon"},i("limel-icon",{name:t})):i("i",{key:"action",class:"material-icons mdc-text-field__icon mdc-text-field__icon--trailing",tabIndex:0,role:"button",onKeyDown:this.handleIconKeyPress,onClick:this.handleIconClick},i("limel-icon",{name:t})),this.getTrailingIcon=()=>this.isInvalid()?"high_importance":this.trailingIcon?this.trailingIcon:this.showLink&&"email"===this.type?"filled_message":this.showLink&&"tel"===this.type?"phone":!this.showLink||"url"!==this.type&&"urlAsText"!==this.type?void 0:"external_link",this.renderFormattedNumber=()=>{if("number"!==this.type)return;let t=this.value;return this.formatNumber&&this.value&&(t=new Intl.NumberFormat(this.locale).format(Number(this.value)),"NaN"===t)?void 0:i("span",{class:"lime-formatted-input lime-looks-like-input-value"},t)},this.onKeyDown=t=>{this.showCompletions=!0;const e=t.key===c&&!t.altKey&&!t.metaKey&&!t.shiftKey,i=t.key===m,l=t.key===h;if(t.key===c&&t.shiftKey&&(this.showCompletions=!1),!e&&!i&&!l)return;const n=document.querySelector(` #${this.portalId} limel-list`);n&&(t.preventDefault(),e||l?n.shadowRoot.querySelector(".mdc-deprecated-list-item:first-child").focus():i&&n.shadowRoot.querySelector(".mdc-deprecated-list-item:last-child").focus())},this.handleCompletionChange=t=>{t.stopPropagation(),t.detail&&(this.showCompletions=!1,this.changeEmitter(t.detail.text),this.changeEmitter.flush())},this.renderAutocompleteList=()=>{if("textarea"===this.type||0===this.completions.length)return;const t=getComputedStyle(this.limelInputField).getPropertyValue("--dropdown-z-index");return i("limel-portal",{visible:this.showCompletions,containerId:this.portalId,inheritParentWidth:!0,containerStyle:{"z-index":t}},i("limel-menu-surface",{open:this.showCompletions,allowClicksElement:this.limelInputField,style:{"--menu-surface-width":"100%","max-height":"inherit",display:"flex"},onDismiss:this.handleCloseMenu},this.renderListResult()))},this.renderListResult=()=>{const t=this.filterCompletions(this.getCurrentValue());return t&&0!==t.length?i("limel-list",{onChange:this.handleCompletionChange,onKeyDown:this.handleKeyDownInDropdown,type:"selectable",items:t}):null},this.handleKeyDownInDropdown=t=>{[c,f,u].includes(t.key)&&this.setFocus()},this.handleCloseMenu=()=>{this.showCompletions=!1},this.filterCompletions=t=>t?this.completionsList.filter((e=>e.text.toLowerCase().includes(t.toLowerCase()))):this.completionsList,this.handleInput=t=>{t.stopPropagation();let e=t.target.value;if("number"===this.type){if(!e&&t.data)return void t.stopPropagation();e&&(e=Number(e))}this.changeWaiting=!0,this.changeEmitter(e)},this.changeEmitter=w((t=>{this.change.emit(t),this.changeWaiting=!1}),300),this.handleChange=t=>{t.stopPropagation(),this.changeEmitter.flush()},this.handleIconClick=()=>{this.action.emit()},this.handleIconKeyPress=t=>{(t.key===x||t.key===u)&&this.action.emit()},this.handleWheel=()=>{},this.portalId=d(),this.helperTextId=d(),this.labelId=d()}connectedCallback(){this.initialize()}componentDidLoad(){this.initialize()}disconnectedCallback(){this.mdcTextField&&this.mdcTextField.destroy(),this.restyleCompletionsDropDown.cancel(),window.removeEventListener("resize",this.layout),this.limelInputField.removeEventListener("focus",this.setFocus)}componentDidUpdate(){this.invalid?this.mdcTextField.valid=!1:this.wasInvalid||(this.mdcTextField.valid=!0),this.mdcTextField.disabled=this.disabled||this.readonly}async getSelectionStart(){var t,e;try{return null!==(e=null===(t=this.inputElement)||void 0===t?void 0:t.selectionStart)&&void 0!==e?e:null}catch(t){return null}}async getSelectionEnd(){var t,e;try{return null!==(e=null===(t=this.inputElement)||void 0===t?void 0:t.selectionEnd)&&void 0!==e?e:null}catch(t){return null}}async getSelectionDirection(){var t,e;try{return null!==(e=null===(t=this.inputElement)||void 0===t?void 0:t.selectionDirection)&&void 0!==e?e:null}catch(t){return null}}render(){const t=this.getAdditionalProps();t["aria-labelledby"]=this.labelId,t.class="mdc-text-field__input",t.ref=this.setInputElement,t.onInput=this.handleInput,t.onChange=this.handleChange,t.onFocus=this.onFocus,t.onBlur=this.onBlur,t.required=this.required,t.readonly=this.readonly,t.disabled=this.disabled||this.readonly;let e="";return this.hasHelperText()&&(e+=this.helperTextId,t["aria-describedby"]=this.helperTextId),this.renderAutocompleteList()&&(e&&(e+=" "),e+=this.portalId),e&&(t["aria-controls"]=e),i(n,{key:"883ac6e2bbca1b5491ed08d432101fb03984992a"},i("limel-notched-outline",{key:"c0ff8073d2cc6a0960513d7e038643373fe30af3",labelId:this.labelId,label:this.label,required:this.required,invalid:this.invalid||this.isInvalid(),disabled:this.disabled,readonly:this.readonly,hasValue:!!this.value,hasLeadingIcon:!!this.leadingIcon},i("label",{key:"c28e3ca982d3c11c521db80212f86d287e2b586b",slot:"content",class:this.getContainerClassList()},this.renderLeadingIcon(),this.renderPrefix(),this.renderFormattedNumber(),this.renderInput(t),this.renderSuffix(),this.renderTextarea(t),this.renderTrailingLinkOrButton())),this.renderHelperLine(),this.renderAutocompleteList())}valueWatcher(t){this.mdcTextField&&(this.changeWaiting||"number"===this.type&&this.isFocused&&Number(t)===Number(this.mdcTextField.value)||(t!==this.mdcTextField.value&&(this.mdcTextField.value=t||""),this.wasInvalid&&this.validate()))}completionsWatcher(){this.mapCompletions()}get validationMessage(){var t;return this.isInvalid()&&!this.invalid&&(null===(t=this.inputElement)||void 0===t?void 0:t.validationMessage)||""}static get delegatesFocus(){return!0}get limelInputField(){return l(this)}static get watchers(){return{value:[{valueWatcher:0}],completions:[{completionsWatcher:0}]}}};
2
2
  /**
3
3
  * @license
4
4
  * Copyright 2018 Google Inc.
@@ -9,6 +9,7 @@ import { FormError, FormSchema, ValidationError, ValidationStatus } from './form
9
9
  * @exampleComponent limel-example-props-factory-form
10
10
  * @exampleComponent limel-example-form-layout
11
11
  * @exampleComponent limel-example-form-span-fields
12
+ * @exampleComponent limel-example-form-invalid-section
12
13
  * @exampleComponent limel-example-custom-error-message
13
14
  * @exampleComponent limel-example-server-errors
14
15
  * @exampleComponent limel-example-form-array-item-controls
@@ -49,6 +50,13 @@ export declare class Form {
49
50
  * errors generated server side.
50
51
  */
51
52
  errors: ValidationError;
53
+ /**
54
+ * Set to `true` to render every field with a validation error as
55
+ * invalid, even untouched ones, and to reflect that on each
56
+ * containing collapsible section's header. Defaults to `false`,
57
+ * which keeps untouched required-empty fields silent.
58
+ */
59
+ revealErrors: boolean;
52
60
  /**
53
61
  * Emitted when a change is made within the form
54
62
  */
@@ -4,15 +4,18 @@ export declare const numberSchema: FormSchema;
4
4
  export declare const booleanSchema: FormSchema;
5
5
  export declare const enumSchema: FormSchema;
6
6
  export declare const requiredFieldSchema: FormSchema;
7
+ export declare const twoRequiredFieldsSchema: FormSchema;
7
8
  export declare const emailFormatSchema: FormSchema;
8
9
  export declare const arraySchema: FormSchema;
9
10
  export declare const nestedObjectSchema: FormSchema;
10
11
  export declare const arrayOfObjectsSchema: FormSchema;
12
+ export declare const arrayOfObjectsSchemaWithRequired: FormSchema;
11
13
  export declare const dynamicSchema: FormSchema;
12
14
  export declare const dynamicSchemaUpdated: FormSchema;
13
15
  export declare const helpSchema: FormSchema;
14
16
  export declare const gridLayoutSchema: FormSchema;
15
17
  export declare const collapsibleSchema: FormSchema;
18
+ export declare const collapsibleSchemaWithRequired: FormSchema;
16
19
  export declare const dateSchema: FormSchema;
17
20
  export declare const integerSchema: FormSchema;
18
21
  export declare const serverErrorsSchema: FormSchema;
@@ -31,4 +34,6 @@ export declare const topLevelStringCustomComponentSchema: FormSchema;
31
34
  export declare const arrayItemWithDependenciesSchema: FormSchema;
32
35
  export declare const arrayItemWithDependenciesAndCustomConfigSchema: FormSchema;
33
36
  export declare const nestedStringCustomComponentSchema: FormSchema;
37
+ export declare const nestedSchemaPathSchema: FormSchema;
38
+ export declare const nestedLayoutSchemaPathSchema: FormSchema;
34
39
  //# sourceMappingURL=form.test-schemas.d.ts.map
@@ -1,7 +1,19 @@
1
+ import { ErrorSchema } from '@rjsf/utils';
1
2
  import { FormSchema } from '../form.types';
2
3
  export interface ArrayFieldOptions {
3
4
  arraySchema: FormSchema;
4
5
  formData: any[];
5
6
  }
6
7
  export declare const ArrayFieldContext: import("react").Context<ArrayFieldOptions>;
8
+ /**
9
+ * The array's validation errors as an RJSF `errorSchema`, keyed by item
10
+ * index (e.g. `{ 1: { phone: { __errors: [...] } } }`).
11
+ *
12
+ * RJSF passes `errorSchema` to the array *field* (`FieldProps`) but, for
13
+ * non-fixed arrays, does not forward it to `ArrayFieldItemTemplate` — so
14
+ * the custom `ArrayField` shares it here for each item to read its own
15
+ * slice (`errorSchema[index]`). This lets a collapsed item flag itself as
16
+ * invalid without rendering (and DOM-walking) its hidden children.
17
+ */
18
+ export declare const ArrayItemErrorsContext: import("react").Context<ErrorSchema>;
7
19
  //# sourceMappingURL=array-context.d.ts.map
@@ -1,5 +1,5 @@
1
1
  import React, { PropsWithChildren } from 'react';
2
- import { ArrayFieldItemButtonsTemplateProps } from '@rjsf/utils';
2
+ import { ArrayFieldItemButtonsTemplateProps, ErrorSchema } from '@rjsf/utils';
3
3
  import { JSONSchema7 } from 'json-schema';
4
4
  export interface CollapsibleItemProps {
5
5
  buttonsProps: ArrayFieldItemButtonsTemplateProps;
@@ -27,6 +27,18 @@ export interface CollapsibleItemProps {
27
27
  * Whether this particular item can be reordered.
28
28
  */
29
29
  allowItemReorder: boolean;
30
+ /**
31
+ * Validation errors for this item, as an RJSF `errorSchema` subtree.
32
+ * Used to flag the item's header when it contains invalid fields,
33
+ * even while the item is collapsed and its fields are not rendered.
34
+ */
35
+ errorSchema?: ErrorSchema;
36
+ /**
37
+ * Whether the form has been asked to reveal all validation errors
38
+ * (typically on a save attempt). The header only reflects nested
39
+ * errors when this is `true`, keeping a freshly loaded form silent.
40
+ */
41
+ revealErrors?: boolean;
30
42
  }
31
43
  export declare class CollapsibleItemTemplate extends React.Component<PropsWithChildren<CollapsibleItemProps>> {
32
44
  props: PropsWithChildren<CollapsibleItemProps>;
@@ -45,6 +57,7 @@ export declare class CollapsibleItemTemplate extends React.Component<PropsWithCh
45
57
  'is-open': boolean;
46
58
  'data-reorder-id': string;
47
59
  'data-reorderable': string;
60
+ invalid: boolean;
48
61
  }, string | React.JSXElementConstructor<any>>;
49
62
  private setActions;
50
63
  private handleAction;
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { JSONSchema7 } from 'json-schema';
3
+ import { ErrorSchema } from '@rjsf/utils';
3
4
  /**
4
5
  *
5
6
  * @param title
@@ -27,4 +28,16 @@ export declare function renderDescription(description: string): React.ReactEleme
27
28
  * @returns describing title of the data
28
29
  */
29
30
  export declare function findTitle(data: any, fieldSchema: JSONSchema7, formSchema: JSONSchema7): any;
31
+ /**
32
+ * Recursively check whether an RJSF `errorSchema` subtree contains any
33
+ * field with validation errors.
34
+ *
35
+ * Used to reflect the validity of nested fields onto a containing
36
+ * collapsible section's header, so a collapsed section with invalid
37
+ * contents is still flagged in the UI.
38
+ *
39
+ * @param errorSchema - the RJSF error schema subtree to inspect
40
+ * @returns `true` when any nested field has one or more errors
41
+ */
42
+ export declare function hasNestedErrors(errorSchema?: ErrorSchema): boolean;
30
43
  //# sourceMappingURL=common.d.ts.map
@@ -10,6 +10,7 @@ export declare class GridLayout extends React.Component<LayoutProps, LayoutState
10
10
  handleResize(): void;
11
11
  render(): React.DetailedReactHTMLElement<{
12
12
  className: string;
13
+ 'data-schema-path': string;
13
14
  ref: React.RefObject<HTMLElement>;
14
15
  }, HTMLElement>;
15
16
  private getColumnCount;
@@ -17,6 +18,7 @@ export declare class GridLayout extends React.Component<LayoutProps, LayoutState
17
18
  }
18
19
  interface LayoutProps {
19
20
  options: FormLayoutOptions;
21
+ schemaPath?: string[];
20
22
  children?: any;
21
23
  }
22
24
  interface LayoutState {
@@ -4,5 +4,13 @@ export declare const ObjectFieldTemplate: (props: LimeObjectFieldTemplateProps)
4
4
  header: string;
5
5
  id: string;
6
6
  'is-open': boolean;
7
+ invalid: boolean;
7
8
  }, string | React.JSXElementConstructor<any>>;
9
+ /**
10
+ * Render a schema path as a leading-slash string. Root → `/`,
11
+ * `['rules']` → `/rules`, `['rules', 'details']` → `/rules/details`.
12
+ *
13
+ * @param path the schema-path segments (typically `fieldPathId.path`).
14
+ */
15
+ export declare function toSchemaPath(path: string[]): string;
8
16
  //# sourceMappingURL=object-field.d.ts.map
@@ -1,12 +1,17 @@
1
1
  import React from 'react';
2
2
  import { RowProps } from './types';
3
- export declare class RowLayout extends React.Component<RowProps> {
4
- props: RowProps;
3
+ interface RowLayoutProps extends RowProps {
4
+ schemaPath?: string[];
5
+ }
6
+ export declare class RowLayout extends React.Component<RowLayoutProps> {
7
+ props: RowLayoutProps;
5
8
  private elementRef;
6
- constructor(props: RowProps);
9
+ constructor(props: RowLayoutProps);
7
10
  render(): React.DetailedReactHTMLElement<{
8
11
  className: string;
12
+ 'data-schema-path': string;
9
13
  ref: React.RefObject<HTMLElement>;
10
14
  }, HTMLElement>;
11
15
  }
16
+ export {};
12
17
  //# sourceMappingURL=row-layout.d.ts.map
@@ -10,16 +10,13 @@ export declare function hasValue(value: unknown): boolean;
10
10
  /**
11
11
  * Determine whether a field should be displayed as invalid.
12
12
  *
13
- * A field with errors is shown as invalid only when the user has
14
- * interacted with it, it already contains a value, or it is optional.
15
- * This avoids showing errors on untouched required fields before the
16
- * user has had a chance to fill them in.
17
- *
18
13
  * @param field - the current field state
19
14
  * @param field.hasErrors - whether the field currently has validation errors
20
15
  * @param field.modified - whether the user has interacted with the field
21
16
  * @param field.hasValue - whether the field holds a non-empty value
22
17
  * @param field.required - whether the field is required
18
+ * @param field.revealErrors - whether the form has been asked to reveal
19
+ * all errors at once (typically on a save attempt)
23
20
  * @returns `true` when the field should render in an invalid state
24
21
  */
25
22
  export declare function isFieldInvalid(field: {
@@ -27,6 +24,7 @@ export declare function isFieldInvalid(field: {
27
24
  modified: boolean;
28
25
  hasValue: boolean;
29
26
  required: boolean;
27
+ revealErrors?: boolean;
30
28
  }): boolean;
31
29
  /**
32
30
  * Check whether a field should be marked as required.
@@ -1843,6 +1843,7 @@ export namespace Components {
1843
1843
  * @exampleComponent limel-example-props-factory-form
1844
1844
  * @exampleComponent limel-example-form-layout
1845
1845
  * @exampleComponent limel-example-form-span-fields
1846
+ * @exampleComponent limel-example-form-invalid-section
1846
1847
  * @exampleComponent limel-example-custom-error-message
1847
1848
  * @exampleComponent limel-example-server-errors
1848
1849
  * @exampleComponent limel-example-form-array-item-controls
@@ -1865,6 +1866,11 @@ export namespace Components {
1865
1866
  * Factory for creating properties for custom form components When using custom components in the form some properties might have to be set dynamically. If this factory is set, it will be called with the current schema for the field for each custom component in the form. The factory must return an object where each key is the name of the property that should be set, along with its value.
1866
1867
  */
1867
1868
  "propsFactory"?: (schema: FormSchema) => Record<string, any>;
1869
+ /**
1870
+ * Set to `true` to render every field with a validation error as invalid, even untouched ones, and to reflect that on each containing collapsible section's header. Defaults to `false`, which keeps untouched required-empty fields silent.
1871
+ * @default false
1872
+ */
1873
+ "revealErrors": boolean;
1868
1874
  /**
1869
1875
  * The schema used to render the form
1870
1876
  * @default {}
@@ -5235,6 +5241,7 @@ declare global {
5235
5241
  * @exampleComponent limel-example-props-factory-form
5236
5242
  * @exampleComponent limel-example-form-layout
5237
5243
  * @exampleComponent limel-example-form-span-fields
5244
+ * @exampleComponent limel-example-form-invalid-section
5238
5245
  * @exampleComponent limel-example-custom-error-message
5239
5246
  * @exampleComponent limel-example-server-errors
5240
5247
  * @exampleComponent limel-example-form-array-item-controls
@@ -8426,6 +8433,7 @@ declare namespace LocalJSX {
8426
8433
  * @exampleComponent limel-example-props-factory-form
8427
8434
  * @exampleComponent limel-example-form-layout
8428
8435
  * @exampleComponent limel-example-form-span-fields
8436
+ * @exampleComponent limel-example-form-invalid-section
8429
8437
  * @exampleComponent limel-example-custom-error-message
8430
8438
  * @exampleComponent limel-example-server-errors
8431
8439
  * @exampleComponent limel-example-form-array-item-controls
@@ -8456,6 +8464,11 @@ declare namespace LocalJSX {
8456
8464
  * Factory for creating properties for custom form components When using custom components in the form some properties might have to be set dynamically. If this factory is set, it will be called with the current schema for the field for each custom component in the form. The factory must return an object where each key is the name of the property that should be set, along with its value.
8457
8465
  */
8458
8466
  "propsFactory"?: (schema: FormSchema) => Record<string, any>;
8467
+ /**
8468
+ * Set to `true` to render every field with a validation error as invalid, even untouched ones, and to reflect that on each containing collapsible section's header. Defaults to `false`, which keeps untouched required-empty fields silent.
8469
+ * @default false
8470
+ */
8471
+ "revealErrors"?: boolean;
8459
8472
  /**
8460
8473
  * The schema used to render the form
8461
8474
  * @default {}
@@ -11019,6 +11032,7 @@ declare namespace LocalJSX {
11019
11032
  }
11020
11033
  interface LimelFormAttributes {
11021
11034
  "disabled": boolean;
11035
+ "revealErrors": boolean;
11022
11036
  }
11023
11037
  interface LimelHeaderAttributes {
11024
11038
  "icon": IconName | Icon;
@@ -12051,6 +12065,7 @@ declare module "@stencil/core" {
12051
12065
  * @exampleComponent limel-example-props-factory-form
12052
12066
  * @exampleComponent limel-example-form-layout
12053
12067
  * @exampleComponent limel-example-form-span-fields
12068
+ * @exampleComponent limel-example-form-invalid-section
12054
12069
  * @exampleComponent limel-example-custom-error-message
12055
12070
  * @exampleComponent limel-example-server-errors
12056
12071
  * @exampleComponent limel-example-form-array-item-controls
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@limetech/lime-elements",
3
- "version": "39.29.3",
3
+ "version": "39.31.0",
4
4
  "description": "Lime Elements",
5
5
  "author": "Lime Technologies",
6
6
  "license": "Apache-2.0",
@@ -27,12 +27,20 @@
27
27
  "docs:build": "cross-env-shell NODE_ENV=prod SASS_PATH=node_modules \"stencil build --docs --config stencil.config.docs.ts\"",
28
28
  "docs:context7": "node generate-context7-docs.cjs",
29
29
  "docs:publish": "node publish-docs.cjs",
30
+ "docs:rebuild": "shx rm -rf www .stencil && npm run docs:build",
30
31
  "lint": "eslint --max-warnings=0 && prettier -c --ignore-path .gitignore **/*.scss",
31
32
  "lint:fix": "eslint --max-warnings=0 --fix && prettier --write --ignore-path .gitignore **/*.scss",
32
33
  "start": "npm run watch",
33
34
  "test": "npx playwright install chromium && stencil-test",
34
35
  "test:spec": "stencil-test --project spec",
35
36
  "test:e2e": "npx playwright install chromium && stencil-test --project e2e",
37
+ "test:examples": "npm run docs:rebuild && npm run test:examples:ci --",
38
+ "test:examples:ci": "npx playwright install chromium && playwright test --config playwright.example-tests.config.ts",
39
+ "test:examples:runtime": "npm run docs:rebuild && npm run test:examples:runtime:ci --",
40
+ "test:examples:runtime:ci": "npx playwright install chromium && playwright test --config playwright.example-tests.config.ts runtime",
41
+ "test:examples:accessibility": "npm run docs:rebuild && npm run test:examples:accessibility:ci --",
42
+ "test:examples:accessibility:ci": "npx playwright install chromium && playwright test --config playwright.example-tests.config.ts accessibility",
43
+ "test:examples:accessibility:update": "npm run docs:rebuild && npx playwright install chromium && cross-env UPDATE_AXE_BASELINE=1 playwright test --config playwright.example-tests.config.ts accessibility",
36
44
  "test:watch": "npx playwright install chromium && stencil-test --watch",
37
45
  "test:watch:spec": "stencil-test --watch --project spec",
38
46
  "test:watch:e2e": "npx playwright install chromium && stencil-test --watch --project e2e",
@@ -42,6 +50,7 @@
42
50
  "@commitlint/config-conventional": "^19.8.1",
43
51
  "@limetech/eslint-config": "^4.0.0",
44
52
  "@microsoft/api-extractor": "^7.52.11",
53
+ "@playwright/test": "1.58.2",
45
54
  "@popperjs/core": "^2.11.8",
46
55
  "@rjsf/core": "^6.5.2",
47
56
  "@rjsf/utils": "^6.5.2",
@@ -57,6 +66,7 @@
57
66
  "@types/react-dom": "^19.1.7",
58
67
  "@types/tabulator-tables": "^6.2.4",
59
68
  "@vitest/browser-playwright": "^4.0.18",
69
+ "axe-core": "4.12.0",
60
70
  "codemirror": "^5.65.9",
61
71
  "cross-env": "^7.0.3",
62
72
  "dayjs": "^1.11.13",
@@ -93,6 +103,7 @@
93
103
  "replace-in-file": "^7.2.0",
94
104
  "shelljs": "0.10.0",
95
105
  "shx": "^0.4.0",
106
+ "sirv": "^3.0.2",
96
107
  "sortablejs": "^1.15.6",
97
108
  "style-to-object": "^1.0.9",
98
109
  "tabulator-tables": "^6.3.1",