@ni/spright-components 5.2.1 → 5.2.3

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

@@ -4700,7 +4700,10 @@ const ny="underline",iy="outline",sy="block",oy=Mt`
 
     :host([disabled]) {
         color: ${Zc};
-        cursor: default;
+    }
+
+    :host([disabled][appearance-readonly]) {
+        color: ${Gc};
     }
 
     .label {
@@ -4713,6 +4716,10 @@ const ny="underline",iy="outline",sy="block",oy=Mt`
         color: ${md};
     }
 
+    :host([disabled][appearance-readonly]) .label {
+        color: ${fd};
+    }
+
     .root {
         position: relative;
         display: flex;
@@ -4798,14 +4805,22 @@ const ny="underline",iy="outline",sy="block",oy=Mt`
         outline: none;
     }
 
+    :host([disabled][appearance-readonly]) .control {
+        cursor: text;
+    }
+
     .control::placeholder {
         color: ${fd};
     }
 
-    .control[disabled]::placeholder {
+    :host([disabled]) .control::placeholder {
         color: ${Zc};
     }
 
+    :host([disabled][appearance-readonly]) .control::placeholder {
+        color: ${fd};
+    }
+
     .controls {
         display: contents;
     }
@@ -4876,7 +4891,7 @@ const ny="underline",iy="outline",sy="block",oy=Mt`
     >
         <slot ${ie("defaultSlottedNodes")}></slot>
     </label>`)
-class ay extends(jg(pv(ts))){constructor(){super(...arguments),this.appearance=ny}connectedCallback(){super.connectedCallback(),this.control.setAttribute("role","spinbutton")}}t([ft],ay.prototype,"appearance",void 0)
+class ay extends(jg(pv(ts))){constructor(){super(...arguments),this.appearance=ny,this.appearanceReadOnly=!1}connectedCallback(){super.connectedCallback(),this.control.setAttribute("role","spinbutton")}}t([ft],ay.prototype,"appearance",void 0),t([ft({attribute:"appearance-readonly",mode:"boolean"})],ay.prototype,"appearanceReadOnly",void 0)
 const ly=ay.compose({baseName:"number-field",baseClass:ts,template:(t,e)=>Q`
     <template class="${t=>t.readOnly?"readonly":""}">
         ${ry}
@@ -12451,6 +12466,10 @@ const XB="outline",JB="block",QB=Mt`
         color: ${Zc};
     }
 
+    :host([disabled][appearance-readonly]) {
+        color: ${Gc};
+    }
+
     .label {
         display: block;
         color: ${fd};
@@ -12461,6 +12480,10 @@ const XB="outline",JB="block",QB=Mt`
         color: ${md};
     }
 
+    :host([disabled][appearance-readonly]) .label {
+        color: ${fd};
+    }
+
     .container {
         display: flex;
         justify-content: center;
@@ -12536,6 +12559,10 @@ const XB="outline",JB="block",QB=Mt`
         border-color: rgba(${dl}, 0.1);
     }
 
+    :host([disabled][appearance-readonly]) .control {
+        cursor: text;
+    }
+
     :host([error-visible]) .control {
         border-bottom-color: ${hl};
     }
@@ -12548,10 +12575,14 @@ const XB="outline",JB="block",QB=Mt`
         color: ${fd};
     }
 
-    .control[disabled]::placeholder {
+    :host([disabled]) .control::placeholder {
         color: ${md};
     }
 
+    :host([disabled][appearance-readonly]) .control::placeholder {
+        color: ${fd};
+    }
+
     :host([resize='both']) .control {
         resize: both;
     }
@@ -12591,6 +12622,11 @@ const XB="outline",JB="block",QB=Mt`
                 background-color: rgba(${dl}, 0.1);
             }
 
+            :host([disabled][appearance-readonly]) .control {
+                border-color: rgba(${dl}, 0.1);
+                background-color: transparent;
+            }
+
             :host([error-visible][disabled]) .control {
                 border-bottom-color: ${hl};
             }
@@ -12603,7 +12639,7 @@ const XB="outline",JB="block",QB=Mt`
         <slot ${ie("defaultSlottedNodes")}></slot>
     </label>
 `)
-class eP extends(jg(pv(ws))){constructor(){super(...arguments),this.appearance=XB,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],eP.prototype,"appearance",void 0),t([C],eP.prototype,"scrollbarWidth",void 0)
+class eP extends(jg(pv(ws))){constructor(){super(...arguments),this.appearance=XB,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],eP.prototype,"appearance",void 0),t([ft({attribute:"appearance-readonly",mode:"boolean"})],eP.prototype,"appearanceReadOnly",void 0),t([C],eP.prototype,"scrollbarWidth",void 0)
 const nP=eP.compose({baseName:"text-area",baseClass:ws,template:()=>Q`
     ${tP}
     <div class="container">
@@ -12800,6 +12836,10 @@ const iP="underline",sP="outline",oP="block",rP="frameless",aP=Mt`
         text-overflow: clip;
     }
 
+    :host([disabled][appearance-readonly]) .control {
+        cursor: text;
+    }
+
     .control::placeholder {
         color: ${fd};
     }