@daracl/form 0.0.19 → 0.0.20

package/dist/daracl.form.css

@@ -98,7 +98,7 @@
   vertical-align: top;
   padding-right: var(--field-padding-right);
   display: flex;
-  align-items: center;
+  align-items: flex-start;
 }
 .daracl-form .df-label .required {
   color: var(--color-danger);
@@ -179,6 +179,9 @@
 }
 .daracl-form .df-form-field.df-textarea {
   padding-right: 0px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  height: initial;
 }
 .daracl-form .df-form-field[type=number] {
   padding-right: 3px;

package/dist/daracl.form.min.css

@@ -1,9 +1,9 @@
 /*!
-* @daracl/form v0.0.19
+* @daracl/form v0.0.20
 * Copyright 2023-2026 darainfo;
 * Licensed MIT
 */
-@charset "UTF-8";.daracl-form{background:var(--body-bg);--color-danger: #d9534f;--background-danger: #d9534f;--invalid-font-color: #ff4136;--invalid-border-color: #ffb6b4;--invalid-background-color: #fdd;--tooltip-background: #3e3e3e;--tooltip-color: #fff;--field-margin-top: 10px;--field-padding-top: 3px;--field-padding-right: 15px;--line-height: 1.2em;--line-height-lg: 1.5em;--font-size-sm: 12px;--font-size: 14px;--font-size-lg: 16px;--border-color: #cdcdcd;--font-color: #686868;--font-hover-color: #3a3d41;--font-disable-color: #ebebeb;--button-bg: #ffffff;--button-bg-hover: #e3e3e3;--tab-bg: #f6f6f6;--tab-bg-hover: #ebebeb;--input-bg: #fff;--input-color: #212529;--input-disabled-bg: #ebebeb;--bg-grid-header: #f1f1f1;--icon-color: #5f6368;--body-bg: #ffffff;--body-bg-thin: #f0f0f0;--body-bg-hover: #d2d2d2;padding:0;margin-top:8px;color:var(--font-color)}.daracl-form *,.daracl-form :after,.daracl-form :before{box-sizing:border-box;line-height:var(--line-height);font-size:var(--font-size);color:var(--font-color)}.daracl-form .df-txt-left{text-align:left}.daracl-form .df-txt-center{text-align:center}.daracl-form .df-txt-right{text-align:right}.daracl-form[data-df-mode=view] .df-field input[type=text],.daracl-form[data-df-mode=view] .df-field input[type=password],.daracl-form[data-df-mode=view] .df-field input[type=email],.daracl-form[data-df-mode=view] .df-field input[type=number],.daracl-form[data-df-mode=view] .df-field input[type=tel],.daracl-form[data-df-mode=view] .df-field textarea{-webkit-user-select:text;user-select:text}.daracl-form[data-df-mode=view] .df-field input[type=checkbox],.daracl-form[data-df-mode=view] .df-field input[type=radio],.daracl-form[data-df-mode=view] .df-field label,.daracl-form[data-df-mode=view] .df-field select{pointer-events:none}.daracl-form .df-hidden{max-height:0vh!important;width:0px;visibility:collapse;display:none!important;padding:0!important;margin:0!important}.daracl-form input,.daracl-form select,.daracl-form textarea{background-color:transparent;color:var(--font-color)}.daracl-form input[disabled],.daracl-form select[disabled],.daracl-form textarea[disabled]{background-color:var(--input-disabled-bg);opacity:.8}.daracl-form .df-label{position:relative;vertical-align:top;padding-right:var(--field-padding-right);display:flex;align-items:center}.daracl-form .df-label .required{color:var(--color-danger);display:inline-block;vertical-align:middle}.daracl-form .df-label .required:after{color:var(--color-danger);content:"*";vertical-align:middle}.daracl-form .df-label .df-label-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:initial}.daracl-form .df-label .df-tooltip{visibility:visible;color:var(--tooltip-color);background:var(--tooltip-background);width:16px;height:16px;border-radius:8px;text-align:center;line-height:var(--line-height-lg);margin:0 5px;font-size:12px;cursor:help;position:relative;display:inline-block;flex-shrink:0}.daracl-form .df-label .df-tooltip .df-tooltip-text{display:none;text-align:initial;background:var(--tooltip-background);border-radius:5px;color:var(--tooltip-color);padding:10px 5px;position:absolute;z-index:2;left:-10px;min-width:max-content;text-shadow:none;cursor:default}.daracl-form .df-label .df-tooltip:hover .df-tooltip-text{display:block}.daracl-form .df-form-field{border:1px solid var(--border-color);display:block;width:100%;padding:0px .75rem;font-weight:400;line-height:var(--line-height);height:30px;border-radius:4px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;background-color:var(--input-bg);background-clip:padding-box;color:var(--input-color)}.daracl-form .df-form-field[type=radio],.daracl-form .df-form-field[type=checkbox]{width:14px;display:inline;min-height:0px;padding:0;margin:0;vertical-align:middle}.daracl-form .df-form-field.df-dropdown{appearance:none;-webkit-appearance:none;-moz-appearance:none}.daracl-form .df-form-field.df-textarea{padding-right:0}.daracl-form .df-form-field[type=number]{padding-right:3px}.daracl-form .df-form-field.df-file{display:none}.daracl-form .df-form-field.df-range{padding:0}.daracl-form .df-row{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex:0 1 auto;-webkit-box-flex:0;flex:0 1 auto;-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.daracl-form .df-row.df-vertical{display:block}.daracl-form .df-row.df-horizontal{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.daracl-form .df-row.df-horizontal>.df-form-group>.df-empty{display:none!important}.daracl-form .df-row.df-horizontal>.df-form-group+.df-form-group{margin-left:10px!important}.daracl-form .df-row.df-top{flex-direction:column}.daracl-form .df-row.df-top>div{max-width:100%!important}.daracl-form .df-row.df-right{-ms-flex-direction:row-reverse!important;-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;flex-direction:row-reverse!important}.daracl-form .df-row.df-bottom{flex-direction:column-reverse!important}.daracl-form .df-row.df-bottom>div{max-width:100%!important}.daracl-form .df-col-xs-1{flex-basis:8.33333333%;-webkit-box-flex:0;-ms-flex:0 0 8.33333333%;flex:0 0 8.33333333%;max-width:8.33333333%}.daracl-form .df-col-xs-2{flex-basis:16.66666667%;-webkit-box-flex:0;-ms-flex:0 0 16.66666667%;flex:0 0 16.66666667%;max-width:16.66666667%}.daracl-form .df-col-xs-3{flex-basis:25%;-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.daracl-form .df-col-xs-4{flex-basis:33.33333333%;-webkit-box-flex:0;-ms-flex:0 0 33.33333333%;flex:0 0 33.33333333%;max-width:33.33333333%}.daracl-form .df-col-xs-5{flex-basis:41.66666667%;-webkit-box-flex:0;-ms-flex:0 0 41.66666667%;flex:0 0 41.66666667%;max-width:41.66666667%}.daracl-form .df-col-xs-6{flex-basis:50%;-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.daracl-form .df-col-xs-7{flex-basis:58.33333333%;-webkit-box-flex:0;-ms-flex:0 0 58.33333333%;flex:0 0 58.33333333%;max-width:58.33333333%}.daracl-form .df-col-xs-8{flex-basis:66.66666667%;-webkit-box-flex:0;-ms-flex:0 0 66.66666667%;flex:0 0 66.66666667%;max-width:66.66666667%}.daracl-form .df-col-xs-9{flex-basis:75%;-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.daracl-form .df-col-xs-10{flex-basis:83.33333333%;-webkit-box-flex:0;-ms-flex:0 0 83.33333333%;flex:0 0 83.33333333%;max-width:83.33333333%}.daracl-form .df-col-xs-11{flex-basis:91.66666667%;-webkit-box-flex:0;-ms-flex:0 0 91.66666667%;flex:0 0 91.66666667%;max-width:91.66666667%}.daracl-form .df-col-xs-12{flex-basis:100%;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.daracl-form .df-align-items-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.daracl-form .df-col-xs{-webkit-flex-grow:1;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.daracl-form .df-col-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.daracl-form .df-col-fix{flex:none}.daracl-form .df-col-full{flex:1;overflow:auto}.daracl-form .df-field-container{overflow:initial;position:relative;flex:1}.daracl-form .df-field-container>.df-row{margin-top:-10px}.daracl-form .df-field-container>div+.df-row{margin-top:0}.daracl-form .df-field-container .df-field{position:relative}.daracl-form .df-field-container .df-field .df-range-num{clear:both;display:block;width:100%;text-align:left}.daracl-form .df-field-container .df-field .df-file-wrapper{border:1px solid var(--border-color);text-align:center;display:block;width:100%;padding:.375rem .75rem;font-weight:400;line-height:var(--line-height-lg);background-clip:padding-box;border-radius:4px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.daracl-form .df-field-container .df-description{padding:3px 0 0;font-size:var(--font-size-sm)}.daracl-form .df-file-list .df-file-item{height:25px}.daracl-form .df-file-list .df-file-icon{width:20px;height:20px;display:inline-block;vertical-align:middle;cursor:pointer}.daracl-form .df-file-list .df-file-icon:hover{background-color:var(--button-bg-hover)}.daracl-form .df-file-list .df-file-icon:before{content:"";display:block;width:100%;height:100%;background-color:var(--icon-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.daracl-form .df-file-list .df-file-icon.df-file-download:before{-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjIwcHgiIGZpbGw9IiMwMDAwMDAiPjxnPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjwvZz48Zz48cGF0aCBkPSJNMTgsMTV2M0g2di0zSDR2M2MwLDEuMSwwLjksMiwyLDJoMTJjMS4xLDAsMi0wLjksMi0ydi0zSDE4eiBNMTcsMTFsLTEuNDEtMS40MUwxMywxMi4xN1Y0aC0ydjguMTdMOC40MSw5LjU5TDcsMTFsNSw1IEwxNywxMXoiLz48L2c+PC9zdmc+);mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjIwcHgiIGZpbGw9IiMwMDAwMDAiPjxnPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjwvZz48Zz48cGF0aCBkPSJNMTgsMTV2M0g2di0zSDR2M2MwLDEuMSwwLjksMiwyLDJoMTJjMS4xLDAsMi0wLjksMi0ydi0zSDE4eiBNMTcsMTFsLTEuNDEtMS40MUwxMywxMi4xN1Y0aC0ydjguMTdMOC40MSw5LjU5TDcsMTFsNSw1IEwxNywxMXoiLz48L2c+PC9zdmc+)}.daracl-form .df-file-list .df-file-icon.df-file-remove:before{-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjBweCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE2IDl2MTBIOFY5aDhtLTEuNS02aC01bC0xIDFINXYyaDE0VjRoLTMuNWwtMS0xek0xOCA3SDZ2MTJjMCAxLjEuOSAyIDIgMmg4YzEuMSAwIDItLjkgMi0yVjd6Ii8+PC9zdmc+);mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjBweCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE2IDl2MTBIOFY5aDhtLTEuNS02aC01bC0xIDFINXYyaDE0VjRoLTMuNWwtMS0xek0xOCA3SDZ2MTJjMCAxLjEuOSAyIDIgMmg4YzEuMSAwIDItLjkgMi0yVjd6Ii8+PC9zdmc+)}.daracl-form .df-file-list .df-file-icon.df-empty-icon{cursor:default}.daracl-form .df-file-list .df-file-icon.df-empty-icon:hover{background-color:transparent}.daracl-form .df-file-list .df-file-icon.df-empty-icon:before{background-color:transparent}.daracl-form .df-file-list .df-file-name{text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;display:inline-block;vertical-align:middle;width:calc(100% - 55px)}.daracl-form .df-field-group{display:flex;align-items:center}.daracl-form .df-field-group .df-field-item{padding-top:var(--field-padding-top);padding-right:8px}.daracl-form .df-field-group .df-field-item.df-vertical>*{display:block}.daracl-form .df-tab-header{list-style:none;margin:0;padding:0;display:flex;line-height:var(--line-height);width:100%;border-bottom:1px solid var(--border-color)}.daracl-form .df-tab-header.df-tab-al-left{justify-content:left}.daracl-form .df-tab-header.df-tab-al-right{justify-content:right}.daracl-form .df-tab-header.df-tab-al-center{justify-content:center}.daracl-form .df-tab-header>.df-tab-item{list-style:none;float:left;position:relative;top:0;margin:1px .4em 0 0;padding:0;white-space:nowrap}.daracl-form .df-tab-header>.df-tab-item.active a{color:var(--font-hover-color);background-color:var(--tab-bg)}.daracl-form .df-tab-header>.df-tab-item a{border-top-left-radius:calc(.45rem - 1px);border-top-right-radius:calc(.45rem - 1px);border:1px solid transparent;border-bottom-width:0;float:left;padding:.5em 1em;text-decoration:none;color:var(--font-color);height:30px}.daracl-form .df-tab-header>.df-tab-item a:hover{background-color:var(--tab-bg-hover);border:1px solid var(--border-color);border-bottom-width:0}.daracl-form .df-tab-body .df-tab-panel{display:none}.daracl-form .df-tab-body .df-tab-panel.active{display:block}.daracl-form .df-btn{padding:5px 10px;border-radius:calc(.45rem - 1px);border:1px solid var(--border-color);background-color:var(--button-bg);cursor:pointer;transition:background-color .3s}.daracl-form .df-btn:hover{color:var(--font-hover-color);background-color:var(--button-bg-hover)}.daracl-form .df-icon{display:inline-block;width:21px;height:21px;vertical-align:middle}.daracl-form .df-add-icon,.daracl-form .df-remove-icon{background-color:var(--icon-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.daracl-form .df-add-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px'%3E%3Cpath d='M431-431H220.78v-98H431v-210.22h98V-529h210.22v98H529v210.22h-98V-431Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px'%3E%3Cpath d='M431-431H220.78v-98H431v-210.22h98V-529h210.22v98H529v210.22h-98V-431Z'/%3E%3C/svg%3E")}.daracl-form .df-remove-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px'%3E%3Cpath d='M291-221.91 221.91-291l189-189-189-189L291-738.09l189 189 189-189L738.09-669l-189 189 189 189L669-221.91l-189-189-189 189Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px'%3E%3Cpath d='M291-221.91 221.91-291l189-189-189-189L291-738.09l189 189 189-189L738.09-669l-189 189 189 189L669-221.91l-189-189-189 189Z'/%3E%3C/svg%3E")}.daracl-form .df-form-group{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:var(--field-margin-top);margin-bottom:0;margin-right:0!important;margin-left:0!important}.daracl-form .df-form-group:last-child{margin-bottom:0}.daracl-form .df-form-group.df-top{flex-direction:column}.daracl-form .df-form-group.df-top>div{max-width:100%!important}.daracl-form .df-form-group.df-right{-ms-flex-direction:row-reverse!important;-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;flex-direction:row-reverse!important}.daracl-form .df-form-group.df-bottom{flex-direction:column-reverse!important}.daracl-form .df-form-group.df-bottom>div{max-width:100%!important}.daracl-form .df-form-group .df-help-message{display:none}.daracl-form .df-form-group .df-help-icon{background-repeat:no-repeat;background-position-y:center}.daracl-form .df-form-group .df-help-icon.df-form-field{background-position-x:calc(100% - 15px)}.daracl-form .df-form-group .df-help-icon.df-form-icon{display:none;position:absolute;z-index:1;top:0;right:0;height:100%;width:20px;margin-right:15px}.daracl-form .df-form-group.invalid .df-form-field{border-color:var(--invalid-border-color);outline-color:var(--invalid-border-color)}.daracl-form .df-form-group.invalid>.df-field-container.required>.df-field .df-help-icon{display:block;background-image:url("data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Im0yNDktMjA3LTQyLTQyIDIzMS0yMzEtMjMxLTIzMSA0Mi00MiAyMzEgMjMxIDIzMS0yMzEgNDIgNDItMjMxIDIzMSAyMzEgMjMxLTQyIDQyLTIzMS0yMzEtMjMxIDIzMVoiIHN0eWxlPSImIzEwOyAgICBmaWxsOiAjZmY3MzczOyYjMTA7Ii8+PC9zdmc+")}.daracl-form .df-form-group.invalid .df-help-message{display:block}.daracl-form .df-form-group.invalid .df-help-message>*{color:var(--invalid-font-color);font-size:var(--font-size-sm);padding:3px 0}.daracl-form .df-form-group.valid>.df-field-container.required>.df-field .df-help-icon{display:block;background-image:url("data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHN0eWxlPSImIzEwOyAgICBmaWxsOiAjMTlhOTc0OyYjMTA7Ij48cGF0aCBkPSJNMzc4LTI0NiAxNTQtNDcwbDQzLTQzIDE4MSAxODEgMzg0LTM4NCA0MyA0My00MjcgNDI3WiIvPjwvc3ZnPg==")}.daracl-form .df-form-group .df-file-label{border:1px solid var(--border-color);display:inline;width:100%;padding:3px 15px;line-height:1;background-clip:padding-box;border-radius:4px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.daracl-form .df-form-group .df-file-label:hover{background-color:var(--button-bg-hover)}.daracl-form .df-grid-field .df-grid-btn-area{border:1px solid var(--border-color);padding:3px}.daracl-form .df-grid-field .df-grid-container{width:100%;height:auto;overflow-y:auto;border:1px solid var(--border-color)}.daracl-form .df-grid-field .df-grid-container .df-btn{padding:3px 5px}.daracl-form .df-grid-field .df-grid-container .df-grid{width:100%;border-top-width:0px;border-collapse:collapse}.daracl-form .df-grid-field .df-grid-container .df-grid>thead th{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--border-color);background-color:var(--bg-grid-header);text-align:center}.daracl-form .df-grid-field .df-grid-container .df-grid .df-help-message{display:none}.daracl-form .df-grid-field .df-grid-container .df-grid td,.daracl-form .df-grid-field .df-grid-container .df-grid th{padding:3px 5px}.daracl-form .df-grid-field .df-grid-container .df-grid .df-help-icon{background-repeat:no-repeat;background-position-y:center}.daracl-form .df-grid-field .df-grid-container .df-grid .df-help-icon.df-form-field{background-position-x:calc(100% - 15px)}.daracl-form .df-grid-field .df-grid-container .df-grid .df-help-icon.df-form-icon{display:none;position:absolute;z-index:1;top:0;right:0;height:100%;width:20px;margin-right:15px}.daracl-form .df-grid-field .df-grid-container .df-grid .df-grid-column{position:relative}.daracl-form .df-grid-field .df-grid-container .df-grid .invalid .df-form-field{border-color:var(--invalid-border-color);outline-color:var(--invalid-border-color)}.daracl-form .df-grid-field .df-grid-container .df-grid .invalid>.df-grid-column.required .df-field .df-help-icon{display:block;background-image:url("data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Im0yNDktMjA3LTQyLTQyIDIzMS0yMzEtMjMxLTIzMSA0Mi00MiAyMzEgMjMxIDIzMS0yMzEgNDIgNDItMjMxIDIzMSAyMzEgMjMxLTQyIDQyLTIzMS0yMzEtMjMxIDIzMVoiIHN0eWxlPSImIzEwOyAgICBmaWxsOiAjZmY3MzczOyYjMTA7Ii8+PC9zdmc+")}.daracl-form .df-grid-field .df-grid-container .df-grid .invalid .df-help-message{display:block;position:absolute;border:1px solid var(--invalid-border-color);border-color:var(--invalid-border-color) transparent transparent transparent;top:calc(100% + 6px);left:50%;transform:translate(-50%);min-width:270px;padding:5px;border-radius:.4rem;z-index:2;background-color:var(--invalid-background-color);color:var(--invalid-font-color)}.daracl-form .df-grid-field .df-grid-container .df-grid .invalid .df-help-message:after{content:"";position:absolute;top:0;left:50%;width:0;height:0;border:7px solid transparent;border-bottom-color:var(--invalid-border-color);border-top:0;border-left:0;margin-left:-3.5px;margin-top:-7px}.daracl-form .df-grid-field .df-grid-container .df-grid .valid>.df-grid-column.required .df-field .df-help-icon{display:block;background-image:url("data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHN0eWxlPSImIzEwOyAgICBmaWxsOiAjMTlhOTc0OyYjMTA7Ij48cGF0aCBkPSJNMzc4LTI0NiAxNTQtNDcwbDQzLTQzIDE4MSAxODEgMzg0LTM4NCA0MyA0My00MjcgNDI3WiIvPjwvc3ZnPg==")}[data-daracl-theme=dark] .daracl-form,body.dark .daracl-form,.daracl-form.dark{--color-danger: #ff6b6b;--background-danger: #ff6b6b;--invalid-font-color: #ff9b9b;--invalid-border-color: #ff5e5e;--invalid-background-color: #3a1f1f;--tooltip-background: #444;--tooltip-color: #fff;--field-margin-top: 10px;--field-padding-top: 3px;--field-padding-right: 15px;--line-height: 1.2em;--line-height-lg: 1.5em;--font-size-sm: 12px;--font-size: 14px;--font-size-lg: 16px;--border-color: #585858;--font-color: #e0e0e0;--font-hover-color: #ffffff;--font-disable-color: #ebebeb;--button-bg: #5a5a5a;--button-bg-hover: #727272;--tab-bg: #2c2c2c;--tab-bg-hover: #3c3c3c;--input-bg: #2a2a2a;--input-color: #f0f0f0;--input-disabled-bg: #555;--bg-grid-header: #1a1717;--icon-color: #fffbfb;--body-bg: #1a1a1a;--body-bg-thin: #444343;--body-bg-hover: #565555}/*!
+@charset "UTF-8";.daracl-form{background:var(--body-bg);--color-danger: #d9534f;--background-danger: #d9534f;--invalid-font-color: #ff4136;--invalid-border-color: #ffb6b4;--invalid-background-color: #fdd;--tooltip-background: #3e3e3e;--tooltip-color: #fff;--field-margin-top: 10px;--field-padding-top: 3px;--field-padding-right: 15px;--line-height: 1.2em;--line-height-lg: 1.5em;--font-size-sm: 12px;--font-size: 14px;--font-size-lg: 16px;--border-color: #cdcdcd;--font-color: #686868;--font-hover-color: #3a3d41;--font-disable-color: #ebebeb;--button-bg: #ffffff;--button-bg-hover: #e3e3e3;--tab-bg: #f6f6f6;--tab-bg-hover: #ebebeb;--input-bg: #fff;--input-color: #212529;--input-disabled-bg: #ebebeb;--bg-grid-header: #f1f1f1;--icon-color: #5f6368;--body-bg: #ffffff;--body-bg-thin: #f0f0f0;--body-bg-hover: #d2d2d2;padding:0;margin-top:8px;color:var(--font-color)}.daracl-form *,.daracl-form :after,.daracl-form :before{box-sizing:border-box;line-height:var(--line-height);font-size:var(--font-size);color:var(--font-color)}.daracl-form .df-txt-left{text-align:left}.daracl-form .df-txt-center{text-align:center}.daracl-form .df-txt-right{text-align:right}.daracl-form[data-df-mode=view] .df-field input[type=text],.daracl-form[data-df-mode=view] .df-field input[type=password],.daracl-form[data-df-mode=view] .df-field input[type=email],.daracl-form[data-df-mode=view] .df-field input[type=number],.daracl-form[data-df-mode=view] .df-field input[type=tel],.daracl-form[data-df-mode=view] .df-field textarea{-webkit-user-select:text;user-select:text}.daracl-form[data-df-mode=view] .df-field input[type=checkbox],.daracl-form[data-df-mode=view] .df-field input[type=radio],.daracl-form[data-df-mode=view] .df-field label,.daracl-form[data-df-mode=view] .df-field select{pointer-events:none}.daracl-form .df-hidden{max-height:0vh!important;width:0px;visibility:collapse;display:none!important;padding:0!important;margin:0!important}.daracl-form input,.daracl-form select,.daracl-form textarea{background-color:transparent;color:var(--font-color)}.daracl-form input[disabled],.daracl-form select[disabled],.daracl-form textarea[disabled]{background-color:var(--input-disabled-bg);opacity:.8}.daracl-form .df-label{position:relative;vertical-align:top;padding-right:var(--field-padding-right);display:flex;align-items:flex-start}.daracl-form .df-label .required{color:var(--color-danger);display:inline-block;vertical-align:middle}.daracl-form .df-label .required:after{color:var(--color-danger);content:"*";vertical-align:middle}.daracl-form .df-label .df-label-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:initial}.daracl-form .df-label .df-tooltip{visibility:visible;color:var(--tooltip-color);background:var(--tooltip-background);width:16px;height:16px;border-radius:8px;text-align:center;line-height:var(--line-height-lg);margin:0 5px;font-size:12px;cursor:help;position:relative;display:inline-block;flex-shrink:0}.daracl-form .df-label .df-tooltip .df-tooltip-text{display:none;text-align:initial;background:var(--tooltip-background);border-radius:5px;color:var(--tooltip-color);padding:10px 5px;position:absolute;z-index:2;left:-10px;min-width:max-content;text-shadow:none;cursor:default}.daracl-form .df-label .df-tooltip:hover .df-tooltip-text{display:block}.daracl-form .df-form-field{border:1px solid var(--border-color);display:block;width:100%;padding:0px .75rem;font-weight:400;line-height:var(--line-height);height:30px;border-radius:4px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;background-color:var(--input-bg);background-clip:padding-box;color:var(--input-color)}.daracl-form .df-form-field[type=radio],.daracl-form .df-form-field[type=checkbox]{width:14px;display:inline;min-height:0px;padding:0;margin:0;vertical-align:middle}.daracl-form .df-form-field.df-dropdown{appearance:none;-webkit-appearance:none;-moz-appearance:none}.daracl-form .df-form-field.df-textarea{padding-right:0;padding-top:5px;padding-bottom:5px;height:initial}.daracl-form .df-form-field[type=number]{padding-right:3px}.daracl-form .df-form-field.df-file{display:none}.daracl-form .df-form-field.df-range{padding:0}.daracl-form .df-row{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex:0 1 auto;-webkit-box-flex:0;flex:0 1 auto;-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.daracl-form .df-row.df-vertical{display:block}.daracl-form .df-row.df-horizontal{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.daracl-form .df-row.df-horizontal>.df-form-group>.df-empty{display:none!important}.daracl-form .df-row.df-horizontal>.df-form-group+.df-form-group{margin-left:10px!important}.daracl-form .df-row.df-top{flex-direction:column}.daracl-form .df-row.df-top>div{max-width:100%!important}.daracl-form .df-row.df-right{-ms-flex-direction:row-reverse!important;-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;flex-direction:row-reverse!important}.daracl-form .df-row.df-bottom{flex-direction:column-reverse!important}.daracl-form .df-row.df-bottom>div{max-width:100%!important}.daracl-form .df-col-xs-1{flex-basis:8.33333333%;-webkit-box-flex:0;-ms-flex:0 0 8.33333333%;flex:0 0 8.33333333%;max-width:8.33333333%}.daracl-form .df-col-xs-2{flex-basis:16.66666667%;-webkit-box-flex:0;-ms-flex:0 0 16.66666667%;flex:0 0 16.66666667%;max-width:16.66666667%}.daracl-form .df-col-xs-3{flex-basis:25%;-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.daracl-form .df-col-xs-4{flex-basis:33.33333333%;-webkit-box-flex:0;-ms-flex:0 0 33.33333333%;flex:0 0 33.33333333%;max-width:33.33333333%}.daracl-form .df-col-xs-5{flex-basis:41.66666667%;-webkit-box-flex:0;-ms-flex:0 0 41.66666667%;flex:0 0 41.66666667%;max-width:41.66666667%}.daracl-form .df-col-xs-6{flex-basis:50%;-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.daracl-form .df-col-xs-7{flex-basis:58.33333333%;-webkit-box-flex:0;-ms-flex:0 0 58.33333333%;flex:0 0 58.33333333%;max-width:58.33333333%}.daracl-form .df-col-xs-8{flex-basis:66.66666667%;-webkit-box-flex:0;-ms-flex:0 0 66.66666667%;flex:0 0 66.66666667%;max-width:66.66666667%}.daracl-form .df-col-xs-9{flex-basis:75%;-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.daracl-form .df-col-xs-10{flex-basis:83.33333333%;-webkit-box-flex:0;-ms-flex:0 0 83.33333333%;flex:0 0 83.33333333%;max-width:83.33333333%}.daracl-form .df-col-xs-11{flex-basis:91.66666667%;-webkit-box-flex:0;-ms-flex:0 0 91.66666667%;flex:0 0 91.66666667%;max-width:91.66666667%}.daracl-form .df-col-xs-12{flex-basis:100%;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.daracl-form .df-align-items-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.daracl-form .df-col-xs{-webkit-flex-grow:1;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.daracl-form .df-col-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.daracl-form .df-col-fix{flex:none}.daracl-form .df-col-full{flex:1;overflow:auto}.daracl-form .df-field-container{overflow:initial;position:relative;flex:1}.daracl-form .df-field-container>.df-row{margin-top:-10px}.daracl-form .df-field-container>div+.df-row{margin-top:0}.daracl-form .df-field-container .df-field{position:relative}.daracl-form .df-field-container .df-field .df-range-num{clear:both;display:block;width:100%;text-align:left}.daracl-form .df-field-container .df-field .df-file-wrapper{border:1px solid var(--border-color);text-align:center;display:block;width:100%;padding:.375rem .75rem;font-weight:400;line-height:var(--line-height-lg);background-clip:padding-box;border-radius:4px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.daracl-form .df-field-container .df-description{padding:3px 0 0;font-size:var(--font-size-sm)}.daracl-form .df-file-list .df-file-item{height:25px}.daracl-form .df-file-list .df-file-icon{width:20px;height:20px;display:inline-block;vertical-align:middle;cursor:pointer}.daracl-form .df-file-list .df-file-icon:hover{background-color:var(--button-bg-hover)}.daracl-form .df-file-list .df-file-icon:before{content:"";display:block;width:100%;height:100%;background-color:var(--icon-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.daracl-form .df-file-list .df-file-icon.df-file-download:before{-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjIwcHgiIGZpbGw9IiMwMDAwMDAiPjxnPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjwvZz48Zz48cGF0aCBkPSJNMTgsMTV2M0g2di0zSDR2M2MwLDEuMSwwLjksMiwyLDJoMTJjMS4xLDAsMi0wLjksMi0ydi0zSDE4eiBNMTcsMTFsLTEuNDEtMS40MUwxMywxMi4xN1Y0aC0ydjguMTdMOC40MSw5LjU5TDcsMTFsNSw1IEwxNywxMXoiLz48L2c+PC9zdmc+);mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjIwcHgiIGZpbGw9IiMwMDAwMDAiPjxnPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjwvZz48Zz48cGF0aCBkPSJNMTgsMTV2M0g2di0zSDR2M2MwLDEuMSwwLjksMiwyLDJoMTJjMS4xLDAsMi0wLjksMi0ydi0zSDE4eiBNMTcsMTFsLTEuNDEtMS40MUwxMywxMi4xN1Y0aC0ydjguMTdMOC40MSw5LjU5TDcsMTFsNSw1IEwxNywxMXoiLz48L2c+PC9zdmc+)}.daracl-form .df-file-list .df-file-icon.df-file-remove:before{-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjBweCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE2IDl2MTBIOFY5aDhtLTEuNS02aC01bC0xIDFINXYyaDE0VjRoLTMuNWwtMS0xek0xOCA3SDZ2MTJjMCAxLjEuOSAyIDIgMmg4YzEuMSAwIDItLjkgMi0yVjd6Ii8+PC9zdmc+);mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjBweCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE2IDl2MTBIOFY5aDhtLTEuNS02aC01bC0xIDFINXYyaDE0VjRoLTMuNWwtMS0xek0xOCA3SDZ2MTJjMCAxLjEuOSAyIDIgMmg4YzEuMSAwIDItLjkgMi0yVjd6Ii8+PC9zdmc+)}.daracl-form .df-file-list .df-file-icon.df-empty-icon{cursor:default}.daracl-form .df-file-list .df-file-icon.df-empty-icon:hover{background-color:transparent}.daracl-form .df-file-list .df-file-icon.df-empty-icon:before{background-color:transparent}.daracl-form .df-file-list .df-file-name{text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;display:inline-block;vertical-align:middle;width:calc(100% - 55px)}.daracl-form .df-field-group{display:flex;align-items:center}.daracl-form .df-field-group .df-field-item{padding-top:var(--field-padding-top);padding-right:8px}.daracl-form .df-field-group .df-field-item.df-vertical>*{display:block}.daracl-form .df-tab-header{list-style:none;margin:0;padding:0;display:flex;line-height:var(--line-height);width:100%;border-bottom:1px solid var(--border-color)}.daracl-form .df-tab-header.df-tab-al-left{justify-content:left}.daracl-form .df-tab-header.df-tab-al-right{justify-content:right}.daracl-form .df-tab-header.df-tab-al-center{justify-content:center}.daracl-form .df-tab-header>.df-tab-item{list-style:none;float:left;position:relative;top:0;margin:1px .4em 0 0;padding:0;white-space:nowrap}.daracl-form .df-tab-header>.df-tab-item.active a{color:var(--font-hover-color);background-color:var(--tab-bg)}.daracl-form .df-tab-header>.df-tab-item a{border-top-left-radius:calc(.45rem - 1px);border-top-right-radius:calc(.45rem - 1px);border:1px solid transparent;border-bottom-width:0;float:left;padding:.5em 1em;text-decoration:none;color:var(--font-color);height:30px}.daracl-form .df-tab-header>.df-tab-item a:hover{background-color:var(--tab-bg-hover);border:1px solid var(--border-color);border-bottom-width:0}.daracl-form .df-tab-body .df-tab-panel{display:none}.daracl-form .df-tab-body .df-tab-panel.active{display:block}.daracl-form .df-btn{padding:5px 10px;border-radius:calc(.45rem - 1px);border:1px solid var(--border-color);background-color:var(--button-bg);cursor:pointer;transition:background-color .3s}.daracl-form .df-btn:hover{color:var(--font-hover-color);background-color:var(--button-bg-hover)}.daracl-form .df-icon{display:inline-block;width:21px;height:21px;vertical-align:middle}.daracl-form .df-add-icon,.daracl-form .df-remove-icon{background-color:var(--icon-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.daracl-form .df-add-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px'%3E%3Cpath d='M431-431H220.78v-98H431v-210.22h98V-529h210.22v98H529v210.22h-98V-431Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px'%3E%3Cpath d='M431-431H220.78v-98H431v-210.22h98V-529h210.22v98H529v210.22h-98V-431Z'/%3E%3C/svg%3E")}.daracl-form .df-remove-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px'%3E%3Cpath d='M291-221.91 221.91-291l189-189-189-189L291-738.09l189 189 189-189L738.09-669l-189 189 189 189L669-221.91l-189-189-189 189Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px'%3E%3Cpath d='M291-221.91 221.91-291l189-189-189-189L291-738.09l189 189 189-189L738.09-669l-189 189 189 189L669-221.91l-189-189-189 189Z'/%3E%3C/svg%3E")}.daracl-form .df-form-group{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:var(--field-margin-top);margin-bottom:0;margin-right:0!important;margin-left:0!important}.daracl-form .df-form-group:last-child{margin-bottom:0}.daracl-form .df-form-group.df-top{flex-direction:column}.daracl-form .df-form-group.df-top>div{max-width:100%!important}.daracl-form .df-form-group.df-right{-ms-flex-direction:row-reverse!important;-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;flex-direction:row-reverse!important}.daracl-form .df-form-group.df-bottom{flex-direction:column-reverse!important}.daracl-form .df-form-group.df-bottom>div{max-width:100%!important}.daracl-form .df-form-group .df-help-message{display:none}.daracl-form .df-form-group .df-help-icon{background-repeat:no-repeat;background-position-y:center}.daracl-form .df-form-group .df-help-icon.df-form-field{background-position-x:calc(100% - 15px)}.daracl-form .df-form-group .df-help-icon.df-form-icon{display:none;position:absolute;z-index:1;top:0;right:0;height:100%;width:20px;margin-right:15px}.daracl-form .df-form-group.invalid .df-form-field{border-color:var(--invalid-border-color);outline-color:var(--invalid-border-color)}.daracl-form .df-form-group.invalid>.df-field-container.required>.df-field .df-help-icon{display:block;background-image:url("data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Im0yNDktMjA3LTQyLTQyIDIzMS0yMzEtMjMxLTIzMSA0Mi00MiAyMzEgMjMxIDIzMS0yMzEgNDIgNDItMjMxIDIzMSAyMzEgMjMxLTQyIDQyLTIzMS0yMzEtMjMxIDIzMVoiIHN0eWxlPSImIzEwOyAgICBmaWxsOiAjZmY3MzczOyYjMTA7Ii8+PC9zdmc+")}.daracl-form .df-form-group.invalid .df-help-message{display:block}.daracl-form .df-form-group.invalid .df-help-message>*{color:var(--invalid-font-color);font-size:var(--font-size-sm);padding:3px 0}.daracl-form .df-form-group.valid>.df-field-container.required>.df-field .df-help-icon{display:block;background-image:url("data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHN0eWxlPSImIzEwOyAgICBmaWxsOiAjMTlhOTc0OyYjMTA7Ij48cGF0aCBkPSJNMzc4LTI0NiAxNTQtNDcwbDQzLTQzIDE4MSAxODEgMzg0LTM4NCA0MyA0My00MjcgNDI3WiIvPjwvc3ZnPg==")}.daracl-form .df-form-group .df-file-label{border:1px solid var(--border-color);display:inline;width:100%;padding:3px 15px;line-height:1;background-clip:padding-box;border-radius:4px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.daracl-form .df-form-group .df-file-label:hover{background-color:var(--button-bg-hover)}.daracl-form .df-grid-field .df-grid-btn-area{border:1px solid var(--border-color);padding:3px}.daracl-form .df-grid-field .df-grid-container{width:100%;height:auto;overflow-y:auto;border:1px solid var(--border-color)}.daracl-form .df-grid-field .df-grid-container .df-btn{padding:3px 5px}.daracl-form .df-grid-field .df-grid-container .df-grid{width:100%;border-top-width:0px;border-collapse:collapse}.daracl-form .df-grid-field .df-grid-container .df-grid>thead th{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--border-color);background-color:var(--bg-grid-header);text-align:center}.daracl-form .df-grid-field .df-grid-container .df-grid .df-help-message{display:none}.daracl-form .df-grid-field .df-grid-container .df-grid td,.daracl-form .df-grid-field .df-grid-container .df-grid th{padding:3px 5px}.daracl-form .df-grid-field .df-grid-container .df-grid .df-help-icon{background-repeat:no-repeat;background-position-y:center}.daracl-form .df-grid-field .df-grid-container .df-grid .df-help-icon.df-form-field{background-position-x:calc(100% - 15px)}.daracl-form .df-grid-field .df-grid-container .df-grid .df-help-icon.df-form-icon{display:none;position:absolute;z-index:1;top:0;right:0;height:100%;width:20px;margin-right:15px}.daracl-form .df-grid-field .df-grid-container .df-grid .df-grid-column{position:relative}.daracl-form .df-grid-field .df-grid-container .df-grid .invalid .df-form-field{border-color:var(--invalid-border-color);outline-color:var(--invalid-border-color)}.daracl-form .df-grid-field .df-grid-container .df-grid .invalid>.df-grid-column.required .df-field .df-help-icon{display:block;background-image:url("data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Im0yNDktMjA3LTQyLTQyIDIzMS0yMzEtMjMxLTIzMSA0Mi00MiAyMzEgMjMxIDIzMS0yMzEgNDIgNDItMjMxIDIzMSAyMzEgMjMxLTQyIDQyLTIzMS0yMzEtMjMxIDIzMVoiIHN0eWxlPSImIzEwOyAgICBmaWxsOiAjZmY3MzczOyYjMTA7Ii8+PC9zdmc+")}.daracl-form .df-grid-field .df-grid-container .df-grid .invalid .df-help-message{display:block;position:absolute;border:1px solid var(--invalid-border-color);border-color:var(--invalid-border-color) transparent transparent transparent;top:calc(100% + 6px);left:50%;transform:translate(-50%);min-width:270px;padding:5px;border-radius:.4rem;z-index:2;background-color:var(--invalid-background-color);color:var(--invalid-font-color)}.daracl-form .df-grid-field .df-grid-container .df-grid .invalid .df-help-message:after{content:"";position:absolute;top:0;left:50%;width:0;height:0;border:7px solid transparent;border-bottom-color:var(--invalid-border-color);border-top:0;border-left:0;margin-left:-3.5px;margin-top:-7px}.daracl-form .df-grid-field .df-grid-container .df-grid .valid>.df-grid-column.required .df-field .df-help-icon{display:block;background-image:url("data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHN0eWxlPSImIzEwOyAgICBmaWxsOiAjMTlhOTc0OyYjMTA7Ij48cGF0aCBkPSJNMzc4LTI0NiAxNTQtNDcwbDQzLTQzIDE4MSAxODEgMzg0LTM4NCA0MyA0My00MjcgNDI3WiIvPjwvc3ZnPg==")}[data-daracl-theme=dark] .daracl-form,body.dark .daracl-form,.daracl-form.dark{--color-danger: #ff6b6b;--background-danger: #ff6b6b;--invalid-font-color: #ff9b9b;--invalid-border-color: #ff5e5e;--invalid-background-color: #3a1f1f;--tooltip-background: #444;--tooltip-color: #fff;--field-margin-top: 10px;--field-padding-top: 3px;--field-padding-right: 15px;--line-height: 1.2em;--line-height-lg: 1.5em;--font-size-sm: 12px;--font-size: 14px;--font-size-lg: 16px;--border-color: #585858;--font-color: #e0e0e0;--font-hover-color: #ffffff;--font-disable-color: #ebebeb;--button-bg: #5a5a5a;--button-bg-hover: #727272;--tab-bg: #2c2c2c;--tab-bg-hover: #3c3c3c;--input-bg: #2a2a2a;--input-color: #f0f0f0;--input-disabled-bg: #555;--bg-grid-header: #1a1717;--icon-color: #fffbfb;--body-bg: #1a1a1a;--body-bg-thin: #444343;--body-bg-hover: #565555}/*!
 * @daracl/datetimepicker v0.0.13
 * Copyright 2023-2026 darainfo;
 * Licensed MIT

package/dist/daracl.form.min.umd.js

@@ -1,5 +1,5 @@
 /*!
-* @daracl/form v0.0.19
+* @daracl/form v0.0.20
 * Copyright 2023-2026 darainfo;
 * Licensed MIT
 */
@@ -167,5 +167,5 @@
     `);n&&(this.createField(e,n),this.formElement.append(n),e.children&&this.childTemplate(e,i))}createField(e,t){e.$instance=new e.$renderType(e,t,this.daraform)}childTemplate(e,t){let i=null,n=!0,l=!1;if(!e.$renderType.isChildrenCreate())return;const a=document.createElement("div");a.classList.add("df-row",t.rowStyleClass??"");let o=0;for(const r of e.children){if(C(r))throw new Error(`parent field :[${e.$validName}], children index ${o},  empty [${r}]`);if(r.$parent=e,++o,this.checkHiddenField(r))continue;this.addRowFieldInfo(r),n&&(i=r);let d=this.isLabelHide(r),h,u="";d?(h=q(this.options,r,i,!l),u=l?`<span class="df-label df-empty ${h.labelClass}" style="${h.labelStyle}"></span>`:""):(h=q(this.options,r,i,!1),u=`<span class="df-label ${h.labelClass} ${h.labelAlignClass}" title="${r.label??""}" style="${h.labelStyle}">${this.getLabelTemplate(r)}</span>`);const c=j(`<div class="df-form-group ${h.fieldClass}" style="${h.fieldStyle}" id="${r.$key}">
         ${u}
         <span class="df-field-container ${h.valueClass} ${r.required?"required":""}" style="${h.valueStyle}"></span>
-      </div>`);c&&(this.createField(r,c),a.append(c),r.children&&this.childTemplate(r,r.children?h:t)),d||(l=!0),n=!1}e.$instance.addChildField(a)}getLabelTemplate(e){const t=e.required?'<span class="required"></span>':"",i=M(e.tooltip)?"":`<span class="df-tooltip">?<span class="df-tooltip-text">${e.tooltip}</span></span>`;return`<span class="df-label-text">${e.label??""}</span> ${i} ${t}`}isLabelHide(e){var t;return((t=e.style)==null?void 0:t.labelHide)||v(e.label)}checkHiddenField(e){return Be(e)?(this.fieldInfoMap.addField(e),e.$instance=new e.$renderType(e,null,this.daraform),!0):!1}addRowFieldInfo(e){if(!M(e.name)&&this.fieldInfoMap.hasFieldName(e.name))throw new Error(`Duplicate field name "${e.name}"`);this.fieldInfoMap.addField(e),this.addRowFields.push(e.$key)}}function xt(s){return oe({},ye,s)}function Vt(s){ye=oe({},ye,s)}let ye={style:{width:"100%",labelWidth:3,valueWidth:9,position:"left-right"},mode:"new",useTypeValue:!0,autoCreate:!0,notValidMessage:"This form is not valid.",fields:[]};const ie={},Ne="data-form-uid";let St=0;const P=class P{constructor(e,t,i){if(this.formValue={},this.changeListeners=[],this.changeMode=n=>{this.options.mode=n,this.formElement.setAttribute("data-df-mode",n);const l=this.formElement.querySelectorAll(".df-field input, .df-field textarea, .df-field select");n=="view"?l.forEach(a=>{a instanceof HTMLInputElement&&(a.readOnly=!0),a instanceof HTMLTextAreaElement&&(a.readOnly=!0)}):l.forEach(a=>{a instanceof HTMLInputElement&&(a.readOnly=!1),a instanceof HTMLTextAreaElement&&(a.readOnly=!1)})},this.resetForm=()=>{const n=this.fieldInfoMap.getAllFieldInfo();for(const l in n){const o=n[l].$instance;o&&typeof o.reset=="function"&&o.reset()}this.formValue={},this.conditionCheck()},this.resetField=n=>{this.fieldInfoMap.getFieldName(n).$instance.reset(),this.formValue[n]="",this.conditionCheck()},this.getFieldValue=n=>{const l=this.fieldInfoMap.getFieldName(n);return l?l.$instance.getValue():null},this.getValue=n=>this.fieldInfoMap.getAllFieldValue(this.formValue,n),this.getFormDataValue=n=>this.fieldInfoMap.getFormDataValue(this.formValue,n),this.setValue=(n,l)=>{l!==!1&&this.resetForm(),Object.keys(n).forEach(a=>{this._setFieldValue(a,n[a])}),this.conditionCheck()},this.setFieldValue=(n,l)=>{this._setFieldValue(n,l),this.conditionCheck()},this.setFieldItems=(n,l)=>{const a=this.fieldInfoMap.getFieldName(n);if(a)return a.$instance.setValueItems(l)},this.addField=n=>{this.options.fields.push(n),this.formTemplate.addRow(n),this.conditionCheck()},this.removeField=n=>{const l=this.fieldInfoMap.getFieldName(n);if(!l)return;const a=this.getRemoveFields(l);a.forEach(o=>{this.removeFormValue(o)}),this.removeFieldElement(l),this.removeParentChildField(l),a.forEach(o=>{this.fieldInfoMap.removeFieldInfoByKey(o.$key)}),this.conditionCheck()},this.isValidForm=()=>this.validForm().length<1,this.validForm=()=>{let n=[],l=this.options.autoFocus!==!1,a=!0;const o=this.fieldInfoMap.getAllFieldInfo();for(const r in o){const d=o[r];let h=this.fieldInfoMap.getFieldValidation(d,l);h!==!0&&(l=!1,be(d)?n=n.concat(h):(a&&(this.validTabCheck(d),a=!1),n.push(h)))}return n},this.isValidField=n=>{const l=this.fieldInfoMap.getFieldName(n);if(v(l))throw new Error(`Field name [${n}] not found`);const a=l.$instance;return a?a.valid()===!0:!0},this.getOptions=()=>this.options,this.subscribe=n=>(this.changeListeners.push(n),()=>{this.changeListeners=this.changeListeners.filter(l=>l!==n)}),this.destroy=()=>{this.formElement.className=this.orginFormStyleClass,this.formElement.replaceChildren();for(const n in this)ze(this,n)&&(delete this[n],delete ie[this.selector])},this.getFields=()=>this.options.fields,this.setFields=n=>{this.options.fields=n,this.createForm(n)},this.options=xt(t),N.set(i),e)this.orginFormStyleClass=e.className,e.classList.add("daracl-form"),this.selector=`df_${++St}`,e.setAttribute("name",this.selector),e.setAttribute(Ne,this.selector),this.options.style.width&&e.setAttribute("style",`width:${this.options.style.width};`),this.formElement=e,this.changeMode(this.options.mode??"new"),this.createForm(this.options.fields),this.options.autoCreate!==!1&&(ie[this.selector]=this);else throw new Error(`${e} form selector not found`)}static create(e,t,i){return new P(e,t,i)}static setMessage(e){N.set(e)}static setDefaultOptions(e,t){Vt(e),t&&N.set(t)}createForm(e){this.fieldInfoMap=new Ft(this.selector,this),this.formTemplate=new Dt(this,this.formElement,this.fieldInfoMap),this.options.autoCreate!==!1&&(e.forEach(t=>{this.formTemplate.addRow(t)}),this.conditionCheck(),this.options.onMounted&&this.options.onMounted.call(this))}getFieldElement(e){const t=this.fieldInfoMap.getFieldName(e);return t!=null&&t.$instance?t.$instance.getElement():null}getField(e){return this.fieldInfoMap.getFieldName(e)}_setFieldValue(e,t){this.formValue[e]=t;const i=this.fieldInfoMap.getFieldName(e);i&&i.$instance.setValue(t)}getRemoveFields(e,t=[]){var i;return t.push(e),(i=e.children)==null||i.forEach(n=>{n&&this.fieldInfoMap.get(n.$key)===n&&this.getRemoveFields(n,t)}),t}removeFieldElement(e){var o,r;const t=e.$parent;if(t&&_(t)){const d=t.$instance.getElement(),h=d.querySelector(`[data-tab-id="${e.$key}"]`),u=h==null?void 0:h.classList.contains("active");h==null||h.remove(),(o=d.querySelector(`[tab-panel-id="${e.$key}"]`))==null||o.remove();const c=d.querySelector(".df-tab-header .df-tab-item");u&&c&&t.$instance.setActive(c.getAttribute("data-tab-id")??"");return}const i=`[id="${e.$key}"]`;let n=(r=e.$instance)==null?void 0:r.getElement();(n instanceof NodeList||n instanceof HTMLCollection)&&(n=n[0]??null);const l=(n instanceof Element?n.closest(i):null)??this.formElement.querySelector(i),a=l==null?void 0:l.parentElement;l==null||l.remove(),t&&(a!=null&&a.classList.contains("df-row"))&&a.childElementCount<1&&a.remove()}removeParentChildField(e){const t=e.$parent?e.$parent.children:this.options.fields,i=t?t.indexOf(e):-1;i>-1&&(t==null||t.splice(i,1))}removeFormValue(e){const t=[e.name,e.$validName];e.renderType==="file"?t.push(e.$validName+"RemoveIds"):_(e)&&t.push(...Object.keys(e.$instance.getValue()??{})),e.$tabForm&&t.push(...Object.keys(e.$tabForm.getValue(!1)??{})),t.forEach(i=>{M(i)||delete this.formValue[i]})}validTabCheck(e){e.$parent&&(e.$parent.renderType=="tab"&&e.$parent.$instance.setActive(e.$key),this.validTabCheck(e.$parent))}conditionCheck(){this.fieldInfoMap.conditionCheck(),this.notifyChange()}notifyChange(){if(this.changeListeners.length<1)return;const e={form:this};this.changeListeners.forEach(t=>t(e))}setFieldDisabled(e,t){this.fieldInfoMap.getFieldName(e).$instance.setDisabled(t)}setFieldDescription(e,t){this.fieldInfoMap.getFieldName(e).$instance.setDescription(t)}static instance(e){let t;ae(e)?t=document.querySelector(e):t=e,t=t;let i=t.getAttribute(Ne);if(v(i)||M(i)){const n=Object.keys(ie);if(n.length>1)throw new Error(`selector empty : [${i}]`);return i=n[0],ie[i]}}getFieldInfoMap(){return this.fieldInfoMap}};P.VERSION="0.0.19",P.validator={string:(e,t)=>O(e,t),number:(e,t)=>de(e,t),regexp:(e,t)=>{let i={name:t.name,constraint:[]};return De(e,t,i)}};let W=P;typeof window<"u"&&(window.Daracl=window.Daracl||{},window.Daracl.form=W)});
+      </div>`);c&&(this.createField(r,c),a.append(c),r.children&&this.childTemplate(r,r.children?h:t)),d||(l=!0),n=!1}e.$instance.addChildField(a)}getLabelTemplate(e){const t=e.required?'<span class="required"></span>':"",i=M(e.tooltip)?"":`<span class="df-tooltip">?<span class="df-tooltip-text">${e.tooltip}</span></span>`;return`<span class="df-label-text">${e.label??""}</span> ${i} ${t}`}isLabelHide(e){var t;return((t=e.style)==null?void 0:t.labelHide)||v(e.label)}checkHiddenField(e){return Be(e)?(this.fieldInfoMap.addField(e),e.$instance=new e.$renderType(e,null,this.daraform),!0):!1}addRowFieldInfo(e){if(!M(e.name)&&this.fieldInfoMap.hasFieldName(e.name))throw new Error(`Duplicate field name "${e.name}"`);this.fieldInfoMap.addField(e),this.addRowFields.push(e.$key)}}function xt(s){return oe({},ye,s)}function Vt(s){ye=oe({},ye,s)}let ye={style:{width:"100%",labelWidth:3,valueWidth:9,position:"left-right"},mode:"new",useTypeValue:!0,autoCreate:!0,notValidMessage:"This form is not valid.",fields:[]};const ie={},Ne="data-form-uid";let St=0;const P=class P{constructor(e,t,i){if(this.formValue={},this.changeListeners=[],this.changeMode=n=>{this.options.mode=n,this.formElement.setAttribute("data-df-mode",n);const l=this.formElement.querySelectorAll(".df-field input, .df-field textarea, .df-field select");n=="view"?l.forEach(a=>{a instanceof HTMLInputElement&&(a.readOnly=!0),a instanceof HTMLTextAreaElement&&(a.readOnly=!0)}):l.forEach(a=>{a instanceof HTMLInputElement&&(a.readOnly=!1),a instanceof HTMLTextAreaElement&&(a.readOnly=!1)})},this.resetForm=()=>{const n=this.fieldInfoMap.getAllFieldInfo();for(const l in n){const o=n[l].$instance;o&&typeof o.reset=="function"&&o.reset()}this.formValue={},this.conditionCheck()},this.resetField=n=>{this.fieldInfoMap.getFieldName(n).$instance.reset(),this.formValue[n]="",this.conditionCheck()},this.getFieldValue=n=>{const l=this.fieldInfoMap.getFieldName(n);return l?l.$instance.getValue():null},this.getValue=n=>this.fieldInfoMap.getAllFieldValue(this.formValue,n),this.getFormDataValue=n=>this.fieldInfoMap.getFormDataValue(this.formValue,n),this.setValue=(n,l)=>{l!==!1&&this.resetForm(),Object.keys(n).forEach(a=>{this._setFieldValue(a,n[a])}),this.conditionCheck()},this.setFieldValue=(n,l)=>{this._setFieldValue(n,l),this.conditionCheck()},this.setFieldItems=(n,l)=>{const a=this.fieldInfoMap.getFieldName(n);if(a)return a.$instance.setValueItems(l)},this.addField=n=>{this.options.fields.push(n),this.formTemplate.addRow(n),this.conditionCheck()},this.removeField=n=>{const l=this.fieldInfoMap.getFieldName(n);if(!l)return;const a=this.getRemoveFields(l);a.forEach(o=>{this.removeFormValue(o)}),this.removeFieldElement(l),this.removeParentChildField(l),a.forEach(o=>{this.fieldInfoMap.removeFieldInfoByKey(o.$key)}),this.conditionCheck()},this.isValidForm=()=>this.validForm().length<1,this.validForm=()=>{let n=[],l=this.options.autoFocus!==!1,a=!0;const o=this.fieldInfoMap.getAllFieldInfo();for(const r in o){const d=o[r];let h=this.fieldInfoMap.getFieldValidation(d,l);h!==!0&&(l=!1,be(d)?n=n.concat(h):(a&&(this.validTabCheck(d),a=!1),n.push(h)))}return n},this.isValidField=n=>{const l=this.fieldInfoMap.getFieldName(n);if(v(l))throw new Error(`Field name [${n}] not found`);const a=l.$instance;return a?a.valid()===!0:!0},this.getOptions=()=>this.options,this.subscribe=n=>(this.changeListeners.push(n),()=>{this.changeListeners=this.changeListeners.filter(l=>l!==n)}),this.destroy=()=>{this.formElement.className=this.orginFormStyleClass,this.formElement.replaceChildren();for(const n in this)ze(this,n)&&(delete this[n],delete ie[this.selector])},this.getFields=()=>this.options.fields,this.setFields=n=>{this.options.fields=n,this.createForm(n)},this.options=xt(t),N.set(i),e)this.orginFormStyleClass=e.className,e.classList.add("daracl-form"),this.selector=`df_${++St}`,e.setAttribute("name",this.selector),e.setAttribute(Ne,this.selector),this.options.style.width&&e.setAttribute("style",`width:${this.options.style.width};`),this.formElement=e,this.changeMode(this.options.mode??"new"),this.createForm(this.options.fields),this.options.autoCreate!==!1&&(ie[this.selector]=this);else throw new Error(`${e} form selector not found`)}static create(e,t,i){return new P(e,t,i)}static setMessage(e){N.set(e)}static setDefaultOptions(e,t){Vt(e),t&&N.set(t)}createForm(e){this.fieldInfoMap=new Ft(this.selector,this),this.formTemplate=new Dt(this,this.formElement,this.fieldInfoMap),this.options.autoCreate!==!1&&(e.forEach(t=>{this.formTemplate.addRow(t)}),this.conditionCheck(),this.options.onMounted&&this.options.onMounted.call(this))}getFieldElement(e){const t=this.fieldInfoMap.getFieldName(e);return t!=null&&t.$instance?t.$instance.getElement():null}getField(e){return this.fieldInfoMap.getFieldName(e)}_setFieldValue(e,t){this.formValue[e]=t;const i=this.fieldInfoMap.getFieldName(e);i&&i.$instance.setValue(t)}getRemoveFields(e,t=[]){var i;return t.push(e),(i=e.children)==null||i.forEach(n=>{n&&this.fieldInfoMap.get(n.$key)===n&&this.getRemoveFields(n,t)}),t}removeFieldElement(e){var o,r;const t=e.$parent;if(t&&_(t)){const d=t.$instance.getElement(),h=d.querySelector(`[data-tab-id="${e.$key}"]`),u=h==null?void 0:h.classList.contains("active");h==null||h.remove(),(o=d.querySelector(`[tab-panel-id="${e.$key}"]`))==null||o.remove();const c=d.querySelector(".df-tab-header .df-tab-item");u&&c&&t.$instance.setActive(c.getAttribute("data-tab-id")??"");return}const i=`[id="${e.$key}"]`;let n=(r=e.$instance)==null?void 0:r.getElement();(n instanceof NodeList||n instanceof HTMLCollection)&&(n=n[0]??null);const l=(n instanceof Element?n.closest(i):null)??this.formElement.querySelector(i),a=l==null?void 0:l.parentElement;l==null||l.remove(),t&&(a!=null&&a.classList.contains("df-row"))&&a.childElementCount<1&&a.remove()}removeParentChildField(e){const t=e.$parent?e.$parent.children:this.options.fields,i=t?t.indexOf(e):-1;i>-1&&(t==null||t.splice(i,1))}removeFormValue(e){const t=[e.name,e.$validName];e.renderType==="file"?t.push(e.$validName+"RemoveIds"):_(e)&&t.push(...Object.keys(e.$instance.getValue()??{})),e.$tabForm&&t.push(...Object.keys(e.$tabForm.getValue(!1)??{})),t.forEach(i=>{M(i)||delete this.formValue[i]})}validTabCheck(e){e.$parent&&(e.$parent.renderType=="tab"&&e.$parent.$instance.setActive(e.$key),this.validTabCheck(e.$parent))}conditionCheck(){this.fieldInfoMap.conditionCheck(),this.notifyChange()}notifyChange(){if(this.changeListeners.length<1)return;const e={form:this};this.changeListeners.forEach(t=>t(e))}setFieldDisabled(e,t){this.fieldInfoMap.getFieldName(e).$instance.setDisabled(t)}setFieldDescription(e,t){this.fieldInfoMap.getFieldName(e).$instance.setDescription(t)}static instance(e){let t;ae(e)?t=document.querySelector(e):t=e,t=t;let i=t.getAttribute(Ne);if(v(i)||M(i)){const n=Object.keys(ie);if(n.length>1)throw new Error(`selector empty : [${i}]`);return i=n[0],ie[i]}}getFieldInfoMap(){return this.fieldInfoMap}};P.VERSION="0.0.20",P.validator={string:(e,t)=>O(e,t),number:(e,t)=>de(e,t),regexp:(e,t)=>{let i={name:t.name,constraint:[]};return De(e,t,i)}};let W=P;typeof window<"u"&&(window.Daracl=window.Daracl||{},window.Daracl.form=W)});
 //# sourceMappingURL=daracl.form.min.umd.js.map

