npm - @oicl/openbridge-webcomponents - Versions diffs - 2.0.0-next.66 → 2.0.0-next.68 - Mend

@oicl/openbridge-webcomponents 2.0.0-next.66 → 2.0.0-next.68

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 (52) hide show

package/dist/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { unsafeCSS, LitElement, html, svg } from "lit";
 import { property } from "lit/decorators.js";
 import compentStyle from "./valve-analog-two-way-icon.css.js";
 import { customElement } from "../../decorator.js";
+import "../../icons/icon-twoway-analog-closed.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -23,35 +24,15 @@ let ObcValveAnalogTwoWayIcon = class extends LitElement {
     const transform = this.vertical ? "transform: rotate(90deg);" : "";
     if (this.closed) {
       return html` <div class="wrapper" style="${transform}">
-        <svg
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M3 16.8892L10 12.8059V10.4546L3 6.37127V16.8892ZM11 9.88024V13.3802L2.75194 18.1916C2.41861 18.386 2 18.1456 2 17.7597V5.50075C2 5.11486 2.41861 4.87442 2.75193 5.06886L11 9.88024ZM21 16.8892V6.37127L14 10.4546V12.8059L21 16.8892ZM13 13.3802L21.2481 18.1916C21.5814 18.386 22 18.1456 22 17.7597V5.50075C22 5.11486 21.5814 4.87442 21.2481 5.06886L13 9.88024V13.3802ZM12 22.6301C11.4477 22.6301 11 22.1824 11 21.6301V15.6301C11 15.0778 11.4477 14.6301 12 14.6301C12.5523 14.6301 13 15.0778 13 15.6301V21.6301C13 22.1824 12.5523 22.6301 12 22.6301Z"
-            fill="var(--automation-device-secondary-color)"
-          />
-          <path
-            d="M10 12.8059L3 16.8892V6.37127L10 10.4546V12.8059Z"
-            fill="var(--automation-device-tertiary-color)"
-          />
-          <path
-            d="M21 6.37127V16.8892L14 12.8059V10.4546L21 6.37127Z"
-            fill="var(--automation-device-tertiary-color)"
-          />
-        </svg>
+        <obi-twoway-analog-closed useCssColor> </obi-twoway-analog-closed>
       </div>`;
     }
     const handleRotation = -(1 - this.value / 100) * 90;
+    const handleTranslation = (1 - this.value / 100) * 2;
     const handle = svg`
-      <g transform="rotate(${handleRotation} 12 18.5)">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.49942 20.1303H14.4994C15.3278 20.1303 15.9994 19.4587 15.9994 18.6303C15.9994 17.8019 15.3278 17.1303 14.4994 17.1303H9.49942C8.67099 17.1303 7.99942 17.8019 7.99942 18.6303C7.99942 19.4587 8.67099 20.1303 9.49942 20.1303ZM9.49942 19.1303L14.4994 19.1303C14.7756 19.1303 14.9994 18.9064 14.9994 18.6303C14.9994 18.3542 14.7756 18.1303 14.4994 18.1303L9.49942 18.1303C9.22328 18.1303 8.99942 18.3542 8.99942 18.6303C8.99942 18.9064 9.22328 19.1303 9.49942 19.1303Z" fill="var(--automation-device-tertiary-color)"/>
-        <path d="M14.4994 19.1303L9.49942 19.1303C9.22328 19.1303 8.99942 18.9064 8.99942 18.6303C8.99942 18.3542 9.22328 18.1303 9.49942 18.1303L14.4994 18.1303C14.7756 18.1303 14.9994 18.3542 14.9994 18.6303C14.9994 18.9064 14.7756 19.1303 14.4994 19.1303Z" fill="var(--automation-device-primary-color)"/>
+      <g transform="translate(0, ${handleTranslation}) rotate(${handleRotation} 12 3.5) ">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 5H14.5C15.3284 5 16 4.32843 16 3.5C16 2.67157 15.3284 2 14.5 2H9.5C8.67157 2 8 2.67157 8 3.5C8 4.32843 8.67157 5 9.5 5ZM9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z" fill="var(--automation-device-tertiary-color)"/>
+        <path d="M9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z" fill="var(--automation-device-primary-color)"/>
       </g>
     `;
     const xmin = 10.5;
