@bagelink/vue 0.0.692 → 0.0.696

package/dist/style.css

@@ -1497,58 +1497,59 @@ display: block;
 	font-size: var(--label-font-size);
 }
 
-.bagel-input textarea[data-v-edac341b] {
+
+.bagel-input textarea[data-v-5193fa33] {
 	min-height: unset;
 	font-size: var(--input-font-size);
 }
-.bagel-input.text-input textarea[data-v-edac341b] {
+.bagel-input.text-input textarea[data-v-5193fa33] {
 	resize: none;
 }
-.code textarea[data-v-edac341b] {
+.code textarea[data-v-5193fa33] {
 	font-family: 'Inconsolata', monospace;
 	background: var(--bgl-black) !important;
 	color: var(--bgl-white) !important;
 }
-.code textarea[data-v-edac341b]::placeholder {
+.code textarea[data-v-5193fa33]::placeholder {
 	color: var(--bgl-white) !important;
 	opacity: 0.3;
 }
-.bagel-input.small[data-v-edac341b] {
+.bagel-input.small[data-v-5193fa33] {
 	margin-bottom: 0;
 	height: 30px;
 }
-.bagel-input.dense label[data-v-edac341b] {
+.bagel-input.dense label[data-v-5193fa33] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 }
-.bagel-input input[data-v-edac341b]:disabled {
+.bagel-input input[data-v-5193fa33]:disabled {
 	background: #f5f5f5;
 }
-.bagel-input label[data-v-edac341b] {
+.bagel-input label[data-v-5193fa33] {
 	font-size: var(--label-font-size);
 }
-.textInputIconWrap[data-v-edac341b] {
+.textInputIconWrap[data-v-5193fa33] {
 	position: relative;
 }
-.textInputIconWrap .bgl_icon-font[data-v-edac341b] {
+.textInputIconWrap .bgl_icon-font[data-v-5193fa33] {
 	position: absolute;
 	inset-inline-end: 0.7rem;
 	bottom: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart .iconStart[data-v-edac341b] {
+.txtInputIconStart .iconStart[data-v-5193fa33] {
 	position: absolute;
 	inset-inline-start: 0.7rem;
 	top: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart textarea[data-v-edac341b] {
+.txtInputIconStart textarea[data-v-5193fa33] {
 	padding-inline-start: 2rem;
 }
-.bagel-input.small textarea[data-v-edac341b] {
+.bagel-input.small textarea[data-v-5193fa33] {
 	height: 30px;
 }
 
@@ -2053,7 +2054,7 @@ p {
 	border-radius: var(--input-border-radius);
 }
 
-.tel-input[data-v-4c2ef2c5] {
+.tel-input[data-v-f94249b5] {
 	direction: ltr;
 	text-align: left;
 	background: var(--input-bg);
@@ -2064,21 +2065,21 @@ p {
 	min-width: calc(var(--input-height) * 3);
 	width: 100%;
 }
-.tel-input[data-v-4c2ef2c5]:focus-within {
+.tel-input[data-v-f94249b5]:focus-within {
 	outline: none;
 	box-shadow: inset 0 0 10px #00000012;
 }
-.tel-input input[data-v-4c2ef2c5] {
+.tel-input input[data-v-f94249b5] {
 	background: transparent;
 }
-.tel-input input[data-v-4c2ef2c5]:focus-visible {
+.tel-input input[data-v-f94249b5]:focus-visible {
 	box-shadow: none;
 }
-.input_country-code[data-v-4c2ef2c5] {
+.input_country-code[data-v-f94249b5] {
 	font-size: var(--input-font-size);
 	color: var(--input-color);
 }
-.tel-country[data-v-4c2ef2c5] {
+.tel-country[data-v-f94249b5] {
 	font-size: var(--input-font-size);
 	max-width: 200px;
 	white-space: nowrap;
@@ -2087,7 +2088,7 @@ p {
 	margin-top: 0;
 	margin-bottom: 0;
 }
-.tel-countryp-dropdown[data-v-4c2ef2c5] {
+.tel-countryp-dropdown[data-v-f94249b5] {
 	direction: ltr;
 	text-align: left;
 }
@@ -6309,6 +6310,11 @@ select {
     font-family: inherit;
     width: 100%;
 }
+.bagel-input-error input,
+.bagel-input-error button,
+.bagel-input-error textarea {
+	outline: 1px solid var(--bgl-red);
+}
 .bagel-input {
     position: relative;
     display: flex;
@@ -6318,12 +6324,48 @@ select {
     width: 100%;
     color: var(--bgl-black);
 }
+.bagel-input::-webkit-input-placeholder .bagel-input label {
+    display: block;
+    font-size: var(--label-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
+}
+.bagel-input::-moz-placeholder .bagel-input label {
+    display: block;
+    font-size: var(--label-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
+}
+.bagel-input:-ms-input-placeholder .bagel-input label {
+    display: block;
+    font-size: var(--label-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
+}
+.bagel-input::-ms-input-placeholder .bagel-input label {
+    display: block;
+    font-size: var(--label-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
+}
 .bagel-input::placeholder .bagel-input label {
     display: block;
     font-size: var(--label-font-size);
     margin-bottom: 2px;
     line-height: 1.3;
 }
+.bagel-input::-webkit-input-placeholder {
+    color: var(--placeholder-color);
+}
+.bagel-input::-moz-placeholder {
+    color: var(--placeholder-color);
+}
+.bagel-input:-ms-input-placeholder {
+    color: var(--placeholder-color);
+}
+.bagel-input::-ms-input-placeholder {
+    color: var(--placeholder-color);
+}
 .bagel-input::placeholder {
     color: var(--placeholder-color);
 }
@@ -6348,6 +6390,18 @@ select {
     min-width: calc(var(--input-height) * 3);
     width: 100%;
 }
+.bagel-input input::-webkit-input-placeholder, .bagel-input textarea::-webkit-input-placeholder, .bagel-input select::-webkit-input-placeholder, .custom-select .input::-webkit-input-placeholder {
+    color: var(--placeholder-color);
+}
+.bagel-input input::-moz-placeholder, .bagel-input textarea::-moz-placeholder, .bagel-input select::-moz-placeholder, .custom-select .input::-moz-placeholder {
+    color: var(--placeholder-color);
+}
+.bagel-input input:-ms-input-placeholder, .bagel-input textarea:-ms-input-placeholder, .bagel-input select:-ms-input-placeholder, .custom-select .input:-ms-input-placeholder {
+    color: var(--placeholder-color);
+}
+.bagel-input input::-ms-input-placeholder, .bagel-input textarea::-ms-input-placeholder, .bagel-input select::-ms-input-placeholder, .custom-select .input::-ms-input-placeholder {
+    color: var(--placeholder-color);
+}
 .bagel-input input::placeholder,
 .bagel-input textarea::placeholder,
 .bagel-input select::placeholder,
@@ -6360,10 +6414,12 @@ select {
     align-items: center;
 }
 .bagel-input.search-wrap input {
-    padding-inline-end: 2rem;
+    -webkit-padding-end: 2rem;
+            padding-inline-end: 2rem;
 }
 .bagel-input.search-wrap .bgl_icon-font {
-    margin-inline-start: -1.75rem;
+    -webkit-margin-start: -1.75rem;
+            margin-inline-start: -1.75rem;
 }
 .bagel-input select {
     height: var(--input-height);
@@ -6378,6 +6434,8 @@ select {
 }
 .bagel-input input[type="radio"] {
     padding: 0;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
     width: fit-content;
 }
 .bagel-input:focus-within label {
@@ -6481,11 +6539,13 @@ select {
 .bagel-input input[type="color"]::-webkit-color-swatch {
     border-radius: var(--input-border-radius);
     border: none;
+    -webkit-transition: box-shadow 200ms ease;
     transition: box-shadow 200ms ease;
 }
 .bagel-input input[type="color"]::-moz-color-swatch {
     border-radius: var(--input-border-radius);
     border: none;
+    -moz-transition: box-shadow 200ms ease;
     transition: box-shadow 200ms ease;
 }
 .bagel-input input[type="color"]::-webkit-color-swatch:hover {
@@ -7558,118 +7618,118 @@ select {
 .color-green {
     color: var(--bgl-green) !important;
 }
-.bg-input-white input {
+.bg-input-white input, .bg-input-white .selectinput-btn {
     background: var(--bgl-white) !important;
 }
 .color-input-white input {
     color: var(--bgl-white) !important;
 }
-.bg-input-primary input {
+.bg-input-primary input, .bg-input-primary .selectinput-btn {
     background: var(--bgl-primary) !important;
 }
 .color-input-primary input {
     color: var(--bgl-primary) !important;
 }
-.bg-input-primary-tint input {
+.bg-input-primary-tint input, .bg-input-primary-tint .selectinput-btn {
     background: var(--bgl-primary-tint) !important;
 }
 .color-input-primary-tint input {
     color: var(--bgl-primary-tint) !important;
 }
-.bg-input-primary-light input {
+.bg-input-primary-light input, .bg-input-primary-light .selectinput-btn {
     background: var(--bgl-primary-light) !important;
 }
 .color-input-primary-light input {
     color: var(--bgl-primary-light) !important;
 }
-.bg-input-blue-20 input {
+.bg-input-blue-20 input, .bg-input-blue-20 .selectinput-btn {
     background: var(--bgl-blue-20) !important;
 }
 .color-input-blue-20 input {
     color: var(--bgl-blue-20) !important;
 }
-.bg-input-blue-dark input {
+.bg-input-blue-dark input, .bg-input-blue-dark .selectinput-btn {
     background: var(--bgl-blue-dark) !important;
 }
 .color-input-blue-dark input {
     color: var(--bgl-blue-dark) !important;
 }
-.bg-input-blue-light input {
+.bg-input-blue-light input, .bg-input-blue-light .selectinput-btn {
     background: var(--bgl-blue-light) !important;
 }
 .color-input-blue-light input {
     color: var(--bgl-blue-light) !important;
 }
-.bg-input-black input {
+.bg-input-black input, .bg-input-black .selectinput-btn {
     background: var(--bgl-black) !important;
 }
 .color-input-black input {
     color: var(--bgl-black) !important;
 }
-.bg-input-black-tint input {
+.bg-input-black-tint input, .bg-input-black-tint .selectinput-btn {
     background: var(--bgl-black-tint) !important;
 }
 .color-input-black-tint input {
     color: var(--bgl-black-tint) !important;
 }
-.bg-input-gray input {
+.bg-input-gray input, .bg-input-gray .selectinput-btn {
     background: var(--bgl-gray) !important;
 }
 .color-input-gray input {
     color: var(--bgl-gray) !important;
 }
-.bg-input-gray-light input {
+.bg-input-gray-light input, .bg-input-gray-light .selectinput-btn {
     background: var(--bgl-gray-light) !important;
 }
 .color-input-gray-light input {
     color: var(--bgl-gray-light) !important;
 }
-.bg-input-gray-80 input {
+.bg-input-gray-80 input, .bg-input-gray-80 .selectinput-btn {
     background: var(--bgl-gray-80) !important;
 }
 .color-input-gray-80 input {
     color: var(--bgl-gray-80) !important;
 }
-.bg-input-gray-20 input {
+.bg-input-gray-20 input, .bg-input-gray-20 .selectinput-btn {
     background: var(--bgl-gray-20) !important;
 }
 .color-input-gray-20 input {
     color: var(--bgl-gray-20) !important;
 }
-.bg-input-pink input {
+.bg-input-pink input, .bg-input-pink .selectinput-btn {
     background: var(--bgl-pink) !important;
 }
 .color-input-pink input {
     color: var(--bgl-pink) !important;
 }
-.bg-input-red input {
+.bg-input-red input, .bg-input-red .selectinput-btn {
     background: var(--bgl-red) !important;
 }
 .color-input-red input {
     color: var(--bgl-red) !important;
 }
-.bg-input-red-tint input {
+.bg-input-red-tint input, .bg-input-red-tint .selectinput-btn {
     background: var(--bgl-red-tint) !important;
 }
 .color-input-red-tint input {
     color: var(--bgl-red-tint) !important;
 }
-.bg-input-yellow input {
+.bg-input-yellow input, .bg-input-yellow .selectinput-btn {
     background: var(--bgl-yellow) !important;
 }
 .color-input-yellow input {
     color: var(--bgl-yellow) !important;
 }
-.bg-input-yellow-light input {
+.bg-input-yellow-light input, .bg-input-yellow-light .selectinput-btn {
     background: var(--bgl-yellow-light) !important;
 }
 .color-input-yellow-light input {
     color: var(--bgl-yellow-light) !important;
 }
-.bg-input-green input {
+.bg-input-green input, .bg-input-green .selectinput-btn {
     background: var(--bgl-green) !important;
 }
-.bg-input-transparent input {
+.bg-input-transparent input, .bg-input-transparent .selectinput-btn {
     background: transparent !important;
 }
 .color-input-green input {
@@ -8001,7 +8061,7 @@ select {
         background: transparent !important;
     }
 
-    .m_bg-input-white input {
+    .m_bg-input-white input,    .m_bg-input-white .selectinput-btn {
         background: var(--bgl-white) !important;
     }
 
@@ -8009,7 +8069,7 @@ select {
         color: var(--bgl-white) !important;
     }
 
-    .m_bg-input-primary input {
+    .m_bg-input-primary input,    .m_bg-input-primary .selectinput-btn {
         background: var(--bgl-primary) !important;
     }
 
@@ -8017,7 +8077,7 @@ select {
         color: var(--bgl-primary) !important;
     }
 
-    .m_bg-input-primary-tint input {
+    .m_bg-input-primary-tint input,    .m_bg-input-primary-tint .selectinput-btn {
         background: var(--bgl-primary-tint) !important;
     }
 
@@ -8025,7 +8085,7 @@ select {
         color: var(--bgl-primary-tint) !important;
     }
 
-    .m_bg-input-primary-light input {
+    .m_bg-input-primary-light input,    .m_bg-input-primary-light .selectinput-btn {
         background: var(--bgl-primary-light) !important;
     }
 
@@ -8033,7 +8093,7 @@ select {
         color: var(--bgl-primary-light) !important;
     }
 
-    .m_bg-input-blue-20 input {
+    .m_bg-input-blue-20 input,    .m_bg-input-blue-20 .selectinput-btn {
         background: var(--bgl-blue-20) !important;
     }
 
@@ -8041,7 +8101,7 @@ select {
         color: var(--bgl-blue-20) !important;
     }
 
-    .m_bg-input-blue-dark input {
+    .m_bg-input-blue-dark input,    .m_bg-input-blue-dark .selectinput-btn {
         background: var(--bgl-blue-dark) !important;
     }
 
@@ -8049,7 +8109,7 @@ select {
         color: var(--bgl-blue-dark) !important;
     }
 
-    .m_bg-input-blue-light input {
+    .m_bg-input-blue-light input,    .m_bg-input-blue-light .selectinput-btn {
         background: var(--bgl-blue-light) !important;
     }
 
@@ -8057,7 +8117,7 @@ select {
         color: var(--bgl-blue-light) !important;
     }
 
-    .m_bg-input-black input {
+    .m_bg-input-black input,    .m_bg-input-black .selectinput-btn {
         background: var(--bgl-black) !important;
     }
 
@@ -8065,7 +8125,7 @@ select {
         color: var(--bgl-black) !important;
     }
 
-    .m_bg-input-black-tint input {
+    .m_bg-input-black-tint input,    .m_bg-input-black-tint .selectinput-btn {
         background: var(--bgl-black-tint) !important;
     }
 
@@ -8073,7 +8133,7 @@ select {
         color: var(--bgl-black-tint) !important;
     }
 
-    .m_bg-input-gray input {
+    .m_bg-input-gray input,    .m_bg-input-gray .selectinput-btn {
         background: var(--bgl-gray) !important;
     }
 
@@ -8081,7 +8141,7 @@ select {
         color: var(--bgl-gray) !important;
     }
 
-    .m_bg-input-gray-light input {
+    .m_bg-input-gray-light input,    .m_bg-input-gray-light .selectinput-btn {
         background: var(--bgl-gray-light) !important;
     }
 
@@ -8089,7 +8149,7 @@ select {
         color: var(--bgl-gray-light) !important;
     }
 
-    .m_bg-input-gray-80 input {
+    .m_bg-input-gray-80 input,    .m_bg-input-gray-80 .selectinput-btn {
         background: var(--bgl-gray-80) !important;
     }
 
@@ -8097,7 +8157,7 @@ select {
         color: var(--bgl-gray-80) !important;
     }
 
-    .m_bg-input-gray-20 input {
+    .m_bg-input-gray-20 input,    .m_bg-input-gray-20 .selectinput-btn {
         background: var(--bgl-gray-20) !important;
     }
 
@@ -8105,7 +8165,7 @@ select {
         color: var(--bgl-gray-20) !important;
     }
 
-    .m_bg-input-pink input {
+    .m_bg-input-pink input,    .m_bg-input-pink .selectinput-btn {
         background: var(--bgl-pink) !important;
     }
 
@@ -8113,7 +8173,7 @@ select {
         color: var(--bgl-pink) !important;
     }
 
-    .m_bg-input-red input {
+    .m_bg-input-red input,    .m_bg-input-red .selectinput-btn {
         background: var(--bgl-red) !important;
     }
 
@@ -8121,7 +8181,7 @@ select {
         color: var(--bgl-red) !important;
     }
 
-    .m_bg-input-red-tint input {
+    .m_bg-input-red-tint input,    .m_bg-input-red-tint .selectinput-btn {
         background: var(--bgl-red-tint) !important;
     }
 
@@ -8129,7 +8189,7 @@ select {
         color: var(--bgl-red-tint) !important;
     }
 
-    .m_bg-input-yellow input {
+    .m_bg-input-yellow input,    .m_bg-input-yellow .selectinput-btn {
         background: var(--bgl-yellow) !important;
     }
 
@@ -8137,7 +8197,7 @@ select {
         color: var(--bgl-yellow) !important;
     }
 
-    .m_bg-input-yellow-light input {
+    .m_bg-input-yellow-light input,    .m_bg-input-yellow-light .selectinput-btn {
         background: var(--bgl-yellow-light) !important;
     }
 
@@ -8145,7 +8205,7 @@ select {
         color: var(--bgl-yellow-light) !important;
     }
 
-    .m_bg-input-green input {
+    .m_bg-input-green input,    .m_bg-input-green .selectinput-btn {
         background: var(--bgl-green) !important;
     }
 
@@ -8153,7 +8213,7 @@ select {
         color: var(--bgl-green) !important;
     }
 
-    .m_bg-input-transparent input {
+    .m_bg-input-transparent input,    .m_bg-input-transparent .selectinput-btn {
         background: transparent !important;
     }
 

package/dist/utils/BagelFormUtils.d.ts

@@ -1,4 +1,4 @@
-import { Field, Option } from '..';
+import { BglFormSchemaT, Field, Option } from '..';
 interface InputOptions {
     required?: boolean;
     placeholder?: string;
@@ -43,5 +43,6 @@ export declare function frmRow(...children: Field[]): {
     class: string;
     children: Field[];
 };
+export declare function findBglFieldById(id: string, _schema: BglFormSchemaT): Field | undefined;
 export {};
 //# sourceMappingURL=BagelFormUtils.d.ts.map

package/dist/utils/BagelFormUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAElD,UAAU,YAAY;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,KAAK,WAAW,GAAG,YAAY,CAAA;AAE/B,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,UAAU,eAAgB,SAAQ,YAAY;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,KAAK,eAAe,GAAG,YAAY,CAAA;AAEnC,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,GAAE,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAM,EAAE,IAAI,GAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAIjI;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe;;;;;;;;EAWzB;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,gBAAgB,GACxB,KAAK,CAgBP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EACrC,MAAM,CAAC,EAAE,gBAAgB,GACvB,KAAK,CAgBP;AAED,wBAAgB,UAAU,CACzB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAQP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,WAAW,GACnB,KAAK,CAaP;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAoBP;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C"}
+{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAElE,UAAU,YAAY;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,KAAK,WAAW,GAAG,YAAY,CAAA;AAE/B,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,UAAU,eAAgB,SAAQ,YAAY;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,KAAK,eAAe,GAAG,YAAY,CAAA;AAEnC,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,GAAE,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAM,EAAE,IAAI,GAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAIjI;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe;;;;;;;;EAWzB;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,gBAAgB,GACxB,KAAK,CAgBP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EACrC,MAAM,CAAC,EAAE,gBAAgB,GACvB,KAAK,CAgBP;AAED,wBAAgB,UAAU,CACzB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAQP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,WAAW,GACnB,KAAK,CAaP;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAoBP;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,KAAK,GAAG,SAAS,CASvF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.692",
+  "version": "0.0.696",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/form/inputs/TelInput.vue

@@ -16,6 +16,31 @@ import {
 } from 'libphonenumber-js'
 import axios from 'axios'
 
+export interface Props {
+	label?: string
+	id?: string
+	class?: string
+	autocomplete?: 'on' | 'off' | 'tel'
+	placeholder?: string
+	required?: boolean
+	modelValue: string
+	allCountries?: Country[]
+	autoFormat?: boolean
+	customValidate?: boolean | RegExp
+	defaultCountry?: string | number
+	disabled?: boolean
+	searchable?: boolean
+	autoDefaultCountry?: boolean
+	inputOptions?: Partial<typeof defaultInputOptions>
+	dropdownOptions?: Partial<typeof defaultDropdownOptions>
+	excludeCountries?: string[]
+	mode?: NumberFormat
+	onlyCountries?: string[]
+	preferredCountries?: string[]
+	parseArg?: { extract?: boolean }
+	debounceDelay?: number
+}
+
 const props = withDefaults(defineProps<Props>(), {
 	modelValue: '',
 	autocomplete: 'on',
@@ -80,30 +105,6 @@ const defaultInputOptions = {
 	'placeholder': 'Enter a phone number',
 }
 
-interface Props {
-	label?: string
-	id?: string
-	autocomplete?: 'on' | 'off' | 'tel'
-	placeholder?: string
-	required?: boolean
-	modelValue: string
-	allCountries?: Country[]
-	autoFormat?: boolean
-	customValidate?: boolean | RegExp
-	defaultCountry?: string | number
-	disabled?: boolean
-	searchable?: boolean
-	autoDefaultCountry?: boolean
-	inputOptions?: Partial<typeof defaultInputOptions>
-	dropdownOptions?: Partial<typeof defaultDropdownOptions>
-	excludeCountries?: string[]
-	mode?: NumberFormat
-	onlyCountries?: string[]
-	preferredCountries?: string[]
-	parseArg?: { extract?: boolean }
-	debounceDelay?: number
-}
-
 const computedDropDownOptions = $computed(() => ({
 	...defaultDropdownOptions,
 	...props.dropdownOptions,
@@ -309,7 +310,7 @@ function handleInput(e: KeyboardEvent) {
 <template>
 	<div
 		class="bagel-input"
-		:class="{ disabled }"
+		:class="{ disabled, [props.class || '']: true }"
 	>
 		<label>
 			{{ label }}

package/src/components/form/inputs/TextInput.vue

@@ -144,6 +144,7 @@ onMounted(() => {
 .bagel-input label {
 	font-size: var(--label-font-size);
 }
+
 </style>
 
 <style scoped>