@ni/nimble-components 14.0.0 → 15.1.0

package/dist/all-components-bundle.min.js

@@ -1962,6 +1962,10 @@ const rh="underline",ah="outline",lh="block",ch=pt`
         width: calc(100% - 8px);
     }
 
+    :host([error-visible]):before {
+        border-bottom-color: ${jn};
+    }
+
     :host::after {
         content: '';
         position: absolute;
@@ -1985,6 +1989,10 @@ const rh="underline",ah="outline",lh="block",ch=pt`
         width: 100%;
     }
 
+    :host([error-visible]):after {
+        border-bottom-color: ${jn};
+    }
+
     :host([disabled]:hover)::after {
         width: 0px;
     }
@@ -2011,6 +2019,12 @@ const rh="underline",ah="outline",lh="block",ch=pt`
         border-color: rgba(${Un}, 0.1);
     }
 
+    :host([error-visible]) .control,
+    :host([error-visible][open]) .control,
+    :host([error-visible][disabled]) .control {
+        border-bottom-color: ${jn};
+    }
+
     .listbox {
         box-sizing: border-box;
         display: inline-flex;
@@ -2187,10 +2201,6 @@ const rh="underline",ah="outline",lh="block",ch=pt`
         color: ${Dr};
     }
 
-    :host([error-visible])::after {
-        border-bottom-color: ${jn};
-    }
-
     .control {
         bottom-border-width: var(--ni-private-bottom-border-width);
     }
@@ -2199,19 +2209,6 @@ const rh="underline",ah="outline",lh="block",ch=pt`
         border-bottom-color: ${Gn};
     }
 
-    :host([error-visible]) .control {
-        border-bottom: var(--ni-private-bottom-border-width) solid ${jn};
-    }
-
-    :host([disabled]) .control {
-        border-color: rgba(${Un}, 0.1);
-    }
-
-    :host([error-visible][disabled]) .control,
-    :host([error-visible][open]) .control {
-        border-bottom-color: ${jn};
-    }
-
     .selected-value {
         -webkit-appearance: none;
         background: transparent;
@@ -3509,7 +3506,7 @@ const Uh=pt`
         fill: rgba(${Un}, 0.3);
     }
 `
-const jh=class extends vi{}.compose({baseName:"radio-button",baseClass:vi,template:(t,e)=>U`
+const jh=class extends vi{}.compose({baseName:"radio",baseClass:vi,template:(t,e)=>U`
     <template
         role="radio"
         class="${t=>t.checked?"checked":""} ${t=>t.readOnly?"readonly":""}"
@@ -3582,9 +3579,32 @@ const Kh=class extends hi{}.compose({baseName:"radio-group",baseClass:hi,templat
 Ns.getOrCreate().withPrefix("nimble").register(Kh())
 const Xh=pt`
     ${ch}
-`
-class Gh extends fi{constructor(){super(...arguments),this.appearance=rh}setPositioning(){this.$fastController.isConnected&&(super.setPositioning(),this.updateListboxMaxHeightCssVariable())}slottedOptionsChanged(t,e){const s=this.value
-super.slottedOptionsChanged(t,e),s&&(this.value=s)}maxHeightChanged(){this.updateListboxMaxHeightCssVariable()}updateListboxMaxHeightCssVariable(){this.listbox&&this.listbox.style.setProperty("--ni-private-select-max-height",`${this.maxHeight}px`)}}io([tt],Gh.prototype,"appearance",void 0)
+    ${dh}
+
+    ${""}
+    [part='selected-value'] {
+        order: 1;
+    }
+
+    [part='indicator'] {
+        order: 3;
+    }
+
+    .error-icon {
+        order: 2;
+    }
+
+    .end {
+        display: contents;
+    }
+`.withBehaviors(Td(lh,pt`
+            :host([error-visible]) .control {
+                border-bottom-width: ${ir};
+                padding-bottom: 0;
+            }
+        `))
+class Gh extends fi{constructor(){super(...arguments),this.appearance=rh,this.errorVisible=!1}setPositioning(){this.$fastController.isConnected&&(super.setPositioning(),this.updateListboxMaxHeightCssVariable())}slottedOptionsChanged(t,e){const s=this.value
+super.slottedOptionsChanged(t,e),s&&(this.value=s)}maxHeightChanged(){this.updateListboxMaxHeightCssVariable()}updateListboxMaxHeightCssVariable(){this.listbox&&this.listbox.style.setProperty("--ni-private-select-max-height",`${this.maxHeight}px`)}}io([tt],Gh.prototype,"appearance",void 0),io([tt({attribute:"error-text"})],Gh.prototype,"errorText",void 0),io([tt({attribute:"error-visible",mode:"boolean"})],Gh.prototype,"errorVisible",void 0)
 const Yh=Gh.compose({baseName:"select",baseClass:fi,template:(t,e)=>U`
     <template
         class="${t=>[t.collapsible&&"collapsible",t.collapsible&&t.open&&"open",t.disabled&&"disabled",t.collapsible&&t.position].filter(Boolean).join(" ")}"
@@ -3638,7 +3658,13 @@ const Yh=Gh.compose({baseName:"select",baseClass:fi,template:(t,e)=>U`
             ></slot>
         </div>
     </template>
-`,styles:Xh,indicator:Ya.data})
+`,styles:Xh,indicator:Ya.data,end:U`
+        <${Ns.tagFor(nh)}
+            severity="error"
+            class="error-icon"
+        ></${Ns.tagFor(nh)}>
+        ${Zd}
+    `})
 Ns.getOrCreate().withPrefix("nimble").register(Yh())
 const Qh=pt`
     ${Ji("inline-flex")}