@ni/nimble-components 33.2.0 → 33.4.0

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

@@ -4700,7 +4700,10 @@ const ty="underline",ey="outline",ny="block",iy=Mt`
 
     :host([disabled]) {
         color: ${Gc};
-        cursor: default;
+    }
+
+    :host([disabled][appearance-readonly]) {
+        color: ${Wc};
     }
 
     .label {
@@ -4713,6 +4716,10 @@ const ty="underline",ey="outline",ny="block",iy=Mt`
         color: ${fd};
     }
 
+    :host([disabled][appearance-readonly]) .label {
+        color: ${pd};
+    }
+
     .root {
         position: relative;
         display: flex;
@@ -4798,14 +4805,22 @@ const ty="underline",ey="outline",ny="block",iy=Mt`
         outline: none;
     }
 
+    :host([disabled][appearance-readonly]) .control {
+        cursor: text;
+    }
+
     .control::placeholder {
         color: ${pd};
     }
 
-    .control[disabled]::placeholder {
+    :host([disabled]) .control::placeholder {
         color: ${Gc};
     }
 
+    :host([disabled][appearance-readonly]) .control::placeholder {
+        color: ${pd};
+    }
+
     .controls {
         display: contents;
     }
@@ -4876,7 +4891,7 @@ const ty="underline",ey="outline",ny="block",iy=Mt`
     >
         <slot ${ie("defaultSlottedNodes")}></slot>
     </label>`)
-class oy extends(Ug(hv(ts))){constructor(){super(...arguments),this.appearance=ty}connectedCallback(){super.connectedCallback(),this.control.setAttribute("role","spinbutton")}}t([ft],oy.prototype,"appearance",void 0)
+class oy extends(Ug(hv(ts))){constructor(){super(...arguments),this.appearance=ty,this.appearanceReadOnly=!1}connectedCallback(){super.connectedCallback(),this.control.setAttribute("role","spinbutton")}}t([ft],oy.prototype,"appearance",void 0),t([ft({attribute:"appearance-readonly",mode:"boolean"})],oy.prototype,"appearanceReadOnly",void 0)
 const ry=oy.compose({baseName:"number-field",baseClass:ts,template:(t,e)=>Q`
     <template class="${t=>t.readOnly?"readonly":""}">
         ${sy}
@@ -12451,6 +12466,10 @@ const KB="outline",YB="block",XB=Mt`
         color: ${Gc};
     }
 
+    :host([disabled][appearance-readonly]) {
+        color: ${Wc};
+    }
+
     .label {
         display: block;
         color: ${pd};
@@ -12461,6 +12480,10 @@ const KB="outline",YB="block",XB=Mt`
         color: ${fd};
     }
 
+    :host([disabled][appearance-readonly]) .label {
+        color: ${pd};
+    }
+
     .container {
         display: flex;
         justify-content: center;
@@ -12536,6 +12559,10 @@ const KB="outline",YB="block",XB=Mt`
         border-color: rgba(${cl}, 0.1);
     }
 
+    :host([disabled][appearance-readonly]) .control {
+        cursor: text;
+    }
+
     :host([error-visible]) .control {
         border-bottom-color: ${dl};
     }
@@ -12548,10 +12575,14 @@ const KB="outline",YB="block",XB=Mt`
         color: ${pd};
     }
 
-    .control[disabled]::placeholder {
+    :host([disabled]) .control::placeholder {
         color: ${fd};
     }
 
+    :host([disabled][appearance-readonly]) .control::placeholder {
+        color: ${pd};
+    }
+
     :host([resize='both']) .control {
         resize: both;
     }
@@ -12591,6 +12622,11 @@ const KB="outline",YB="block",XB=Mt`
                 background-color: rgba(${cl}, 0.1);
             }
 
+            :host([disabled][appearance-readonly]) .control {
+                border-color: rgba(${cl}, 0.1);
+                background-color: transparent;
+            }
+
             :host([error-visible][disabled]) .control {
                 border-bottom-color: ${dl};
             }
@@ -12603,7 +12639,7 @@ const KB="outline",YB="block",XB=Mt`
         <slot ${ie("defaultSlottedNodes")}></slot>
     </label>
 `)
-class QB extends(Ug(hv(ws))){constructor(){super(...arguments),this.appearance=KB,this.scrollbarWidth=-1,this.updateScrollbarWidthQueued=!1}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.onResize())),this.resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect()}onTextAreaInput(){this.handleTextInput(),this.queueUpdateScrollbarWidth()}placeholderChanged(){this.queueUpdateScrollbarWidth()}valueChanged(t,e){super.valueChanged(t,e),this.queueUpdateScrollbarWidth()}onResize(){this.scrollbarWidth=this.control.offsetWidth-this.control.clientWidth}queueUpdateScrollbarWidth(){this.$fastController.isConnected&&(this.updateScrollbarWidthQueued||(this.updateScrollbarWidthQueued=!0,b.queueUpdate((()=>this.updateScrollbarWidth()))))}updateScrollbarWidth(){this.updateScrollbarWidthQueued=!1,this.scrollbarWidth=this.control.offsetWidth-this.control.clientWidth}}t([ft],QB.prototype,"appearance",void 0),t([C],QB.prototype,"scrollbarWidth",void 0)
+class QB extends(Ug(hv(ws))){constructor(){super(...arguments),this.appearance=KB,this.appearanceReadOnly=!1,this.scrollbarWidth=-1,this.updateScrollbarWidthQueued=!1}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.onResize())),this.resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect()}onTextAreaInput(){this.handleTextInput(),this.queueUpdateScrollbarWidth()}placeholderChanged(){this.queueUpdateScrollbarWidth()}valueChanged(t,e){super.valueChanged(t,e),this.queueUpdateScrollbarWidth()}onResize(){this.scrollbarWidth=this.control.offsetWidth-this.control.clientWidth}queueUpdateScrollbarWidth(){this.$fastController.isConnected&&(this.updateScrollbarWidthQueued||(this.updateScrollbarWidthQueued=!0,b.queueUpdate((()=>this.updateScrollbarWidth()))))}updateScrollbarWidth(){this.updateScrollbarWidthQueued=!1,this.scrollbarWidth=this.control.offsetWidth-this.control.clientWidth}}t([ft],QB.prototype,"appearance",void 0),t([ft({attribute:"appearance-readonly",mode:"boolean"})],QB.prototype,"appearanceReadOnly",void 0),t([C],QB.prototype,"scrollbarWidth",void 0)
 const tP=QB.compose({baseName:"text-area",baseClass:ws,template:()=>Q`
     ${JB}
     <div class="container">
@@ -12800,6 +12836,10 @@ const eP="underline",nP="outline",iP="block",sP="frameless",oP=Mt`
         text-overflow: clip;
     }
 
+    :host([disabled][appearance-readonly]) .control {
+        cursor: text;
+    }
+
     .control::placeholder {
         color: ${pd};
     }