package/dist/daracl.form.umd.js

@@ -4475,7 +4475,7 @@
       return this.fieldInfoMap;
     }
   };
-  _DaraForm.VERSION = `${"0.0.19"}`;
+  _DaraForm.VERSION = `${"0.0.20"}`;
   _DaraForm.validator = {
     string: (value, field) => {
       return stringValidator(value, field);

package/dist/index.cjs

@@ -4421,7 +4421,7 @@ const _DaraForm = class _DaraForm {
     return this.fieldInfoMap;
   }
 };
-_DaraForm.VERSION = `${"0.0.19"}`;
+_DaraForm.VERSION = `${"0.0.20"}`;
 _DaraForm.validator = {
   string: (value, field) => {
     return stringValidator(value, field);

package/dist/index.js

@@ -4419,7 +4419,7 @@ const _DaraForm = class _DaraForm {
     return this.fieldInfoMap;
   }
 };
-_DaraForm.VERSION = `${"0.0.19"}`;
+_DaraForm.VERSION = `${"0.0.20"}`;
 _DaraForm.validator = {
   string: (value, field) => {
     return stringValidator(value, field);

package/dist/index.min.cjs

@@ -1,5 +1,5 @@
 /*!
-* @daracl/form v0.0.19
+* @daracl/form v0.0.20
 * Copyright 2023-2026 darainfo;
 * Licensed MIT
 */
@@ -167,5 +167,5 @@
     `);s&&(this.createField(e,s),this.formElement.append(s),e.children&&this.childTemplate(e,i))}createField(e,t){e.$instance=new e.$renderType(e,t,this.daraform)}childTemplate(e,t){let i=null,s=!0,n=!1;if(!e.$renderType.isChildrenCreate())return;const a=document.createElement("div");a.classList.add("df-row",t.rowStyleClass??"");let o=0;for(const r of e.children){if(C(r))throw new Error(`parent field :[${e.$validName}], children index ${o},  empty [${r}]`);if(r.$parent=e,++o,this.checkHiddenField(r))continue;this.addRowFieldInfo(r),s&&(i=r);let d=this.isLabelHide(r),h,u="";d?(h=A(this.options,r,i,!n),u=n?`<span class="df-label df-empty ${h.labelClass}" style="${h.labelStyle}"></span>`:""):(h=A(this.options,r,i,!1),u=`<span class="df-label ${h.labelClass} ${h.labelAlignClass}" title="${r.label??""}" style="${h.labelStyle}">${this.getLabelTemplate(r)}</span>`);const c=j(`<div class="df-form-group ${h.fieldClass}" style="${h.fieldStyle}" id="${r.$key}">
         ${u}
         <span class="df-field-container ${h.valueClass} ${r.required?"required":""}" style="${h.valueStyle}"></span>
-      </div>`);c&&(this.createField(r,c),a.append(c),r.children&&this.childTemplate(r,r.children?h:t)),d||(n=!0),s=!1}e.$instance.addChildField(a)}getLabelTemplate(e){const t=e.required?'<span class="required"></span>':"",i=D(e.tooltip)?"":`<span class="df-tooltip">?<span class="df-tooltip-text">${e.tooltip}</span></span>`;return`<span class="df-label-text">${e.label??""}</span> ${i} ${t}`}isLabelHide(e){var t;return((t=e.style)==null?void 0:t.labelHide)||E(e.label)}checkHiddenField(e){return Re(e)?(this.fieldInfoMap.addField(e),e.$instance=new e.$renderType(e,null,this.daraform),!0):!1}addRowFieldInfo(e){if(!D(e.name)&&this.fieldInfoMap.hasFieldName(e.name))throw new Error(`Duplicate field name "${e.name}"`);this.fieldInfoMap.addField(e),this.addRowFields.push(e.$key)}}function yt(l){return oe({},ne,l)}function Et(l){ne=oe({},ne,l)}let ne={style:{width:"100%",labelWidth:3,valueWidth:9,position:"left-right"},mode:"new",useTypeValue:!0,autoCreate:!0,notValidMessage:"This form is not valid.",fields:[]};const K={},De="data-form-uid";let bt=0;const Y=class Y{constructor(e,t,i){if(this.formValue={},this.changeListeners=[],this.changeMode=s=>{this.options.mode=s,this.formElement.setAttribute("data-df-mode",s);const n=this.formElement.querySelectorAll(".df-field input, .df-field textarea, .df-field select");s=="view"?n.forEach(a=>{a instanceof HTMLInputElement&&(a.readOnly=!0),a instanceof HTMLTextAreaElement&&(a.readOnly=!0)}):n.forEach(a=>{a instanceof HTMLInputElement&&(a.readOnly=!1),a instanceof HTMLTextAreaElement&&(a.readOnly=!1)})},this.resetForm=()=>{const s=this.fieldInfoMap.getAllFieldInfo();for(const n in s){const o=s[n].$instance;o&&typeof o.reset=="function"&&o.reset()}this.formValue={},this.conditionCheck()},this.resetField=s=>{this.fieldInfoMap.getFieldName(s).$instance.reset(),this.formValue[s]="",this.conditionCheck()},this.getFieldValue=s=>{const n=this.fieldInfoMap.getFieldName(s);return n?n.$instance.getValue():null},this.getValue=s=>this.fieldInfoMap.getAllFieldValue(this.formValue,s),this.getFormDataValue=s=>this.fieldInfoMap.getFormDataValue(this.formValue,s),this.setValue=(s,n)=>{n!==!1&&this.resetForm(),Object.keys(s).forEach(a=>{this._setFieldValue(a,s[a])}),this.conditionCheck()},this.setFieldValue=(s,n)=>{this._setFieldValue(s,n),this.conditionCheck()},this.setFieldItems=(s,n)=>{const a=this.fieldInfoMap.getFieldName(s);if(a)return a.$instance.setValueItems(n)},this.addField=s=>{this.options.fields.push(s),this.formTemplate.addRow(s),this.conditionCheck()},this.removeField=s=>{const n=this.fieldInfoMap.getFieldName(s);if(!n)return;const a=this.getRemoveFields(n);a.forEach(o=>{this.removeFormValue(o)}),this.removeFieldElement(n),this.removeParentChildField(n),a.forEach(o=>{this.fieldInfoMap.removeFieldInfoByKey(o.$key)}),this.conditionCheck()},this.isValidForm=()=>this.validForm().length<1,this.validForm=()=>{let s=[],n=this.options.autoFocus!==!1,a=!0;const o=this.fieldInfoMap.getAllFieldInfo();for(const r in o){const d=o[r];let h=this.fieldInfoMap.getFieldValidation(d,n);h!==!0&&(n=!1,xe(d)?s=s.concat(h):(a&&(this.validTabCheck(d),a=!1),s.push(h)))}return s},this.isValidField=s=>{const n=this.fieldInfoMap.getFieldName(s);if(E(n))throw new Error(`Field name [${s}] not found`);const a=n.$instance;return a?a.valid()===!0:!0},this.getOptions=()=>this.options,this.subscribe=s=>(this.changeListeners.push(s),()=>{this.changeListeners=this.changeListeners.filter(n=>n!==s)}),this.destroy=()=>{this.formElement.className=this.orginFormStyleClass,this.formElement.replaceChildren();for(const s in this)qe(this,s)&&(delete this[s],delete K[this.selector])},this.getFields=()=>this.options.fields,this.setFields=s=>{this.options.fields=s,this.createForm(s)},this.options=yt(t),I.set(i),e)this.orginFormStyleClass=e.className,e.classList.add("daracl-form"),this.selector=`df_${++bt}`,e.setAttribute("name",this.selector),e.setAttribute(De,this.selector),this.options.style.width&&e.setAttribute("style",`width:${this.options.style.width};`),this.formElement=e,this.changeMode(this.options.mode??"new"),this.createForm(this.options.fields),this.options.autoCreate!==!1&&(K[this.selector]=this);else throw new Error(`${e} form selector not found`)}static create(e,t,i){return new Y(e,t,i)}static setMessage(e){I.set(e)}static setDefaultOptions(e,t){Et(e),t&&I.set(t)}createForm(e){this.fieldInfoMap=new gt(this.selector,this),this.formTemplate=new vt(this,this.formElement,this.fieldInfoMap),this.options.autoCreate!==!1&&(e.forEach(t=>{this.formTemplate.addRow(t)}),this.conditionCheck(),this.options.onMounted&&this.options.onMounted.call(this))}getFieldElement(e){const t=this.fieldInfoMap.getFieldName(e);return t!=null&&t.$instance?t.$instance.getElement():null}getField(e){return this.fieldInfoMap.getFieldName(e)}_setFieldValue(e,t){this.formValue[e]=t;const i=this.fieldInfoMap.getFieldName(e);i&&i.$instance.setValue(t)}getRemoveFields(e,t=[]){var i;return t.push(e),(i=e.children)==null||i.forEach(s=>{s&&this.fieldInfoMap.get(s.$key)===s&&this.getRemoveFields(s,t)}),t}removeFieldElement(e){var o,r;const t=e.$parent;if(t&&_(t)){const d=t.$instance.getElement(),h=d.querySelector(`[data-tab-id="${e.$key}"]`),u=h==null?void 0:h.classList.contains("active");h==null||h.remove(),(o=d.querySelector(`[tab-panel-id="${e.$key}"]`))==null||o.remove();const c=d.querySelector(".df-tab-header .df-tab-item");u&&c&&t.$instance.setActive(c.getAttribute("data-tab-id")??"");return}const i=`[id="${e.$key}"]`;let s=(r=e.$instance)==null?void 0:r.getElement();(s instanceof NodeList||s instanceof HTMLCollection)&&(s=s[0]??null);const n=(s instanceof Element?s.closest(i):null)??this.formElement.querySelector(i),a=n==null?void 0:n.parentElement;n==null||n.remove(),t&&(a!=null&&a.classList.contains("df-row"))&&a.childElementCount<1&&a.remove()}removeParentChildField(e){const t=e.$parent?e.$parent.children:this.options.fields,i=t?t.indexOf(e):-1;i>-1&&(t==null||t.splice(i,1))}removeFormValue(e){const t=[e.name,e.$validName];e.renderType==="file"?t.push(e.$validName+"RemoveIds"):_(e)&&t.push(...Object.keys(e.$instance.getValue()??{})),e.$tabForm&&t.push(...Object.keys(e.$tabForm.getValue(!1)??{})),t.forEach(i=>{D(i)||delete this.formValue[i]})}validTabCheck(e){e.$parent&&(e.$parent.renderType=="tab"&&e.$parent.$instance.setActive(e.$key),this.validTabCheck(e.$parent))}conditionCheck(){this.fieldInfoMap.conditionCheck(),this.notifyChange()}notifyChange(){if(this.changeListeners.length<1)return;const e={form:this};this.changeListeners.forEach(t=>t(e))}setFieldDisabled(e,t){this.fieldInfoMap.getFieldName(e).$instance.setDisabled(t)}setFieldDescription(e,t){this.fieldInfoMap.getFieldName(e).$instance.setDescription(t)}static instance(e){let t;ae(e)?t=document.querySelector(e):t=e,t=t;let i=t.getAttribute(De);if(E(i)||D(i)){const s=Object.keys(K);if(s.length>1)throw new Error(`selector empty : [${i}]`);return i=s[0],K[i]}}getFieldInfoMap(){return this.fieldInfoMap}};Y.VERSION="0.0.19",Y.validator={string:(e,t)=>R(e,t),number:(e,t)=>de(e,t),regexp:(e,t)=>{let i={name:t.name,constraint:[]};return Ce(e,t,i)}};let z=Y;exports.DaraForm=z;
+      </div>`);c&&(this.createField(r,c),a.append(c),r.children&&this.childTemplate(r,r.children?h:t)),d||(n=!0),s=!1}e.$instance.addChildField(a)}getLabelTemplate(e){const t=e.required?'<span class="required"></span>':"",i=D(e.tooltip)?"":`<span class="df-tooltip">?<span class="df-tooltip-text">${e.tooltip}</span></span>`;return`<span class="df-label-text">${e.label??""}</span> ${i} ${t}`}isLabelHide(e){var t;return((t=e.style)==null?void 0:t.labelHide)||E(e.label)}checkHiddenField(e){return Re(e)?(this.fieldInfoMap.addField(e),e.$instance=new e.$renderType(e,null,this.daraform),!0):!1}addRowFieldInfo(e){if(!D(e.name)&&this.fieldInfoMap.hasFieldName(e.name))throw new Error(`Duplicate field name "${e.name}"`);this.fieldInfoMap.addField(e),this.addRowFields.push(e.$key)}}function yt(l){return oe({},ne,l)}function Et(l){ne=oe({},ne,l)}let ne={style:{width:"100%",labelWidth:3,valueWidth:9,position:"left-right"},mode:"new",useTypeValue:!0,autoCreate:!0,notValidMessage:"This form is not valid.",fields:[]};const K={},De="data-form-uid";let bt=0;const Y=class Y{constructor(e,t,i){if(this.formValue={},this.changeListeners=[],this.changeMode=s=>{this.options.mode=s,this.formElement.setAttribute("data-df-mode",s);const n=this.formElement.querySelectorAll(".df-field input, .df-field textarea, .df-field select");s=="view"?n.forEach(a=>{a instanceof HTMLInputElement&&(a.readOnly=!0),a instanceof HTMLTextAreaElement&&(a.readOnly=!0)}):n.forEach(a=>{a instanceof HTMLInputElement&&(a.readOnly=!1),a instanceof HTMLTextAreaElement&&(a.readOnly=!1)})},this.resetForm=()=>{const s=this.fieldInfoMap.getAllFieldInfo();for(const n in s){const o=s[n].$instance;o&&typeof o.reset=="function"&&o.reset()}this.formValue={},this.conditionCheck()},this.resetField=s=>{this.fieldInfoMap.getFieldName(s).$instance.reset(),this.formValue[s]="",this.conditionCheck()},this.getFieldValue=s=>{const n=this.fieldInfoMap.getFieldName(s);return n?n.$instance.getValue():null},this.getValue=s=>this.fieldInfoMap.getAllFieldValue(this.formValue,s),this.getFormDataValue=s=>this.fieldInfoMap.getFormDataValue(this.formValue,s),this.setValue=(s,n)=>{n!==!1&&this.resetForm(),Object.keys(s).forEach(a=>{this._setFieldValue(a,s[a])}),this.conditionCheck()},this.setFieldValue=(s,n)=>{this._setFieldValue(s,n),this.conditionCheck()},this.setFieldItems=(s,n)=>{const a=this.fieldInfoMap.getFieldName(s);if(a)return a.$instance.setValueItems(n)},this.addField=s=>{this.options.fields.push(s),this.formTemplate.addRow(s),this.conditionCheck()},this.removeField=s=>{const n=this.fieldInfoMap.getFieldName(s);if(!n)return;const a=this.getRemoveFields(n);a.forEach(o=>{this.removeFormValue(o)}),this.removeFieldElement(n),this.removeParentChildField(n),a.forEach(o=>{this.fieldInfoMap.removeFieldInfoByKey(o.$key)}),this.conditionCheck()},this.isValidForm=()=>this.validForm().length<1,this.validForm=()=>{let s=[],n=this.options.autoFocus!==!1,a=!0;const o=this.fieldInfoMap.getAllFieldInfo();for(const r in o){const d=o[r];let h=this.fieldInfoMap.getFieldValidation(d,n);h!==!0&&(n=!1,xe(d)?s=s.concat(h):(a&&(this.validTabCheck(d),a=!1),s.push(h)))}return s},this.isValidField=s=>{const n=this.fieldInfoMap.getFieldName(s);if(E(n))throw new Error(`Field name [${s}] not found`);const a=n.$instance;return a?a.valid()===!0:!0},this.getOptions=()=>this.options,this.subscribe=s=>(this.changeListeners.push(s),()=>{this.changeListeners=this.changeListeners.filter(n=>n!==s)}),this.destroy=()=>{this.formElement.className=this.orginFormStyleClass,this.formElement.replaceChildren();for(const s in this)qe(this,s)&&(delete this[s],delete K[this.selector])},this.getFields=()=>this.options.fields,this.setFields=s=>{this.options.fields=s,this.createForm(s)},this.options=yt(t),I.set(i),e)this.orginFormStyleClass=e.className,e.classList.add("daracl-form"),this.selector=`df_${++bt}`,e.setAttribute("name",this.selector),e.setAttribute(De,this.selector),this.options.style.width&&e.setAttribute("style",`width:${this.options.style.width};`),this.formElement=e,this.changeMode(this.options.mode??"new"),this.createForm(this.options.fields),this.options.autoCreate!==!1&&(K[this.selector]=this);else throw new Error(`${e} form selector not found`)}static create(e,t,i){return new Y(e,t,i)}static setMessage(e){I.set(e)}static setDefaultOptions(e,t){Et(e),t&&I.set(t)}createForm(e){this.fieldInfoMap=new gt(this.selector,this),this.formTemplate=new vt(this,this.formElement,this.fieldInfoMap),this.options.autoCreate!==!1&&(e.forEach(t=>{this.formTemplate.addRow(t)}),this.conditionCheck(),this.options.onMounted&&this.options.onMounted.call(this))}getFieldElement(e){const t=this.fieldInfoMap.getFieldName(e);return t!=null&&t.$instance?t.$instance.getElement():null}getField(e){return this.fieldInfoMap.getFieldName(e)}_setFieldValue(e,t){this.formValue[e]=t;const i=this.fieldInfoMap.getFieldName(e);i&&i.$instance.setValue(t)}getRemoveFields(e,t=[]){var i;return t.push(e),(i=e.children)==null||i.forEach(s=>{s&&this.fieldInfoMap.get(s.$key)===s&&this.getRemoveFields(s,t)}),t}removeFieldElement(e){var o,r;const t=e.$parent;if(t&&_(t)){const d=t.$instance.getElement(),h=d.querySelector(`[data-tab-id="${e.$key}"]`),u=h==null?void 0:h.classList.contains("active");h==null||h.remove(),(o=d.querySelector(`[tab-panel-id="${e.$key}"]`))==null||o.remove();const c=d.querySelector(".df-tab-header .df-tab-item");u&&c&&t.$instance.setActive(c.getAttribute("data-tab-id")??"");return}const i=`[id="${e.$key}"]`;let s=(r=e.$instance)==null?void 0:r.getElement();(s instanceof NodeList||s instanceof HTMLCollection)&&(s=s[0]??null);const n=(s instanceof Element?s.closest(i):null)??this.formElement.querySelector(i),a=n==null?void 0:n.parentElement;n==null||n.remove(),t&&(a!=null&&a.classList.contains("df-row"))&&a.childElementCount<1&&a.remove()}removeParentChildField(e){const t=e.$parent?e.$parent.children:this.options.fields,i=t?t.indexOf(e):-1;i>-1&&(t==null||t.splice(i,1))}removeFormValue(e){const t=[e.name,e.$validName];e.renderType==="file"?t.push(e.$validName+"RemoveIds"):_(e)&&t.push(...Object.keys(e.$instance.getValue()??{})),e.$tabForm&&t.push(...Object.keys(e.$tabForm.getValue(!1)??{})),t.forEach(i=>{D(i)||delete this.formValue[i]})}validTabCheck(e){e.$parent&&(e.$parent.renderType=="tab"&&e.$parent.$instance.setActive(e.$key),this.validTabCheck(e.$parent))}conditionCheck(){this.fieldInfoMap.conditionCheck(),this.notifyChange()}notifyChange(){if(this.changeListeners.length<1)return;const e={form:this};this.changeListeners.forEach(t=>t(e))}setFieldDisabled(e,t){this.fieldInfoMap.getFieldName(e).$instance.setDisabled(t)}setFieldDescription(e,t){this.fieldInfoMap.getFieldName(e).$instance.setDescription(t)}static instance(e){let t;ae(e)?t=document.querySelector(e):t=e,t=t;let i=t.getAttribute(De);if(E(i)||D(i)){const s=Object.keys(K);if(s.length>1)throw new Error(`selector empty : [${i}]`);return i=s[0],K[i]}}getFieldInfoMap(){return this.fieldInfoMap}};Y.VERSION="0.0.20",Y.validator={string:(e,t)=>R(e,t),number:(e,t)=>de(e,t),regexp:(e,t)=>{let i={name:t.name,constraint:[]};return Ce(e,t,i)}};let z=Y;exports.DaraForm=z;
 //# sourceMappingURL=index.min.cjs.map

package/dist/index.min.js

@@ -1,5 +1,5 @@
 /*!
-* @daracl/form v0.0.19
+* @daracl/form v0.0.20
 * Copyright 2023-2026 darainfo;
 * Licensed MIT
 */
@@ -2900,7 +2900,7 @@ const _ = class _ {
     return this.fieldInfoMap;
   }
 };
-_.VERSION = "0.0.19", _.validator = {
+_.VERSION = "0.0.20", _.validator = {
   string: (e, t) => R(e, t),
   number: (e, t) => ue(e, t),
   regexp: (e, t) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daracl/form",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "sideEffects": false,
   "description": "Daracl form validation ",
   "author": {

package/style/components/_form-field.scss

@@ -31,6 +31,9 @@
 
     &.df-textarea {
       padding-right: 0px;
+      padding-top: 5px;
+      padding-bottom: 5px;
+      height: initial;
     }
 
     &[type="number"] {

package/style/components/_label.scss

@@ -4,7 +4,7 @@
     vertical-align: top;
     padding-right: var(--field-padding-right);
     display: flex;
-    align-items: center;
+    align-items: flex-start;
 
     .required {
       color: var(--color-danger);