@@ -67,11 +48,11 @@ let ObcValveAnalogTwoWayIcon = class extends LitElement {
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M2 5.50075V17.7597C2 18.1456 2.41861 18.386 2.75194 18.1916L10.5714 13.6302H13.4286L21.2481 18.1916C21.5814 18.386 22 18.1456 22 17.7597V5.50075C22 5.11486 21.5814 4.87442 21.2481 5.06886L13.4286 9.63024H10.5714L2.75193 5.06886C2.41861 4.87442 2 5.11486 2 5.50075Z"
+            d="M11 11L3.5547 6.03645C2.89015 5.59342 2 6.06981 2 6.8685V19.1315C2 19.9302 2.89015 20.4066 3.5547 19.9635L11 15H13L20.4453 19.9635C21.1099 20.4066 22 19.9302 22 19.1315V6.8685C22 6.06981 21.1099 5.59342 20.4453 6.03645L13 11H11ZM3 6.8685L3 19.1315L10.6972 14H13.3028L21 19.1315V6.8685L13.3028 12H10.6972L3 6.8685Z"
             fill="var(--automation-device-tertiary-color)"
           />
           <path
-            d="M3 6.3712V16.8891L10.3011 12.6302H13.6989L21 16.8891V6.3712L13.6989 10.6302H10.3011L3 6.3712Z"
+            d="M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z"
             fill="var(--automation-device-primary-color)"
           />
           ${handle}
@@ -111,7 +92,7 @@ let ObcValveAnalogTwoWayIcon = class extends LitElement {
           <defs>
             <clipPath id="clip0">
               <path
-                d="M3 6.3712V16.8891L10.3011 12.6302H13.6989L21 16.8891V6.3712L13.6989 10.6302H10.3011L3 6.3712Z"
+                d="M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z"
               />
             </clipPath>
           </defs>

package/dist/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"valve-analog-two-way-icon.js","sources":["../../../src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.ts"],"sourcesContent":["import {LitElement, html, svg, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './valve-analog-two-way-icon.css?inline';\nimport {customElement} from '../../decorator.js';\n\n@customElement('obc-valve-analog-two-way-icon')\nexport class ObcValveAnalogTwoWayIcon extends LitElement {\n @property({type: Number}) value: number = 0;\n @property({type: Boolean}) closed: boolean = false;\n @property({type: Boolean}) vertical: boolean = false;\n\n override render() {\n const transform = this.vertical ? 'transform: rotate(90deg);' : '';\n if (this.closed) {\n return html` <div class=\"wrapper\" style=\"${transform}\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-~~rule=\"evenodd\"\n clip~~-rule=\"evenodd\"\n d=\"M3 16.8892L10 12.8059V10.4546L3 6.37127V16.8892ZM11 9.88024V13.3802L2.75194 18.1916C2.41861 18.386 2 18.1456 2 17.7597V5.50075C2 5.11486 2.41861 4.87442 2.75193 5.06886L11 9.88024ZM21 16.8892V6.37127L14 10.4546V12.8059L21 16.8892ZM13 13.3802L21.2481 18.1916C21.5814 18.386 22 18.1456 22 17.7597V5.50075C22 5.11486 21.5814 4.87442 21.2481 5.06886L13 9.88024V13.3802ZM12 22.6301C11.4477 22.6301 11 22.1824 11 21.6301V15.6301C11 15.0778 11.4477 14.6301 12 14.6301C12.5523 14.6301 13 15.0778 13 15.6301V21.6301C13 22.1824 12.5523 22.6301 12 22.6301Z\"\n fill=\"var(--automation-~~device-secondary-color)\"\n />\n <path\n d=\"M10~~ ~~12.8059L3~~ ~~16.8892V6.37127L10 10.4546V12.8059Z\"\n fill=\"var(--automation~~-~~device~~-~~tertiary~~-~~color)\"\n />\n <path\n d=\"M21 6.37127V16.8892L14 12.8059V10.4546L21 6.37127Z\"\n fill=\"var(--automation-device-tertiary-color)\"\n />\n </svg~~>\n </div>`;\n }\n\n const handleRotation = -(1 - this.value / 100) * 90;\n const handle = svg`\n <g transform=\"rotate(${handleRotation} 12 18.5)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.~~49942~~ 20.~~1303H14~~.~~4994C15.3278~~ ~~20.1303~~ ~~15.9994~~ 19.~~4587~~ ~~15.9994~~ 18.~~6303C15.9994~~ 17.~~8019~~ 15.~~3278~~ ~~17.1303~~ 14.~~4994~~ 17.~~1303H9~~.~~49942C8.67099~~ ~~17.1303~~ ~~7.99942~~ 17.~~8019~~ ~~7.99942~~ 18.~~6303C7.99942~~ 19.~~4587~~ 8.~~67099~~ ~~20.1303~~ 9.~~49942~~ 20.~~1303ZM9.49942~~ 19.~~1303L14.4994~~ 19.~~1303C14.7756~~ ~~19.1303~~ ~~14.9994~~ 18.~~9064~~ ~~14.9994~~ 18.~~6303C14.9994~~ 18.~~3542~~ 14.~~7756~~ ~~18.1303~~ 14.~~4994~~ 18.~~1303L9.49942~~ 18.~~1303C9.22328~~ ~~18.1303~~ ~~8.99942~~ 18.~~3542~~ ~~8.99942~~ 18.~~6303C8.99942~~ 18.~~9064~~ 9.~~22328~~ ~~19.1303~~ 9.~~49942~~ ~~19.1303Z~~\" fill=\"var(--automation-device-tertiary-color)\"/>\n <path d=\"~~M14~~.~~4994~~ 19.~~1303L9.49942~~ 19.~~1303C9.22328~~ ~~19.1303~~ ~~8.99942~~ 18.~~9064~~ ~~8.99942~~ 18.~~6303C8.99942~~ 18.~~3542~~ 9.~~22328~~ ~~18.1303~~ 9.~~49942~~ 18.~~1303L14.4994~~ 18.~~1303C14.7756~~ ~~18.1303~~ ~~14.9994~~ 18.~~3542~~ ~~14.9994~~ 18.~~6303C14.9994~~ 18.~~9064~~ 14.~~7756~~ ~~19.1303~~ 14.~~4994~~ ~~19.1303Z~~\" fill=\"var(--automation-device-primary-color)\"/>\n </g>\n `;\n\n const xmin = 10.5;\n const xmax = 2.5;\n const x = xmin + ((xmax - xmin) * this.value) / 100;\n\n return html`\n <div class=\"wrapper\" style=\"${transform}\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M2 5.~~50075V17~~.~~7597C2~~ 18.~~1456~~ 2~~.41861~~ 18.~~386~~ 2.~~75194~~ 18.~~1916L10~~.~~5714~~ 13.~~6302H13~~.~~4286L21~~.~~2481~~ 18.~~1916C21~~.~~5814~~ 18.~~386~~ 22 18.~~1456~~ 22 17.~~7597V5~~.~~50075C22~~ 5.~~11486~~ 21.~~5814~~ 4.~~87442~~ 21.~~2481~~ 5.~~06886L13~~.~~4286~~ 9.~~63024H10~~.~~5714L2~~.~~75193~~ 5.~~06886C2~~.~~41861 4~~.~~87442~~ ~~2 5~~.~~11486~~ ~~2 5~~.~~50075Z~~\"\n fill=\"var(--automation-device-tertiary-color)\"\n />\n <path\n d=\"M3 6.~~3712V16~~.~~8891L10~~.~~3011~~ 12.~~6302H13.6989L21~~ 16.~~8891V6~~.~~3712L13~~.~~6989~~ ~~10.6302H10.3011L3 6.3712Z~~\"\n fill=\"var(--automation-device-primary-color)\"\n />\n ${handle}\n <g clip-path=\"url(#clip0)\">\n <rect\n x=${xmax}\n y=\"0\"\n width=${x - xmax}\n height=\"24\"\n fill=\"var(--automation-device-secondary-color)\"\n />\n <line\n x1=${x}\n y1=\"0\"\n x2=${x}\n y2=\"24\"\n stroke=\"var(--automation-device-tertiary-color)\"\n stroke-width=\"1\"\n />\n\n <rect\n x=${24 - x}\n y=\"0\"\n width=${x - xmax}\n height=\"24\"\n fill=\"var(--automation-device-secondary-color)\"\n />\n <line\n x1=${24 - x}\n y1=\"0\"\n x2=${24 - x}\n y2=\"24\"\n stroke=\"var(--automation-device-tertiary-color)\"\n stroke-width=\"1\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <path\n d=\"M3 6.~~3712V16~~.~~8891L10~~.~~3011~~ 12.~~6302H13.6989L21~~ 16.~~8891V6~~.~~3712L13~~.~~6989~~ ~~10.6302H10.3011L3 6.3712Z~~\"\n />\n </clipPath>\n </defs>\n </svg>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-valve-analog-two-way-icon': ObcValveAnalogTwoWayIcon;\n }\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;AAMO~~,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,QAAgB;AACf,SAAA,SAAkB;AAClB,SAAA,WAAoB;AAAA,EAAA;AAAA,EAEtC,SAAS;AAChB,UAAM,YAAY,KAAK,WAAW,8BAA8B;AAChE,QAAI,KAAK,QAAQ;AACf,aAAO,oCAAoC,SAAS;AAAA;AAAA;AAAA~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA~~,~~IAwBtD~~;AAEA,UAAM,iBAAiB,EAAE,IAAI,KAAK,QAAQ,OAAO;AACjD,UAAM,SAAS;AAAA,~~6BACU~~,cAAc;AAAA;AAAA;AAAA;AAAA;~~AAMvC~~,UAAM,OAAO;AACb,UAAM,OAAO;AACb,UAAM,IAAI,QAAS,OAAO,QAAQ,KAAK,QAAS;AAEhD,WAAO;AAAA,oCACyB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAgBjC,MAAM;AAAA;AAAA;AAAA,kBAGA,IAAI;AAAA;AAAA,sBAEA,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKX,CAAC;AAAA;AAAA,mBAED,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOF,KAAK,CAAC;AAAA;AAAA,sBAEF,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKX,KAAK,CAAC;AAAA;AAAA,mBAEN,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBvB;AAGF;~~AA9Ga~~,~~yBA6GK~~,SAAS,UAAU,YAAY;~~AA5GrB~~,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,yBACe,WAAA,SAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAFd,yBAEgB,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAHd,yBAGgB,WAAA,YAAA,CAAA;AAHhB,2BAAN,gBAAA;AAAA,EADN,cAAc,+BAA+B;AAAA,GACjC,wBAAA;"}
1	+ {"version":3,"file":"valve-analog-two-way-icon.js","sources":["../../../src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.ts"],"sourcesContent":["import {LitElement, html, svg, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './valve-analog-two-way-icon.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-twoway-analog-closed.js';\n\n@customElement('obc-valve-analog-two-way-icon')\nexport class ObcValveAnalogTwoWayIcon extends LitElement {\n @property({type: Number}) value: number = 0;\n @property({type: Boolean}) closed: boolean = false;\n @property({type: Boolean}) vertical: boolean = false;\n\n override render() {\n const transform = this.vertical ? 'transform: rotate(90deg);' : '';\n if (this.closed) {\n return html` <div class=\"wrapper\" style=\"${transform}\">\n <obi-twoway-analog-closed useCssColor> </obi-twoway-analog-closed>\n </div>`;\n }\n\n const handleRotation = -(1 - this.value / 100) * 90;\n const handleTranslation = (1 - this.value / 100) * 2;\n const handle = svg`\n <g transform=\"translate(0, ${handleTranslation}) rotate(${handleRotation} 12 3.5) \">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.5 5H14.5C15.3284 5 16 4.32843 16 3.5C16 2.67157 15.3284 2 14.5 2H9.5C8.67157 2 8 2.67157 8 3.5C8 4.32843 8.67157 5 9.5 5ZM9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z\" fill=\"var(--automation-device-tertiary-color)\"/>\n <path d=\"M9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z\" fill=\"var(--automation-device-primary-color)\"/>\n </g>\n `;\n\n const xmin = 10.5;\n const xmax = 2.5;\n const x = xmin + ((xmax - xmin) * this.value) / 100;\n\n return html`\n <div class=\"wrapper\" style=\"${transform}\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11 11L3.5547 6.03645C2.89015 5.59342 2 6.06981 2 6.8685V19.1315C2 19.9302 2.89015 20.4066 3.5547 19.9635L11 15H13L20.4453 19.9635C21.1099 20.4066 22 19.9302 22 19.1315V6.8685C22 6.06981 21.1099 5.59342 20.4453 6.03645L13 11H11ZM3 6.8685L3 19.1315L10.6972 14H13.3028L21 19.1315V6.8685L13.3028 12H10.6972L3 6.8685Z\"\n fill=\"var(--automation-device-tertiary-color)\"\n />\n <path\n d=\"M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z\"\n fill=\"var(--automation-device-primary-color)\"\n />\n ${handle}\n <g clip-path=\"url(#clip0)\">\n <rect\n x=${xmax}\n y=\"0\"\n width=${x - xmax}\n height=\"24\"\n fill=\"var(--automation-device-secondary-color)\"\n />\n <line\n x1=${x}\n y1=\"0\"\n x2=${x}\n y2=\"24\"\n stroke=\"var(--automation-device-tertiary-color)\"\n stroke-width=\"1\"\n />\n\n <rect\n x=${24 - x}\n y=\"0\"\n width=${x - xmax}\n height=\"24\"\n fill=\"var(--automation-device-secondary-color)\"\n />\n <line\n x1=${24 - x}\n y1=\"0\"\n x2=${24 - x}\n y2=\"24\"\n stroke=\"var(--automation-device-tertiary-color)\"\n stroke-width=\"1\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <path\n d=\"M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z\"\n />\n </clipPath>\n </defs>\n </svg>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-valve-analog-two-way-icon': ObcValveAnalogTwoWayIcon;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAOO,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,QAAgB;AACf,SAAA,SAAkB;AAClB,SAAA,WAAoB;AAAA,EAAA;AAAA,EAEtC,SAAS;AAChB,UAAM,YAAY,KAAK,WAAW,8BAA8B;AAChE,QAAI,KAAK,QAAQ;AACf,aAAO,oCAAoC,SAAS;AAAA;AAAA;AAAA,IAGtD;AAEA,UAAM,iBAAiB,EAAE,IAAI,KAAK,QAAQ,OAAO;AACjD,UAAM,qBAAqB,IAAI,KAAK,QAAQ,OAAO;AACnD,UAAM,SAAS;AAAA,mCACgB,iBAAiB,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA;AAM1E,UAAM,OAAO;AACb,UAAM,OAAO;AACb,UAAM,IAAI,QAAS,OAAO,QAAQ,KAAK,QAAS;AAEhD,WAAO;AAAA,oCACyB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAgBjC,MAAM;AAAA;AAAA;AAAA,kBAGA,IAAI;AAAA;AAAA,sBAEA,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKX,CAAC;AAAA;AAAA,mBAED,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOF,KAAK,CAAC;AAAA;AAAA,sBAEF,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKX,KAAK,CAAC;AAAA;AAAA,mBAEN,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBvB;AAGF;AA1Fa,yBAyFK,SAAS,UAAU,YAAY;AAxFrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,yBACe,WAAA,SAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAFd,yBAEgB,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAHd,yBAGgB,WAAA,YAAA,CAAA;AAHhB,2BAAN,gBAAA;AAAA,EADN,cAAc,+BAA+B;AAAA,GACjC,wBAAA;"}

package/dist/components/accordion-card/accordion-card.css.js CHANGED Viewed

@@ -242,7 +242,7 @@ const compentStyle = css`
     "liga" off,
     "clig" off,
     "ss04" on;
-      flex: 1 0 0;
+      flex: 0 0 auto;
       width: 100%;
       overflow: hidden;
       color: var(--element-neutral-color);

package/dist/components/dropdown-button/dropdown-button.d.ts CHANGED Viewed

@@ -41,6 +41,8 @@ export type DropdownButtonOption = {
  * - `options` (Array): List of selectable options, each with a `value` (string), `label` (string), and optional `level` (number) for indentation.
  * - `value` (string): The currently selected option's value. If not set, defaults to the first option.
  * - `fullWidth` (boolean): Expands the component to fill its container when true. Default is false.
+ * - `allowEmptySelection` (boolean): When true, a `value` that does not match any option leaves the button with no option selected, showing `placeholder` instead of defaulting to the first option. Default is false.
+ * - `placeholder` (string): Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string.
  *
  * ### Events
  * - `dropdown-change` – Fired when the user selects a different option. The event detail includes `{ value, label }` of the selected option.
@@ -90,6 +92,15 @@ export declare class ObcDropdownButton extends LitElement {
      * If true, the select expands to fill the width of its container. Default is false.
      */
     fullWidth: boolean;
+    /**
+     * If true, a `value` that does not match any option leaves the button with no option selected,
+     * showing `placeholder` instead of defaulting to the first option. Default is false.
+     */
+    allowEmptySelection: boolean;
+    /**
+     * Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string.
+     */
+    placeholder: string;
     /**
      * Controls the button's display type.
      * - `label`: Text label only (default)

package/dist/components/dropdown-button/dropdown-button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-button.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-button/dropdown-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA4B,cAAc,EAAC,MAAM,KAAK,CAAC;AAGzE,OAAO,sCAAsC,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAI7B,oBAAY,kBAAkB;IAC5B,KAAK,UAAU;IACf,IAAI,SAAS;IACb,SAAS,eAAe;CACzB;AAED,MAAM,MAAM,4BAA4B,GAAG,WAAW,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG~~;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;;;;;;OAQG;IACsB,OAAO,EAAE,oBAAoB,EAAE,CAAM;IAE9D;;OAEG;IACuB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAS;IAErD;;OAEG;IACwB,SAAS,UAAS;IAE7C;;;;;OAKG;IACuB,IAAI,EAAE,kBAAkB,CAA4B;IAE9E;;OAEG;IACwB,OAAO,UAAS;IAE3C;;OAEG;IACwB,WAAW,UAAS;IAEpB,IAAI,UAAS;IAE/B,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,aAAa,CAAM;IAE3B,iBAAiB,IAAI,IAAI;IAKzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAM5D,OAAO,CAAC,oBAAoB;~~IAYnB~~,MAAM;~~IA2Cf~~;;;;;OAKG;IACH,OAAO,CAAC,aAAa;IAkBrB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
1	+ {"version":3,"file":"dropdown-button.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-button/dropdown-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA4B,cAAc,EAAC,MAAM,KAAK,CAAC;AAGzE,OAAO,sCAAsC,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAI7B,oBAAY,kBAAkB;IAC5B,KAAK,UAAU;IACf,IAAI,SAAS;IACb,SAAS,eAAe;CACzB;AAED,MAAM,MAAM,4BAA4B,GAAG,WAAW,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;;;;;;OAQG;IACsB,OAAO,EAAE,oBAAoB,EAAE,CAAM;IAE9D;;OAEG;IACuB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAS;IAErD;;OAEG;IACwB,SAAS,UAAS;IAE7C;;;OAGG;IACwB,mBAAmB,UAAS;IAEvD;;OAEG;IACuB,WAAW,SAAM;IAE3C;;;;;OAKG;IACuB,IAAI,EAAE,kBAAkB,CAA4B;IAE9E;;OAEG;IACwB,OAAO,UAAS;IAE3C;;OAEG;IACwB,WAAW,UAAS;IAEpB,IAAI,UAAS;IAE/B,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,aAAa,CAAM;IAE3B,iBAAiB,IAAI,IAAI;IAKzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAM5D,OAAO,CAAC,oBAAoB;IAuBnB,MAAM;IAgDf;;;;;OAKG;IACH,OAAO,CAAC,aAAa;IAkBrB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/components/dropdown-button/dropdown-button.js CHANGED Viewed

@@ -27,6 +27,8 @@ let ObcDropdownButton = class extends LitElement {
     this.options = [];
     this.disabled = false;
     this.fullWidth = false;
+    this.allowEmptySelection = false;
+    this.placeholder = "";
     this.type = "label";
     this.openTop = false;
     this.integration = false;
@@ -49,8 +51,19 @@ let ObcDropdownButton = class extends LitElement {
       this.selectedLabel = "";
       return;
     }
-    this.selectedValue = this.value || this.options[0].value;
-    this.selectedLabel = this.value ? this.options.find((item) => item.value === this.value)?.label || "" : this.options[0].label;
+    const match = this.value ? this.options.find((item) => item.value === this.value) : void 0;
+    if (match) {
+      this.selectedValue = match.value;
+      this.selectedLabel = match.label;
+      return;
+    }
+    if (this.allowEmptySelection) {
+      this.selectedValue = "";
+      this.selectedLabel = this.placeholder;
+      return;
+    }
+    this.selectedValue = this.options[0].value;
+    this.selectedLabel = this.options[0].label;
   }
   render() {
     return html`
@@ -72,6 +85,9 @@ let ObcDropdownButton = class extends LitElement {
           </div>
         </div>
         <select @change=${this.changeHandler} ?disabled=${this.disabled}>
+          ${this.allowEmptySelection && this.selectedValue === "" ? html`<option value="" disabled selected hidden>
+                ${this.placeholder}
+              </option>` : nothing}
           ${this.options.map((item) => {
       const indent = item.level ? (item.level - 1) * 2 : 0;
       const indentText = [];
@@ -124,6 +140,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcDropdownButton.prototype, "fullWidth", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcDropdownButton.prototype, "allowEmptySelection", 2);
+__decorateClass([
+  property({ type: String })
+], ObcDropdownButton.prototype, "placeholder", 2);
 __decorateClass([
   property({ type: String })
 ], ObcDropdownButton.prototype, "type", 2);

package/dist/components/dropdown-button/dropdown-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-button.js","sources":["../../../src/components/dropdown-button/dropdown-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing, PropertyValues} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport compentStyle from './dropdown-button.css?inline';\nimport '../../icons/icon-drop-down-google.js';\nimport '../button/button.js';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum DropdownButtonType {\n label = 'label',\n icon = 'icon',\n labelIcon = 'label-icon',\n}\n\nexport type ObcDropdownButtonChangeEvent = CustomEvent<{\n value: string;\n label: string;\n}>;\n\nexport type DropdownButtonOption = {\n value: string;\n label: string;\n level?: number;\n};\n\n/*\n `<obc-dropdown-button>` – A dropdown select component for choosing a single option from a list.\n \n Presents a styled dropdown menu with a visible label and icon, allowing users to select one value from a set of options. The component displays the currently selected label and provides a native select element for accessibility and keyboard navigation.\n \n ### Features\n * - Single selection: Allows users to pick one option from a provided list.\n * - Customizable options: Accepts an array of `{value, label, level?}` objects for flexible option content and optional indentation (via `level`).\n * - Visual label and icon: Shows the selected label and a dropdown arrow icon (`<obi-drop-down-google>`).\n * - Full width mode: Can expand to fill the width of its container using the `fullWidth` property.\n * - Accessible: Uses a native `<select>` element under the hood for keyboard and screen reader support.\n * - Focus styling: Highlights the visible wrapper when the select is focused.\n \n ### Variants\n * - Default: Renders at intrinsic width, sized to content.\n * - Full Width: When `fullWidth` is true, stretches to fill the parent container.\n \n ### Usage Guidelines\n * Use `<obc-dropdown-button>` when you need a compact, accessible dropdown for single-choice selection. Ideal for forms, filters, and settings where users must pick one value from a list. Options can be grouped visually by providing a `level` property for indentation.\n \n TODO(designer): Confirm if there are recommended use cases or constraints for the `level` property (e.g., maximum nesting, visual grouping intent).\n \n ### Properties\n * - `options` (Array): List of selectable options, each with a `value` (string), `label` (string), and optional `level` (number) for indentation.\n * - `value` (string): The currently selected option's value. If not set, defaults to the first option.\n * - `fullWidth` (boolean): Expands the component to fill its container when true. Default is false.\n \n ### Events\n * - `dropdown-change` – Fired when the user selects a different option. The event detail includes `{ value, label }` of the selected option.\n * - `change` – Fired when the user selects a different option. The event detail includes `{ value, label }` of the selected option.\n \n ### Best Practices\n * - Always provide a non-empty `options` array; if empty, the select will show no label or options.\n * - Use unique `value` strings for each option to ensure correct selection and event detail.\n * - For grouped or indented options, set the `level` property (e.g., `level: 2` for sub-options).\n * - Avoid using for multi-select scenarios; use a dedicated multi-select component if multiple selections are needed.\n \n ### Example:\n * ```html\n * <obc-dropdown-button\n * .options=${[\n * { value: 'volvo', label: 'Volvo' },\n * { value: 'xc90', label: 'XC 90', level: 2 },\n * { value: 'mercedes', label: 'Mercedes' },\n * { value: 'audi', label: 'Audi' }\n * ]}\n * value=\"volvo\"\n * ></obc-dropdown-button>\n * ```\n \n @slot - (No named slots; all content is provided via properties)\n * @slot icon - Icon displayed at the start of the button when `type` is `icon` or `label-icon`.\n * @fires dropdown-change {ObcDropdownButtonChangeEvent} - Fires when the value of the select changes\n * @fires change {ObcDropdownButtonChangeEvent} - Fires when the value of the select changes\n /\n@customElement('obc-dropdown-button')\nexport class ObcDropdownButton extends LitElement {\n /\n List of selectable options. Each option is an object with a `value` (string), `label` (string), and optional `level` (number) for indentation/grouping.\n \n Example:\n * [\n * { value: 'volvo', label: 'Volvo' },\n * { value: 'xc90', label: 'XC 90', level: 2 }\n * ]\n /\n @property({type: Array}) options: DropdownButtonOption[] = [];\n\n /\n The value of the currently selected option. If not set, defaults to the first option in the list.\n /\n @property({type: String}) value: string \| undefined;\n @property({type: Boolean}) disabled: boolean = false;\n\n /\n If true, the select expands to fill the width of its container. Default is false.\n /\n @property({type: Boolean}) fullWidth = false;\n\n /\n Controls the button's display type.\n * - `label`: Text label only (default)\n * - `icon`: Icon only, no label\n * - `label-icon`: Icon before the label\n /\n @property({type: String}) type: DropdownButtonType = DropdownButtonType.label;\n\n /\n If true, the dropdown menu opens above the button.\n /\n @property({type: Boolean}) openTop = false;\n\n /\n If true, the select is integration style. Default is false, only for integration bar.\n /\n @property({type: Boolean}) integration = false;\n\n @property({type: Boolean}) flat = false;\n\n @state() private selectedValue = '';\n @state() private selectedLabel = '';\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.updateSelectedValues();\n }\n\n override willUpdate(changedProperties: PropertyValues): void {\n if (changedProperties.has('value') \|\| changedProperties.has('options')) {\n this.updateSelectedValues();\n }\n }\n\n private updateSelectedValues(): void {\n if (this.options.length === 0) {\n this.selectedValue = '';\n this.selectedLabel = '';\n return;\n }\n this.selectedValue = this.value \|\| this.options[0].value;\n this.selectedLabel = this.value\n ? this.options.find((item) => item.value === this.value)?.label \|\| ''\n : this.options[0].label;\n }\n\n override render() {\n return html`\n <div\n class=${classMap({\n wrapper: true,\n 'full-width': this.fullWidth,\n 'open-top': this.openTop,\n integration: this.integration,\n flat: this.flat && !this.integration,\n disabled: this.disabled,\n })}\n >\n <div class=\"visible-wrapper\">\n ${this.type !== DropdownButtonType.label\n ? html`<div class=\"icon-container\"><slot name=\"icon\"></slot></div>`\n : nothing}\n ${this.type !== DropdownButtonType.icon\n ? html`<div class=\"label\">${this.selectedLabel}</div>`\n : nothing}\n <div class=\"icon\">\n <obi-drop-down-google></obi-drop-down-google>\n </div>\n </div>\n <select @change=${this.changeHandler} ?disabled=${this.disabled}>\n ${this.options.map((item) => {\n const indent = item.level ? (item.level - 1) 2 : 0;\n const indentText = [];\n for (let i = 0; i < indent; i++) {\n indentText.push(html` `);\n }\n\n return html`<option\n value=${item.value}\n ?selected=${item.value === this.selectedValue}\n >\n ${indentText}${item.label}\n </option>`;\n })}\n </select>\n </div>\n `;\n }\n\n /*\n Handles the dropdown-change and change event when a new option is selected. Updates the selected value and label, and dispatches a `dropdown-change` and 'change' event with the new selection.\n \n @fires dropdown-change {ObcDropdownButtonChangeEvent} - Fired when the user selects a different option.\n * @fires change {ObcDropdownButtonChangeEvent} - Fired when the user selects a different option.\n */\n private changeHandler(event: Event) {\n const target = event.target as HTMLSelectElement;\n this.selectedValue = target.value;\n this.selectedLabel = this.options\n .find((item) => item.value === this.selectedValue)!\n .label.trim();\n this.dispatchEvent(\n new CustomEvent('dropdown-change', {\n detail: {value: this.selectedValue, label: this.selectedLabel},\n })\n );\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {value: this.selectedValue, label: this.selectedLabel},\n })\n );\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-dropdown-button': ObcDropdownButton;\n }\n}\n"],"names":["DropdownButtonType"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown-button.js","sources":["../../../src/components/dropdown-button/dropdown-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing, PropertyValues} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport compentStyle from './dropdown-button.css?inline';\nimport '../../icons/icon-drop-down-google.js';\nimport '../button/button.js';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum DropdownButtonType {\n label = 'label',\n icon = 'icon',\n labelIcon = 'label-icon',\n}\n\nexport type ObcDropdownButtonChangeEvent = CustomEvent<{\n value: string;\n label: string;\n}>;\n\nexport type DropdownButtonOption = {\n value: string;\n label: string;\n level?: number;\n};\n\n/*\n `<obc-dropdown-button>` – A dropdown select component for choosing a single option from a list.\n \n Presents a styled dropdown menu with a visible label and icon, allowing users to select one value from a set of options. The component displays the currently selected label and provides a native select element for accessibility and keyboard navigation.\n \n ### Features\n * - Single selection: Allows users to pick one option from a provided list.\n * - Customizable options: Accepts an array of `{value, label, level?}` objects for flexible option content and optional indentation (via `level`).\n * - Visual label and icon: Shows the selected label and a dropdown arrow icon (`<obi-drop-down-google>`).\n * - Full width mode: Can expand to fill the width of its container using the `fullWidth` property.\n * - Accessible: Uses a native `<select>` element under the hood for keyboard and screen reader support.\n * - Focus styling: Highlights the visible wrapper when the select is focused.\n \n ### Variants\n * - Default: Renders at intrinsic width, sized to content.\n * - Full Width: When `fullWidth` is true, stretches to fill the parent container.\n \n ### Usage Guidelines\n * Use `<obc-dropdown-button>` when you need a compact, accessible dropdown for single-choice selection. Ideal for forms, filters, and settings where users must pick one value from a list. Options can be grouped visually by providing a `level` property for indentation.\n \n TODO(designer): Confirm if there are recommended use cases or constraints for the `level` property (e.g., maximum nesting, visual grouping intent).\n \n ### Properties\n * - `options` (Array): List of selectable options, each with a `value` (string), `label` (string), and optional `level` (number) for indentation.\n * - `value` (string): The currently selected option's value. If not set, defaults to the first option.\n * - `fullWidth` (boolean): Expands the component to fill its container when true. Default is false.\n * - `allowEmptySelection` (boolean): When true, a `value` that does not match any option leaves the button with no option selected, showing `placeholder` instead of defaulting to the first option. Default is false.\n * - `placeholder` (string): Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string.\n \n ### Events\n * - `dropdown-change` – Fired when the user selects a different option. The event detail includes `{ value, label }` of the selected option.\n * - `change` – Fired when the user selects a different option. The event detail includes `{ value, label }` of the selected option.\n \n ### Best Practices\n * - Always provide a non-empty `options` array; if empty, the select will show no label or options.\n * - Use unique `value` strings for each option to ensure correct selection and event detail.\n * - For grouped or indented options, set the `level` property (e.g., `level: 2` for sub-options).\n * - Avoid using for multi-select scenarios; use a dedicated multi-select component if multiple selections are needed.\n \n ### Example:\n * ```html\n * <obc-dropdown-button\n * .options=${[\n * { value: 'volvo', label: 'Volvo' },\n * { value: 'xc90', label: 'XC 90', level: 2 },\n * { value: 'mercedes', label: 'Mercedes' },\n * { value: 'audi', label: 'Audi' }\n * ]}\n * value=\"volvo\"\n * ></obc-dropdown-button>\n * ```\n \n @slot - (No named slots; all content is provided via properties)\n * @slot icon - Icon displayed at the start of the button when `type` is `icon` or `label-icon`.\n * @fires dropdown-change {ObcDropdownButtonChangeEvent} - Fires when the value of the select changes\n * @fires change {ObcDropdownButtonChangeEvent} - Fires when the value of the select changes\n /\n@customElement('obc-dropdown-button')\nexport class ObcDropdownButton extends LitElement {\n /\n List of selectable options. Each option is an object with a `value` (string), `label` (string), and optional `level` (number) for indentation/grouping.\n \n Example:\n * [\n * { value: 'volvo', label: 'Volvo' },\n * { value: 'xc90', label: 'XC 90', level: 2 }\n * ]\n /\n @property({type: Array}) options: DropdownButtonOption[] = [];\n\n /\n The value of the currently selected option. If not set, defaults to the first option in the list.\n /\n @property({type: String}) value: string \| undefined;\n @property({type: Boolean}) disabled: boolean = false;\n\n /\n If true, the select expands to fill the width of its container. Default is false.\n /\n @property({type: Boolean}) fullWidth = false;\n\n /\n If true, a `value` that does not match any option leaves the button with no option selected,\n * showing `placeholder` instead of defaulting to the first option. Default is false.\n /\n @property({type: Boolean}) allowEmptySelection = false;\n\n /\n Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string.\n /\n @property({type: String}) placeholder = '';\n\n /\n Controls the button's display type.\n * - `label`: Text label only (default)\n * - `icon`: Icon only, no label\n * - `label-icon`: Icon before the label\n /\n @property({type: String}) type: DropdownButtonType = DropdownButtonType.label;\n\n /\n If true, the dropdown menu opens above the button.\n /\n @property({type: Boolean}) openTop = false;\n\n /\n If true, the select is integration style. Default is false, only for integration bar.\n /\n @property({type: Boolean}) integration = false;\n\n @property({type: Boolean}) flat = false;\n\n @state() private selectedValue = '';\n @state() private selectedLabel = '';\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.updateSelectedValues();\n }\n\n override willUpdate(changedProperties: PropertyValues): void {\n if (changedProperties.has('value') \|\| changedProperties.has('options')) {\n this.updateSelectedValues();\n }\n }\n\n private updateSelectedValues(): void {\n if (this.options.length === 0) {\n this.selectedValue = '';\n this.selectedLabel = '';\n return;\n }\n const match = this.value\n ? this.options.find((item) => item.value === this.value)\n : undefined;\n if (match) {\n this.selectedValue = match.value;\n this.selectedLabel = match.label;\n return;\n }\n if (this.allowEmptySelection) {\n this.selectedValue = '';\n this.selectedLabel = this.placeholder;\n return;\n }\n this.selectedValue = this.options[0].value;\n this.selectedLabel = this.options[0].label;\n }\n\n override render() {\n return html`\n <div\n class=${classMap({\n wrapper: true,\n 'full-width': this.fullWidth,\n 'open-top': this.openTop,\n integration: this.integration,\n flat: this.flat && !this.integration,\n disabled: this.disabled,\n })}\n >\n <div class=\"visible-wrapper\">\n ${this.type !== DropdownButtonType.label\n ? html`<div class=\"icon-container\"><slot name=\"icon\"></slot></div>`\n : nothing}\n ${this.type !== DropdownButtonType.icon\n ? html`<div class=\"label\">${this.selectedLabel}</div>`\n : nothing}\n <div class=\"icon\">\n <obi-drop-down-google></obi-drop-down-google>\n </div>\n </div>\n <select @change=${this.changeHandler} ?disabled=${this.disabled}>\n ${this.allowEmptySelection && this.selectedValue === ''\n ? html`<option value=\"\" disabled selected hidden>\n ${this.placeholder}\n </option>`\n : nothing}\n ${this.options.map((item) => {\n const indent = item.level ? (item.level - 1) 2 : 0;\n const indentText = [];\n for (let i = 0; i < indent; i++) {\n indentText.push(html` `);\n }\n\n return html`<option\n value=${item.value}\n ?selected=${item.value === this.selectedValue}\n >\n ${indentText}${item.label}\n </option>`;\n })}\n </select>\n </div>\n `;\n }\n\n /*\n Handles the dropdown-change and change event when a new option is selected. Updates the selected value and label, and dispatches a `dropdown-change` and 'change' event with the new selection.\n \n @fires dropdown-change {ObcDropdownButtonChangeEvent} - Fired when the user selects a different option.\n * @fires change {ObcDropdownButtonChangeEvent} - Fired when the user selects a different option.\n */\n private changeHandler(event: Event) {\n const target = event.target as HTMLSelectElement;\n this.selectedValue = target.value;\n this.selectedLabel = this.options\n .find((item) => item.value === this.selectedValue)!\n .label.trim();\n this.dispatchEvent(\n new CustomEvent('dropdown-change', {\n detail: {value: this.selectedValue, label: this.selectedLabel},\n })\n );\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {value: this.selectedValue, label: this.selectedLabel},\n })\n );\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-dropdown-button': ObcDropdownButton;\n }\n}\n"],"names":["DropdownButtonType"],"mappings":"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"}

package/dist/components/keyboard-numeric/keyboard-numeric.d.ts CHANGED Viewed

@@ -41,10 +41,9 @@ export declare class ObcKeyboardNumeric extends LitElement {
     /** Optional regex pattern for validation (applies to both keyboard and direct input) */
     validationPattern: string;
     private content;
+    private get effectiveValidationPattern();
     /** Validates if a character can be added to the current value */
     private canAddCharacter;
-    /** Validates that all characters in a value are allowed */
-    private isValidValue;
     private handleCloseClick;
     private handleKeyPress;
     private handleCalculationKey;

package/dist/components/keyboard-numeric/keyboard-numeric.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboard-numeric.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard-numeric/keyboard-numeric.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,2BAA2B,CAAC;AACnC,OAAO,6CAA6C,CAAC;AACrD,OAAO,EAEL,4BAA4B,EAG7B,MAAM,6CAA6C,CAAC;AAGrD,oBAAY,sBAAsB;IAChC,QAAQ,aAAa;IACrB,IAAI,SAAS;CACd;AAED,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;~~AAkDD~~,qBACa,kBAAmB,SAAQ,UAAU;IACtB,IAAI,EAAE,sBAAsB,CACpB;IAElC,wFAAwF;IAC7D,WAAW,UAAS;IAE/C,qCAAqC;IACX,KAAK,SAAoB;IAEnD,0BAA0B;IACA,KAAK,SAAM;IAErC,2DAA2D;IAChC,cAAc,UAAS;IAElD,8EAA8E;IACnD,WAAW,UAAS;IAE/C,0DAA0D;IAChC,UAAU,SAAM;IAE1C,mDAAmD;IACxB,cAAc,UAAS;IAElD,kCAAkC;IACR,IAAI,SAAM;IAEpC,oCAAoC;IACV,mBAAmB,EAAE,4BAA4B,CACtC;IAErC,wFAAwF;IAC9D,iBAAiB,SAAM;IAExC,OAAO,CAAC,OAAO,CACY;IAEpC,iEAAiE;IACjE,OAAO,CAAC,eAAe;IA+BvB,~~2DAA2D;IAC3D,~~OAAO,CAAC,~~YAAY;IAIpB,OAAO,CAAC,~~gBAAgB;IAMxB,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,kBAAkB;IA0B1B,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,WAAW;~~IAqBnB~~,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,oBAAoB;IAuC5B,OAAO,CAAC,cAAc;IA6BtB,OAAO,CAAC,gBAAgB;~~cAoBL~~,MAAM;IAyEzB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}
1	+ {"version":3,"file":"keyboard-numeric.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard-numeric/keyboard-numeric.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,2BAA2B,CAAC;AACnC,OAAO,6CAA6C,CAAC;AACrD,OAAO,EAEL,4BAA4B,EAG7B,MAAM,6CAA6C,CAAC;AAGrD,oBAAY,sBAAsB;IAChC,QAAQ,aAAa;IACrB,IAAI,SAAS;CACd;AAED,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAsDD,qBACa,kBAAmB,SAAQ,UAAU;IACtB,IAAI,EAAE,sBAAsB,CACpB;IAElC,wFAAwF;IAC7D,WAAW,UAAS;IAE/C,qCAAqC;IACX,KAAK,SAAoB;IAEnD,0BAA0B;IACA,KAAK,SAAM;IAErC,2DAA2D;IAChC,cAAc,UAAS;IAElD,8EAA8E;IACnD,WAAW,UAAS;IAE/C,0DAA0D;IAChC,UAAU,SAAM;IAE1C,mDAAmD;IACxB,cAAc,UAAS;IAElD,kCAAkC;IACR,IAAI,SAAM;IAEpC,oCAAoC;IACV,mBAAmB,EAAE,4BAA4B,CACtC;IAErC,wFAAwF;IAC9D,iBAAiB,SAAM;IAExC,OAAO,CAAC,OAAO,CACY;IAEpC,OAAO,KAAK,0BAA0B,GAKrC;IAED,iEAAiE;IACjE,OAAO,CAAC,eAAe;IA+BvB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,kBAAkB;IA0B1B,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,oBAAoB;IAuC5B,OAAO,CAAC,cAAc;IA6BtB,OAAO,CAAC,gBAAgB;cAqBL,MAAM;IAyEzB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}

package/dist/components/keyboard-numeric/keyboard-numeric.js CHANGED Viewed

@@ -75,6 +75,9 @@ const ALLOWED_CHARS = [
   "/"
 ];
 const OPERATORS = ["+", "-", "–", "×", "÷", "*", "/"];
+const ALLOWED_CHARS_PATTERN = `^[${ALLOWED_CHARS.map(
+  (c) => c.replace(/[-.*+?^${}()|[\]\\]/g, "\\$&")
+).join("")}]*$`;
 let ObcKeyboardNumeric = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -91,6 +94,12 @@ let ObcKeyboardNumeric = class extends LitElement {
     this.validationPattern = "";
     this.content = "numbers";
   }
+  get effectiveValidationPattern() {
+    if (!this.validationPattern) {
+      return ALLOWED_CHARS_PATTERN;
+    }
+    return `^(?=${ALLOWED_CHARS_PATTERN})(?=${this.validationPattern}).*$`;
+  }
   /** Validates if a character can be added to the current value */
   canAddCharacter(char) {
     const potentialValue = this.value + char;
@@ -112,10 +121,6 @@ let ObcKeyboardNumeric = class extends LitElement {
     }
     return true;
   }
-  /** Validates that all characters in a value are allowed */
-  isValidValue(value) {
-    return [...value].every((char) => ALLOWED_CHARS.includes(char));
-  }
   handleCloseClick() {
     this.dispatchEvent(
       new CustomEvent("close-click", { bubbles: true, composed: true })
@@ -190,17 +195,6 @@ let ObcKeyboardNumeric = class extends LitElement {
   handleInput(e) {
     const input = e.target;
     const newValue = input.displayValue;
-    if (this.validationPattern && newValue) {
-      const regex = new RegExp(this.validationPattern);
-      if (!regex.test(newValue)) {
-        input.displayOverride = this.value;
-        return;
-      }
-    }
-    if (newValue && !this.isValidValue(newValue)) {
-      input.displayOverride = this.value;
-      return;
-    }
     this.value = newValue;
     this.dispatchValueChange();
   }
@@ -284,6 +278,7 @@ let ObcKeyboardNumeric = class extends LitElement {
         .textAlign=${this.inputFieldTextAlign}
         .size=${ObcNumberInputFieldSize.Large}
         .helperText=${this.helperText}
+        .validationPattern=${this.effectiveValidationPattern}
         ?hasLeadingIcon=${this.hasLeadingIcon}
         placeholder="00.0"
         @input=${this.handleInput}

package/dist/components/keyboard-numeric/keyboard-numeric.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboard-numeric.js","sources":["../../../src/components/keyboard-numeric/keyboard-numeric.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './keyboard-numeric.css?inline';\n\nimport '../icon-button/icon-button.js';\nimport '../../icons/icon-close-google.js';\nimport '../../icons/icon-backspace-google.js';\nimport '../button/button.js';\nimport '../../icons/icon-up-iec.js';\nimport '../../icons/icon-down-iec.js';\nimport '../../icons/icon-multiply.js';\nimport '../../icons/icon-divide.js';\nimport '../../icons/icon-equal.js';\nimport '../number-input-field/number-input-field.js';\nimport {\n ObcNumberInputField,\n ObcNumberInputFieldTextAlign,\n ObcNumberInputFieldSize,\n ObcNumberInputFieldInputEvent,\n} from '../number-input-field/number-input-field.js';\nimport {parseNumberInput} from '../number-input-field/number-input-format.js';\n\nexport enum ObcKeyboardNumericType {\n Floating = 'floating',\n Flat = 'flat',\n}\n\nexport enum ObcKeyboardNumericContent {\n Numbers = 'numbers',\n Symbols = 'symbols',\n}\n\n// Key layouts\nconst NUMBER_KEYS = [\n ['1', '2', '3'],\n ['4', '5', '6'],\n ['7', '8', '9'],\n ['–', '0', ','],\n];\n\nconst SYMBOL_KEYS = [\n ['!', '@', '#'],\n ['$', '%', '&'],\n ['(', ')', '/'],\n ['–', '0', ','],\n];\n\n// All allowed characters for validation\nconst ALLOWED_CHARS = [\n '0',\n '1',\n '2',\n '3',\n '4',\n '5',\n '6',\n '7',\n '8',\n '9',\n '–',\n '-',\n ',',\n '.',\n '+',\n '×',\n '÷',\n '=',\n '!',\n '@',\n '#',\n '$',\n '%',\n '&',\n '(',\n ')',\n '/',\n];\n\nconst OPERATORS = ['+', '-', '–', '×', '÷', '', '/'];\n\n@customElement('obc-keyboard-numeric')\nexport class ObcKeyboardNumeric extends LitElement {\n @property({type: String}) type: ObcKeyboardNumericType =\n ObcKeyboardNumericType.Floating;\n\n /* Shows the top bar with label and close button (only applicable for floating type) /\n @property({type: Boolean}) hasTitleBar = false;\n\n /* Label displayed in the top bar /\n @property({type: String}) label = 'Parameter name';\n\n /* Current input value /\n @property({type: String}) value = '';\n\n /* Shows the calculation row with +, -, ×, ÷, = buttons /\n @property({type: Boolean}) hasCalculation = false;\n\n /* Shows the #+= / 123 toggle button to switch between numbers and symbols /\n @property({type: Boolean}) has2Symbols = false;\n\n /* Helper text content displayed below the input field /\n @property({type: String}) helperText = '';\n\n /* Shows a leading icon slot in the input field /\n @property({type: Boolean}) hasLeadingIcon = false;\n\n /* Unit text (%, kg, °C, etc.) /\n @property({type: String}) unit = '';\n\n /* Text alignment in input field /\n @property({type: String}) inputFieldTextAlign: ObcNumberInputFieldTextAlign =\n ObcNumberInputFieldTextAlign.Right;\n\n /* Optional regex pattern for validation (applies to both keyboard and direct input) /\n @property({type: String}) validationPattern = '';\n\n @state() private content: ObcKeyboardNumericContent =\n ObcKeyboardNumericContent.Numbers;\n\n /* Validates if a character can be added to the current value /\n private canAddCharacter(char: string): boolean {\n const potentialValue = this.value + char;\n\n if (this.validationPattern) {\n const regex = new RegExp(this.validationPattern);\n return regex.test(potentialValue);\n }\n\n if (!ALLOWED_CHARS.includes(char)) {\n return false;\n }\n\n const lastChar = this.value.slice(-1);\n\n // Only one decimal separator per number segment\n if (char === ',' \|\| char === '.') {\n const segments = this.value.split(/[+\\-–×÷/]/);\n const currentSegment = segments[segments.length - 1] \|\| '';\n return !currentSegment.includes(',') && !currentSegment.includes('.');\n }\n\n // Minus/plus allowed at beginning or after an operator\n if (char === '–' \|\| char === '-' \|\| char === '+') {\n return (\n this.value === '' \|\| this.value === '0' \|\| OPERATORS.includes(lastChar)\n );\n }\n\n return true;\n }\n\n /** Validates that all characters in a value are allowed /\n private isValidValue(value: string): boolean {\n return [...value].every((char) => ALLOWED_CHARS.includes(char));\n }\n\n private handleCloseClick() {\n this.dispatchEvent(\n new CustomEvent('close-click', {bubbles: true, composed: true})\n );\n }\n\n private handleKeyPress(key: string) {\n if (this.canAddCharacter(key)) {\n if (\n (key === '–' \|\| key === '-' \|\| key === '+') &&\n (this.value === '' \|\| this.value === '0')\n ) {\n this.value = key;\n } else {\n this.value += key;\n }\n this.dispatchValueChange();\n }\n }\n\n private handleCalculationKey(key: string) {\n if (key === '=') {\n this.evaluateExpression();\n } else {\n this.value += key;\n this.dispatchValueChange();\n }\n }\n\n private evaluateExpression() {\n if (!this.value) return;\n\n try {\n const expression = this.value\n .replace(/×/g, '')\n .replace(/÷/g, '/')\n .replace(/–/g, '-')\n .replace(/,/g, '.');\n\n if (!/^[\\d+\\-/().]+$/.test(expression)) {\n return;\n }\n\n const result = new Function(`return (${expression})`)();\n\n if (typeof result === 'number' && isFinite(result)) {\n const rounded = Math.round(result 1000000) / 1000000;\n this.value = String(rounded).replace('.', ',');\n this.dispatchValueChange();\n }\n } catch {\n // If evaluation fails, keep the current value\n }\n }\n\n private handleBackspace() {\n if (this.value.length > 0) {\n this.value = this.value.slice(0, -1);\n this.dispatchValueChange();\n }\n }\n\n private handleClear() {\n this.value = '';\n this.dispatchValueChange();\n }\n\n private handleToggleContent() {\n this.content =\n this.content === ObcKeyboardNumericContent.Numbers\n ? ObcKeyboardNumericContent.Symbols\n : ObcKeyboardNumericContent.Numbers;\n }\n\n private handleDone() {\n this.evaluateExpression();\n this.dispatchEvent(\n new CustomEvent('done-click', {\n detail: {value: this.value},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private dispatchValueChange() {\n this.dispatchEvent(\n new CustomEvent('value-change', {\n detail: {value: this.value},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleInput(e: ObcNumberInputFieldInputEvent) {\n const input = e.target as ObcNumberInputField;\n const newValue = input.displayValue;\n\n if (this.validationPattern && newValue) {\n const regex = new RegExp(this.validationPattern);\n if (!regex.test(newValue)) {\n input.displayOverride = this.value;\n return;\n }\n }\n\n if (newValue && !this.isValidValue(newValue)) {\n input.displayOverride = this.value;\n return;\n }\n\n this.value = newValue;\n this.dispatchValueChange();\n }\n\n private handleInputKeydown(e: KeyboardEvent) {\n if (e.key === 'Enter') {\n e.preventDefault();\n this.handleDone();\n } else if (e.key === 'Escape') {\n e.preventDefault();\n this.handleCloseClick();\n }\n }\n\n private renderCalculationRow() {\n if (!this.hasCalculation) return nothing;\n\n return html`\n <div class=\"calculation-container\">\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('+')}\n >\n <obi-up-iec></obi-up-iec>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('-')}\n >\n <obi-down-iec></obi-down-iec>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('×')}\n >\n <obi-multiply></obi-multiply>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('÷')}\n >\n <obi-divide></obi-divide>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('=')}\n >\n <obi-equal></obi-equal>\n </obc-icon-button>\n </div>\n `;\n }\n\n private renderKeyboard() {\n const keys =\n this.content === ObcKeyboardNumericContent.Numbers\n ? NUMBER_KEYS\n : SYMBOL_KEYS;\n\n return html`\n <div class=\"keys-container\">\n ${keys.map(\n (row) => html`\n <div class=\"row\">\n ${row.map(\n (key) => html`\n <obc-button\n class=\"key-button\"\n variant=\"normal\"\n @click=${() => this.handleKeyPress(key)}\n >\n ${key}\n </obc-button>\n `\n )}\n </div>\n `\n )}\n </div>\n `;\n }\n\n private renderInputField() {\n return html`\n <obc-number-input-field\n class=\"input-field\"\n .value=${parseNumberInput(this.value)}\n .displayOverride=${this.value}\n .unit=${this.unit}\n .textAlign=${this.inputFieldTextAlign}\n .size=${ObcNumberInputFieldSize.Large}\n .helperText=${this.helperText}\n ?hasLeadingIcon=${this.hasLeadingIcon}\n placeholder=\"00.0\"\n @input=${this.handleInput}\n @keydown=${this.handleInputKeydown}\n >\n <slot name=\"leading-icon\" slot=\"leading-icon\"></slot>\n </obc-number-input-field>\n `;\n }\n\n protected override render() {\n const showTitleBar =\n this.hasTitleBar && this.type === ObcKeyboardNumericType.Floating;\n\n return html`\n <div class=\"wrapper type-${this.type}\">\n ${showTitleBar\n ? html`\n <div class=\"top-bar\">\n <div class=\"parameter-name\">${this.label}</div>\n <obc-icon-button variant=\"flat\" @click=${this.handleCloseClick}>\n <obi-close-google></obi-close-google>\n </obc-icon-button>\n </div>\n `\n : nothing}\n\n <div class=\"container-content\">\n ${this.renderInputField()}\n\n <div class=\"key-container\">\n ${this.renderCalculationRow()}\n\n <div class=\"input-container\">\n ${this.renderKeyboard()}\n\n <div class=\"action-container\">\n <div class=\"function-buttons-container\">\n <obc-button\n class=\"action-button\"\n @click=${this.handleBackspace}\n showLeadingIcon\n >\n <obi-backspace-google\n slot=\"leading-icon\"\n ></obi-backspace-google\n >DEL\n </obc-button>\n <obc-button\n class=\"action-button clear\"\n @click=${this.handleClear}\n >\n CLEAR\n </obc-button>\n ${this.has2Symbols\n ? html`\n <obc-button\n class=\"action-button symbols\"\n variant=\"normal\"\n @click=${this.handleToggleContent}\n >\n ${this.content === ObcKeyboardNumericContent.Numbers\n ? '#+='\n : '123'}\n </obc-button>\n `\n : nothing}\n </div>\n <obc-button\n class=\"action-button done\"\n variant=\"raised\"\n @click=${this.handleDone}\n >\n DONE\n </obc-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-keyboard-numeric': ObcKeyboardNumeric;\n }\n}\n"],"names":["ObcKeyboardNumericType","ObcKeyboardNumericContent"],"mappings":"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"}
1	+ {"version":3,"file":"keyboard-numeric.js","sources":["../../../src/components/keyboard-numeric/keyboard-numeric.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './keyboard-numeric.css?inline';\n\nimport '../icon-button/icon-button.js';\nimport '../../icons/icon-close-google.js';\nimport '../../icons/icon-backspace-google.js';\nimport '../button/button.js';\nimport '../../icons/icon-up-iec.js';\nimport '../../icons/icon-down-iec.js';\nimport '../../icons/icon-multiply.js';\nimport '../../icons/icon-divide.js';\nimport '../../icons/icon-equal.js';\nimport '../number-input-field/number-input-field.js';\nimport {\n ObcNumberInputField,\n ObcNumberInputFieldTextAlign,\n ObcNumberInputFieldSize,\n ObcNumberInputFieldInputEvent,\n} from '../number-input-field/number-input-field.js';\nimport {parseNumberInput} from '../number-input-field/number-input-format.js';\n\nexport enum ObcKeyboardNumericType {\n Floating = 'floating',\n Flat = 'flat',\n}\n\nexport enum ObcKeyboardNumericContent {\n Numbers = 'numbers',\n Symbols = 'symbols',\n}\n\n// Key layouts\nconst NUMBER_KEYS = [\n ['1', '2', '3'],\n ['4', '5', '6'],\n ['7', '8', '9'],\n ['–', '0', ','],\n];\n\nconst SYMBOL_KEYS = [\n ['!', '@', '#'],\n ['$', '%', '&'],\n ['(', ')', '/'],\n ['–', '0', ','],\n];\n\n// All allowed characters for validation\nconst ALLOWED_CHARS = [\n '0',\n '1',\n '2',\n '3',\n '4',\n '5',\n '6',\n '7',\n '8',\n '9',\n '–',\n '-',\n ',',\n '.',\n '+',\n '×',\n '÷',\n '=',\n '!',\n '@',\n '#',\n '$',\n '%',\n '&',\n '(',\n ')',\n '/',\n];\n\nconst OPERATORS = ['+', '-', '–', '×', '÷', '', '/'];\n\nconst ALLOWED_CHARS_PATTERN = `^[${ALLOWED_CHARS.map((c) =>\n c.replace(/[-.+?^${}()\|[\\]\\\\]/g, '\\\\$&')\n).join('')}]$`;\n\n@customElement('obc-keyboard-numeric')\nexport class ObcKeyboardNumeric extends LitElement {\n @property({type: String}) type: ObcKeyboardNumericType =\n ObcKeyboardNumericType.Floating;\n\n /* Shows the top bar with label and close button (only applicable for floating type) /\n @property({type: Boolean}) hasTitleBar = false;\n\n /* Label displayed in the top bar /\n @property({type: String}) label = 'Parameter name';\n\n /* Current input value /\n @property({type: String}) value = '';\n\n /* Shows the calculation row with +, -, ×, ÷, = buttons /\n @property({type: Boolean}) hasCalculation = false;\n\n /* Shows the #+= / 123 toggle button to switch between numbers and symbols /\n @property({type: Boolean}) has2Symbols = false;\n\n /* Helper text content displayed below the input field /\n @property({type: String}) helperText = '';\n\n /* Shows a leading icon slot in the input field /\n @property({type: Boolean}) hasLeadingIcon = false;\n\n /* Unit text (%, kg, °C, etc.) /\n @property({type: String}) unit = '';\n\n /* Text alignment in input field /\n @property({type: String}) inputFieldTextAlign: ObcNumberInputFieldTextAlign =\n ObcNumberInputFieldTextAlign.Right;\n\n /* Optional regex pattern for validation (applies to both keyboard and direct input) /\n @property({type: String}) validationPattern = '';\n\n @state() private content: ObcKeyboardNumericContent =\n ObcKeyboardNumericContent.Numbers;\n\n private get effectiveValidationPattern(): string {\n if (!this.validationPattern) {\n return ALLOWED_CHARS_PATTERN;\n }\n return `^(?=${ALLOWED_CHARS_PATTERN})(?=${this.validationPattern}).$`;\n }\n\n /** Validates if a character can be added to the current value /\n private canAddCharacter(char: string): boolean {\n const potentialValue = this.value + char;\n\n if (this.validationPattern) {\n const regex = new RegExp(this.validationPattern);\n return regex.test(potentialValue);\n }\n\n if (!ALLOWED_CHARS.includes(char)) {\n return false;\n }\n\n const lastChar = this.value.slice(-1);\n\n // Only one decimal separator per number segment\n if (char === ',' \|\| char === '.') {\n const segments = this.value.split(/[+\\-–×÷/]/);\n const currentSegment = segments[segments.length - 1] \|\| '';\n return !currentSegment.includes(',') && !currentSegment.includes('.');\n }\n\n // Minus/plus allowed at beginning or after an operator\n if (char === '–' \|\| char === '-' \|\| char === '+') {\n return (\n this.value === '' \|\| this.value === '0' \|\| OPERATORS.includes(lastChar)\n );\n }\n\n return true;\n }\n\n private handleCloseClick() {\n this.dispatchEvent(\n new CustomEvent('close-click', {bubbles: true, composed: true})\n );\n }\n\n private handleKeyPress(key: string) {\n if (this.canAddCharacter(key)) {\n if (\n (key === '–' \|\| key === '-' \|\| key === '+') &&\n (this.value === '' \|\| this.value === '0')\n ) {\n this.value = key;\n } else {\n this.value += key;\n }\n this.dispatchValueChange();\n }\n }\n\n private handleCalculationKey(key: string) {\n if (key === '=') {\n this.evaluateExpression();\n } else {\n this.value += key;\n this.dispatchValueChange();\n }\n }\n\n private evaluateExpression() {\n if (!this.value) return;\n\n try {\n const expression = this.value\n .replace(/×/g, '')\n .replace(/÷/g, '/')\n .replace(/–/g, '-')\n .replace(/,/g, '.');\n\n if (!/^[\\d+\\-/().]+$/.test(expression)) {\n return;\n }\n\n const result = new Function(`return (${expression})`)();\n\n if (typeof result === 'number' && isFinite(result)) {\n const rounded = Math.round(result * 1000000) / 1000000;\n this.value = String(rounded).replace('.', ',');\n this.dispatchValueChange();\n }\n } catch {\n // If evaluation fails, keep the current value\n }\n }\n\n private handleBackspace() {\n if (this.value.length > 0) {\n this.value = this.value.slice(0, -1);\n this.dispatchValueChange();\n }\n }\n\n private handleClear() {\n this.value = '';\n this.dispatchValueChange();\n }\n\n private handleToggleContent() {\n this.content =\n this.content === ObcKeyboardNumericContent.Numbers\n ? ObcKeyboardNumericContent.Symbols\n : ObcKeyboardNumericContent.Numbers;\n }\n\n private handleDone() {\n this.evaluateExpression();\n this.dispatchEvent(\n new CustomEvent('done-click', {\n detail: {value: this.value},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private dispatchValueChange() {\n this.dispatchEvent(\n new CustomEvent('value-change', {\n detail: {value: this.value},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleInput(e: ObcNumberInputFieldInputEvent) {\n const input = e.target as ObcNumberInputField;\n const newValue = input.displayValue;\n\n this.value = newValue;\n this.dispatchValueChange();\n }\n\n private handleInputKeydown(e: KeyboardEvent) {\n if (e.key === 'Enter') {\n e.preventDefault();\n this.handleDone();\n } else if (e.key === 'Escape') {\n e.preventDefault();\n this.handleCloseClick();\n }\n }\n\n private renderCalculationRow() {\n if (!this.hasCalculation) return nothing;\n\n return html`\n <div class=\"calculation-container\">\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('+')}\n >\n <obi-up-iec></obi-up-iec>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('-')}\n >\n <obi-down-iec></obi-down-iec>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('×')}\n >\n <obi-multiply></obi-multiply>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('÷')}\n >\n <obi-divide></obi-divide>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('=')}\n >\n <obi-equal></obi-equal>\n </obc-icon-button>\n </div>\n `;\n }\n\n private renderKeyboard() {\n const keys =\n this.content === ObcKeyboardNumericContent.Numbers\n ? NUMBER_KEYS\n : SYMBOL_KEYS;\n\n return html`\n <div class=\"keys-container\">\n ${keys.map(\n (row) => html`\n <div class=\"row\">\n ${row.map(\n (key) => html`\n <obc-button\n class=\"key-button\"\n variant=\"normal\"\n @click=${() => this.handleKeyPress(key)}\n >\n ${key}\n </obc-button>\n `\n )}\n </div>\n `\n )}\n </div>\n `;\n }\n\n private renderInputField() {\n return html`\n <obc-number-input-field\n class=\"input-field\"\n .value=${parseNumberInput(this.value)}\n .displayOverride=${this.value}\n .unit=${this.unit}\n .textAlign=${this.inputFieldTextAlign}\n .size=${ObcNumberInputFieldSize.Large}\n .helperText=${this.helperText}\n .validationPattern=${this.effectiveValidationPattern}\n ?hasLeadingIcon=${this.hasLeadingIcon}\n placeholder=\"00.0\"\n @input=${this.handleInput}\n @keydown=${this.handleInputKeydown}\n >\n <slot name=\"leading-icon\" slot=\"leading-icon\"></slot>\n </obc-number-input-field>\n `;\n }\n\n protected override render() {\n const showTitleBar =\n this.hasTitleBar && this.type === ObcKeyboardNumericType.Floating;\n\n return html`\n <div class=\"wrapper type-${this.type}\">\n ${showTitleBar\n ? html`\n <div class=\"top-bar\">\n <div class=\"parameter-name\">${this.label}</div>\n <obc-icon-button variant=\"flat\" @click=${this.handleCloseClick}>\n <obi-close-google></obi-close-google>\n </obc-icon-button>\n </div>\n `\n : nothing}\n\n <div class=\"container-content\">\n ${this.renderInputField()}\n\n <div class=\"key-container\">\n ${this.renderCalculationRow()}\n\n <div class=\"input-container\">\n ${this.renderKeyboard()}\n\n <div class=\"action-container\">\n <div class=\"function-buttons-container\">\n <obc-button\n class=\"action-button\"\n @click=${this.handleBackspace}\n showLeadingIcon\n >\n <obi-backspace-google\n slot=\"leading-icon\"\n ></obi-backspace-google\n >DEL\n </obc-button>\n <obc-button\n class=\"action-button clear\"\n @click=${this.handleClear}\n >\n CLEAR\n </obc-button>\n ${this.has2Symbols\n ? html`\n <obc-button\n class=\"action-button symbols\"\n variant=\"normal\"\n @click=${this.handleToggleContent}\n >\n ${this.content === ObcKeyboardNumericContent.Numbers\n ? '#+='\n : '123'}\n </obc-button>\n `\n : nothing}\n </div>\n <obc-button\n class=\"action-button done\"\n variant=\"raised\"\n @click=${this.handleDone}\n >\n DONE\n </obc-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-keyboard-numeric': ObcKeyboardNumeric;\n }\n}\n"],"names":["ObcKeyboardNumericType","ObcKeyboardNumericContent"],"mappings":"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"}

package/dist/components/number-input-field/number-input-field.d.ts CHANGED Viewed

@@ -71,6 +71,13 @@ export declare class ObcNumberInputField extends LitElement {
     groupSeparator?: string;
     minFractionDigits: number;
     maxFractionDigits?: number | undefined;
+    /**
+     * Optional regex pattern. When set, any keystroke or paste whose resulting
+     * value does not match this pattern is blocked at the `beforeinput` stage.
+     * When unset, a permissive numeric filter (digits, sign, active separators,
+     * whitespace) is applied instead.
+     */
+    validationPattern: string;
     private hasFocus;
     private displayText;
     private previousValue;
@@ -81,6 +88,8 @@ export declare class ObcNumberInputField extends LitElement {
     private getFormatOptions;
     private formatValueForDisplay;
     private onInput;
+    private isProjectedValueAllowed;
+    private onBeforeInput;
     private onFocus;
     private onBlur;
     private commitDisplay;

package/dist/components/number-input-field/number-input-field.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"number-input-field.d.ts","sourceRoot":"","sources":["../../../src/components/number-input-field/number-input-field.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;~~AAeb~~,MAAM,MAAM,6BAA6B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AACzE,MAAM,MAAM,8BAA8B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAE1E,oBAAY,4BAA4B;IACtC,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,gBAAgB,uBAAuB;CACxC;AAED,oBAAY,uBAAuB;IACjC,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,4BAA4B;IACtC,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAKD;;;;;;;;GAQG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACvB,KAAK,SAAO;IACZ,IAAI,SAAM;IACV,WAAW,SAAM;IACjB,SAAS,EAAE,4BAA4B,CAC5B;IAEK,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,KAAK,UAAS;IAC9B,SAAS,SAAM;IACzC,kEAAkE;IACvC,oBAAoB,UAAS;IACxD,+EAA+E;IACpD,aAAa,UAAS;IAEjD;;OAEG;IACwB,sBAAsB,UAAS;IAE1D,0CAA0C;IAChB,IAAI,SAAM;IAEpC,2CAA2C;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IAE7C,4CAA4C;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,uBAAuB,CACrB;IAEP,cAAc,UAAS;IACxB,UAAU,SAAM;IAEhB,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,YAAY,UAAS;IACtB,cAAc,EAAE,4BAA4B,CAClC;IAET,aAAa,UAAS;IACvB,eAAe,EAAE,4BAA4B,CACnC;IAEpC,oFAAoF;IACzD,OAAO,UAAS;IAE3C;;;OAGG;IACyC,eAAe,SAAM;IAEvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,SAAK;IACtB,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;~~IAExD~~,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,aAAa,CAAO;IAC5B,OAAO,CAAC,mBAAmB,CAAM;IACjC,OAAO,CAAC,kBAAkB,CAAO;IAEnB,OAAO,CAAC,YAAY,CAAC,CAAmB;IAE/D,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,KAAK,iBAAiB,GAU5B;IAED,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,6BAA6B;IA6B5B,YAAY;IAQrB,OAAO,KAAK,OAAO,GAKlB;IAEQ,UAAU,CAAC,iBAAiB,EAAE,cAAc;IA2B5C,OAAO;IAYhB,OAAO,CAAC,gBAAgB;IAmBxB,OAAO,CAAC,aAAa;IAyCZ,MAAM;~~IA4Ff~~,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}
1	+ {"version":3,"file":"number-input-field.d.ts","sourceRoot":"","sources":["../../../src/components/number-input-field/number-input-field.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAgBb,MAAM,MAAM,6BAA6B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AACzE,MAAM,MAAM,8BAA8B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAE1E,oBAAY,4BAA4B;IACtC,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,gBAAgB,uBAAuB;CACxC;AAED,oBAAY,uBAAuB;IACjC,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,4BAA4B;IACtC,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAKD;;;;;;;;GAQG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACvB,KAAK,SAAO;IACZ,IAAI,SAAM;IACV,WAAW,SAAM;IACjB,SAAS,EAAE,4BAA4B,CAC5B;IAEK,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,KAAK,UAAS;IAC9B,SAAS,SAAM;IACzC,kEAAkE;IACvC,oBAAoB,UAAS;IACxD,+EAA+E;IACpD,aAAa,UAAS;IAEjD;;OAEG;IACwB,sBAAsB,UAAS;IAE1D,0CAA0C;IAChB,IAAI,SAAM;IAEpC,2CAA2C;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IAE7C,4CAA4C;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,uBAAuB,CACrB;IAEP,cAAc,UAAS;IACxB,UAAU,SAAM;IAEhB,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,YAAY,UAAS;IACtB,cAAc,EAAE,4BAA4B,CAClC;IAET,aAAa,UAAS;IACvB,eAAe,EAAE,4BAA4B,CACnC;IAEpC,oFAAoF;IACzD,OAAO,UAAS;IAE3C;;;OAGG;IACyC,eAAe,SAAM;IAEvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,SAAK;IACtB,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjE;;;;;OAKG;IACuB,iBAAiB,SAAM;IAExC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,aAAa,CAAO;IAC5B,OAAO,CAAC,mBAAmB,CAAM;IACjC,OAAO,CAAC,kBAAkB,CAAO;IAEnB,OAAO,CAAC,YAAY,CAAC,CAAmB;IAE/D,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,uBAAuB;IAiB/B,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,KAAK,iBAAiB,GAU5B;IAED,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,6BAA6B;IA6B5B,YAAY;IAQrB,OAAO,KAAK,OAAO,GAKlB;IAEQ,UAAU,CAAC,iBAAiB,EAAE,cAAc;IA2B5C,OAAO;IAYhB,OAAO,CAAC,gBAAgB;IAmBxB,OAAO,CAAC,aAAa;IAyCZ,MAAM;IA6Ff,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}

package/dist/components/number-input-field/number-input-field.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import componentStyle from "./number-input-field.css.js";
 import { classMap } from "lit/directives/class-map.js";
 import { customElement } from "../../decorator.js";
-import { formatNumberForDisplay, parseNumberInput, removeGroupingFromDisplay, valuesEqual } from "./number-input-format.js";
+import { formatNumberForDisplay, parseNumberInput, isAllowedIntermediateInput, removeGroupingFromDisplay, valuesEqual } from "./number-input-format.js";
 import { getCssVariableValue } from "../../charthelpers/colors.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -63,6 +63,7 @@ let ObcNumberInputField = class extends LitElement {
     this.squared = false;
     this.displayOverride = "";
     this.minFractionDigits = 0;
+    this.validationPattern = "";
     this.hasFocus = false;
     this.displayText = "";
     this.previousValue = NaN;
@@ -94,6 +95,30 @@ let ObcNumberInputField = class extends LitElement {
     this.updateCenterAlignedInputWidth(raw);
     this.dispatchInput();
   }
+  isProjectedValueAllowed(projected) {
+    if (this.validationPattern) {
+      let regex;
+      try {
+        regex = new RegExp(`^(?:${this.validationPattern})$`);
+      } catch {
+        return isAllowedIntermediateInput(projected, this.getFormatOptions());
+      }
+      return regex.test(projected);
+    }
+    return isAllowedIntermediateInput(projected, this.getFormatOptions());
+  }
+  onBeforeInput(e) {
+    if (this.disabled || this.readonly) return;
+    const input = e.target;
+    const incoming = e.data ?? e.dataTransfer?.getData("text/plain") ?? null;
+    if (incoming === null) return;
+    const start = input.selectionStart ?? input.value.length;
+    const end = input.selectionEnd ?? input.value.length;
+    const projected = input.value.slice(0, start) + incoming + input.value.slice(end);
+    if (!this.isProjectedValueAllowed(projected)) {
+      e.preventDefault();
+    }
+  }
   onFocus() {
     this.hasFocus = true;
     const source = this.displayOverride || this.displayText;
@@ -322,6 +347,7 @@ let ObcNumberInputField = class extends LitElement {
       hasHelperOrError ? "helper-text" : void 0
     )}
                 autocomplete="off"
+                @beforeinput=${this.onBeforeInput}
                 @input=${this.onInput}
               />
               ${unitInside ? html`<span class="unit-text">${this.unit}</span>` : nothing}
@@ -423,6 +449,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], ObcNumberInputField.prototype, "maxFractionDigits", 2);
+__decorateClass([
+  property({ type: String })
+], ObcNumberInputField.prototype, "validationPattern", 2);
 __decorateClass([
   state()
 ], ObcNumberInputField.prototype, "hasFocus", 2);