@bagelink/vue 0.0.612 → 0.0.614

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/style.css CHANGED
@@ -859,25 +859,25 @@ tbody tr[data-v-d01cb754]:hover {
859
859
  background: var(--bgl-gray-light);
860
860
  }
861
861
 
862
- data[data-v-0ffde6c7] {
862
+ data[data-v-d3655508] {
863
863
  font-size: var(--input-font-size);
864
864
  border: 1.1px solid var(--border-color);
865
865
  padding: 20px;
866
866
  border-radius: var(--input-border-radius);
867
867
  }
868
- .data-row[data-v-0ffde6c7] {
868
+ .data-row[data-v-d3655508] {
869
869
  display: flex;
870
870
  justify-content: space-between;
871
871
  border-bottom: 1px solid var(--border-color);
872
872
  align-items: center;
873
873
  min-height: 50px;
874
874
  }
875
- .data-row .bagel-input.shrink[data-v-0ffde6c7],
876
- .data-row .bagel-input.shrink input[data-v-0ffde6c7] {
875
+ .data-row .bagel-input.shrink[data-v-d3655508],
876
+ .data-row .bagel-input.shrink input[data-v-d3655508] {
877
877
  min-width: 140px !important;
878
878
  /* margin-top: -0.45rem !important; */
879
879
  }
880
- .data-link[data-v-0ffde6c7] {
880
+ .data-link[data-v-d3655508] {
881
881
  display: block;
882
882
  font-size: var(--input-font-size);
883
883
  margin-bottom: 2px;
@@ -885,7 +885,7 @@ data[data-v-0ffde6c7] {
885
885
  color: var(--input-color);
886
886
  }
887
887
  @media screen and (max-width: 910px) {
888
- .data-row[data-v-0ffde6c7] {
888
+ .data-row[data-v-d3655508] {
889
889
  display: block;
890
890
  /* min-height: 80px; */
891
891
  padding-bottom: 1rem;
@@ -895,9 +895,11 @@ data[data-v-0ffde6c7] {
895
895
  .data-row .bagel-input,
896
896
  .data-row .bagel-input input {
897
897
  min-width: 140px !important;
898
- /* margin-top: 0.5rem !important; */
899
898
  height: calc(var(--input-height) - 0.25rem) !important;
900
899
  }
900
+ .data-row .bagel-input.bgl-toggle input {
901
+ height:20px !important;
902
+ }
901
903
 
902
904
  .card_label {
903
905
  font-size: 1rem;
@@ -1868,17 +1870,20 @@ svg.leaflet-image-layer.leaflet-interactive path {
1868
1870
  transform: translateY(-2.6rem);
1869
1871
  }
1870
1872
 
1871
- .bgl-checkbox[data-v-e8fcfd5e] {
1873
+ .bgl-checkbox[data-v-6bc5ed15] {
1872
1874
  flex-direction: row;
1873
1875
  cursor: pointer;
1874
1876
  }
1875
- .bgl-checkbox input[type='checkbox'][data-v-e8fcfd5e] {
1877
+ .bgl-checkbox input[type='checkbox'][data-v-6bc5ed15] {
1876
1878
  accent-color: var(--bgl-primary);
1877
1879
  height: calc(var(--input-height) / 2.75);
1878
1880
  width: calc(var(--input-height) / 2.75);
1879
1881
  min-width: 0;
1882
+ display: flex;
1883
+ justify-content: center;
1884
+ align-items: center;
1880
1885
  }
1881
- .bgl-checkbox input[type='checkbox'][data-v-e8fcfd5e]::before {
1886
+ .bgl-checkbox input[type='checkbox'][data-v-6bc5ed15]::before {
1882
1887
  content: '';
1883
1888
  height: calc(var(--input-height) / 2.75);
1884
1889
  width: calc(var(--input-height) / 2.75);
@@ -1888,23 +1893,23 @@ svg.leaflet-image-layer.leaflet-interactive path {
1888
1893
  transition: all 200ms ease;
1889
1894
  position: absolute;
1890
1895
  }
1891
- .bgl-checkbox input[type='checkbox'][data-v-e8fcfd5e]:hover::before {
1896
+ .bgl-checkbox input[type='checkbox'][data-v-6bc5ed15]:hover::before {
1892
1897
  opacity: 0.2;
1893
1898
  transform: scale(2);
1894
1899
  }
1895
- .bgl-checkbox label[data-v-e8fcfd5e] {
1900
+ .bgl-checkbox label[data-v-6bc5ed15] {
1896
1901
  cursor: pointer;
1897
1902
  user-select: none;
1898
1903
  font-size: var(--input-font-size);
1899
1904
  transition: var(--bgl-transition-400);
1900
1905
  }
1901
- .bgl-checkbox:hover label[data-v-e8fcfd5e] {
1906
+ .bgl-checkbox:hover label[data-v-6bc5ed15] {
1902
1907
  color: var(--bgl-primary) !important;
1903
1908
  }
1904
- .bgl-checkbox input:checked + label[data-v-e8fcfd5e]{
1909
+ .bgl-checkbox input:checked + label[data-v-6bc5ed15]{
1905
1910
  color: var(--bgl-primary) !important;
1906
1911
  }
1907
- .bagel-input:focus-within.bgl-checkbox:not(:checked) label[data-v-e8fcfd5e] {
1912
+ .bagel-input:focus-within.bgl-checkbox:not(:checked) label[data-v-6bc5ed15] {
1908
1913
  color: var(--label-color) !important;
1909
1914
  }
1910
1915
  .dp__input_wrap{position:relative;width:100%;box-sizing:unset}.dp__input_wrap:focus{border-color:var(--dp-border-color-hover);outline:none}.dp__input_valid{box-shadow:0 0 var(--dp-border-radius) var(--dp-success-color);border-color:var(--dp-success-color)}.dp__input_valid:hover{border-color:var(--dp-success-color)}.dp__input_invalid{box-shadow:0 0 var(--dp-border-radius) var(--dp-danger-color);border-color:var(--dp-danger-color)}.dp__input_invalid:hover{border-color:var(--dp-danger-color)}.dp__input{background-color:var(--dp-background-color);border-radius:var(--dp-border-radius);font-family:var(--dp-font-family);border:1px solid var(--dp-border-color);outline:none;transition:border-color .2s cubic-bezier(0.645, 0.045, 0.355, 1);width:100%;font-size:var(--dp-font-size);line-height:calc(var(--dp-font-size)*1.5);padding:var(--dp-input-padding);color:var(--dp-text-color);box-sizing:border-box}.dp__input::placeholder{opacity:.7}.dp__input:hover:not(.dp__input_focus){border-color:var(--dp-border-color-hover)}.dp__input_reg{caret-color:rgba(0,0,0,0)}.dp__input_focus{border-color:var(--dp-border-color-focus)}.dp__disabled{background:var(--dp-disabled-color)}.dp__disabled::placeholder{color:var(--dp-disabled-color-text)}.dp__input_icons{display:inline-block;width:var(--dp-font-size);height:var(--dp-font-size);stroke-width:0;font-size:var(--dp-font-size);line-height:calc(var(--dp-font-size)*1.5);padding:6px 12px;color:var(--dp-icon-color);box-sizing:content-box}.dp__input_icon{cursor:pointer;position:absolute;top:50%;inset-inline-start:0;transform:translateY(-50%);color:var(--dp-icon-color)}.dp__clear_icon{position:absolute;top:50%;inset-inline-end:0;transform:translateY(-50%);cursor:pointer;color:var(--dp-icon-color)}.dp__input_icon_pad{padding-inline-start:var(--dp-input-icon-padding)}.dp__menu{background:var(--dp-background-color);border-radius:var(--dp-border-radius);min-width:var(--dp-menu-min-width);font-family:var(--dp-font-family);font-size:var(--dp-font-size);user-select:none;border:1px solid var(--dp-menu-border-color);box-sizing:border-box}.dp__menu::after{box-sizing:border-box}.dp__menu::before{box-sizing:border-box}.dp__menu:focus{border:1px solid var(--dp-menu-border-color);outline:none}.dp--menu-wrapper{position:absolute;z-index:99999}.dp__menu_inner{padding:var(--dp-menu-padding)}.dp--menu--inner-stretched{padding:6px 0}.dp__menu_index{z-index:99999}.dp-menu-loading,.dp__menu_readonly,.dp__menu_disabled{position:absolute;inset:0;z-index:999999}.dp__menu_disabled{background:rgba(255,255,255,.5);cursor:not-allowed}.dp__menu_readonly{background:rgba(0,0,0,0);cursor:default}.dp-menu-loading{background:rgba(255,255,255,.5);cursor:default}.dp--menu-load-container{display:flex;height:100%;width:100%;justify-content:center;align-items:center}.dp--menu-loader{width:48px;height:48px;border:var(--dp-loader);border-bottom-color:rgba(0,0,0,0);border-radius:50%;display:inline-block;box-sizing:border-box;animation:dp-load-rotation 1s linear infinite;position:absolute}@keyframes dp-load-rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.dp__arrow_top{left:var(--dp-arrow-left);top:0;height:12px;width:12px;background-color:var(--dp-background-color);position:absolute;border-inline-end:1px solid var(--dp-menu-border-color);border-top:1px solid var(--dp-menu-border-color);transform:translate(-50%, -50%) rotate(-45deg)}.dp__arrow_bottom{left:var(--dp-arrow-left);bottom:0;height:12px;width:12px;background-color:var(--dp-background-color);position:absolute;border-inline-end:1px solid var(--dp-menu-border-color);border-bottom:1px solid var(--dp-menu-border-color);transform:translate(-50%, 50%) rotate(45deg)}.dp__action_extra{text-align:center;padding:2px 0}.dp--preset-dates{padding:5px;border-inline-end:1px solid var(--dp-border-color)}@media only screen and (width <= 600px){.dp--preset-dates{display:flex;align-self:center;border:none;overflow-x:auto;max-width:calc(var(--dp-menu-width) - var(--dp-action-row-padding)*2)}}.dp--preset-dates-collapsed{display:flex;align-self:center;border:none;overflow-x:auto;max-width:calc(var(--dp-menu-width) - var(--dp-action-row-padding)*2)}.dp__sidebar_left{padding:5px;border-inline-end:1px solid var(--dp-border-color)}.dp__sidebar_right{padding:5px;margin-inline-end:1px solid var(--dp-border-color)}.dp--preset-range{display:block;width:100%;padding:5px;text-align:left;white-space:nowrap;color:var(--dp-text-color);border-radius:var(--dp-border-radius);transition:var(--dp-common-transition)}.dp--preset-range:hover{background-color:var(--dp-hover-color);color:var(--dp-hover-text-color);cursor:pointer}@media only screen and (width <= 600px){.dp--preset-range{border:1px solid var(--dp-border-color);margin:0 3px}.dp--preset-range:first-child{margin-left:0}.dp--preset-range:last-child{margin-right:0}}.dp--preset-range-collapsed{border:1px solid var(--dp-border-color);margin:0 3px}.dp--preset-range-collapsed:first-child{margin-left:0}.dp--preset-range-collapsed:last-child{margin-right:0}.dp__menu_content_wrapper{display:flex}@media only screen and (width <= 600px){.dp__menu_content_wrapper{flex-direction:column-reverse}}.dp--menu-content-wrapper-collapsed{flex-direction:column-reverse}.dp__calendar_header{position:relative;display:flex;justify-content:center;align-items:center;color:var(--dp-text-color);white-space:nowrap;font-weight:bold}.dp__calendar_header_item{text-align:center;flex-grow:1;height:var(--dp-cell-size);padding:var(--dp-cell-padding);width:var(--dp-cell-size);box-sizing:border-box}.dp__calendar_row{display:flex;justify-content:center;align-items:center;margin:var(--dp-row-margin)}.dp__calendar_item{text-align:center;flex-grow:1;box-sizing:border-box;color:var(--dp-text-color)}.dp__calendar{position:relative}.dp__calendar_header_cell{border-bottom:thin solid var(--dp-border-color);padding:var(--dp-calendar-header-cell-padding)}.dp__cell_inner{display:flex;align-items:center;text-align:center;justify-content:center;border-radius:var(--dp-cell-border-radius);height:var(--dp-cell-size);padding:var(--dp-cell-padding);width:var(--dp-cell-size);border:1px solid rgba(0,0,0,0);box-sizing:border-box;position:relative}.dp__cell_inner:hover{transition:all .2s}.dp__cell_auto_range_start,.dp__date_hover_start:hover,.dp__range_start{border-end-end-radius:0;border-start-end-radius:0}.dp__cell_auto_range_end,.dp__date_hover_end:hover,.dp__range_end{border-end-start-radius:0;border-start-start-radius:0}.dp__range_end,.dp__range_start,.dp__active_date{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp__date_hover_end:hover,.dp__date_hover_start:hover,.dp__date_hover:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__cell_offset{color:var(--dp-secondary-color)}.dp__cell_disabled{color:var(--dp-secondary-color);cursor:not-allowed}.dp__range_between{background:var(--dp-range-between-dates-background-color);color:var(--dp-range-between-dates-text-color);border-radius:0;border:1px solid var(--dp-range-between-border-color)}.dp__range_between_week{background:var(--dp-primary-color);color:var(--dp-primary-text-color);border-radius:0;border-top:1px solid var(--dp-primary-color);border-bottom:1px solid var(--dp-primary-color)}.dp__today{border:1px solid var(--dp-primary-color)}.dp__week_num{color:var(--dp-secondary-color);text-align:center}.dp__cell_auto_range{border-radius:0;border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color)}.dp__cell_auto_range_start{border-start-start-radius:var(--dp-cell-border-radius);border-end-start-radius:var(--dp-cell-border-radius);border-inline-start:1px dashed var(--dp-primary-color);border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color)}.dp__cell_auto_range_end{border-start-end-radius:var(--dp-cell-border-radius);border-end-end-radius:var(--dp-cell-border-radius);border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color);border-inline-end:1px dashed var(--dp-primary-color)}.dp__calendar_header_separator{width:100%;height:1px;background:var(--dp-border-color)}.dp__calendar_next{margin-inline-start:var(--dp-multi-calendars-spacing)}.dp__marker_line,.dp__marker_dot{height:5px;background-color:var(--dp-marker-color);position:absolute;bottom:0}.dp__marker_dot{width:5px;border-radius:50%;left:50%;transform:translateX(-50%)}.dp__marker_line{width:100%;left:0}.dp__marker_tooltip{position:absolute;border-radius:var(--dp-border-radius);background-color:var(--dp-tooltip-color);padding:5px;border:1px solid var(--dp-border-color);z-index:99999;box-sizing:border-box;cursor:default}.dp__tooltip_content{white-space:nowrap}.dp__tooltip_text{display:flex;align-items:center;flex-flow:row nowrap;color:var(--dp-text-color)}.dp__tooltip_mark{height:5px;width:5px;border-radius:50%;background-color:var(--dp-text-color);color:var(--dp-text-color);margin-inline-end:5px}.dp__arrow_bottom_tp{bottom:0;height:8px;width:8px;background-color:var(--dp-tooltip-color);position:absolute;border-inline-end:1px solid var(--dp-border-color);border-bottom:1px solid var(--dp-border-color);transform:translate(-50%, 50%) rotate(45deg)}.dp__instance_calendar{position:relative;width:100%}@media only screen and (width <= 600px){.dp__flex_display{flex-direction:column}}.dp--flex-display-collapsed{flex-direction:column}.dp__cell_highlight{background-color:var(--dp-highlight-color)}.dp__month_year_row{display:flex;align-items:center;height:var(--dp-month-year-row-height);color:var(--dp-text-color);box-sizing:border-box}.dp__inner_nav{display:flex;align-items:center;justify-content:center;cursor:pointer;height:var(--dp-month-year-row-button-size);width:var(--dp-month-year-row-button-size);color:var(--dp-icon-color);text-align:center;border-radius:50%}.dp__inner_nav svg{height:var(--dp-button-icon-height);width:var(--dp-button-icon-height)}.dp__inner_nav:hover{background:var(--dp-hover-color);color:var(--dp-hover-icon-color)}[dir=rtl] .dp__inner_nav{transform:rotate(180deg)}.dp__inner_nav_disabled:hover,.dp__inner_nav_disabled{background:var(--dp-disabled-color);color:var(--dp-disabled-color-text);cursor:not-allowed}.dp--year-select,.dp__month_year_select{text-align:center;cursor:pointer;height:var(--dp-month-year-row-height);display:flex;align-items:center;justify-content:center;border-radius:var(--dp-border-radius);box-sizing:border-box;color:var(--dp-text-color)}.dp--year-select:hover,.dp__month_year_select:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}.dp__month_year_select{width:50%}.dp--year-select{width:100%}.dp__month_year_wrap{display:flex;flex-direction:row;width:100%}.dp__year_disable_select{justify-content:space-around}.dp--header-wrap{display:flex;width:100%;flex-direction:column}.dp__overlay{width:100%;background:var(--dp-background-color);transition:opacity 1s ease-out;z-index:99999;font-family:var(--dp-font-family);color:var(--dp-text-color);box-sizing:border-box}.dp--overlay-absolute{position:absolute;height:100%;top:0;left:0}.dp--overlay-relative{position:relative}.dp__overlay_container::-webkit-scrollbar-track{box-shadow:var(--dp-scroll-bar-background);background-color:var(--dp-scroll-bar-background)}.dp__overlay_container::-webkit-scrollbar{width:5px;background-color:var(--dp-scroll-bar-background)}.dp__overlay_container::-webkit-scrollbar-thumb{background-color:var(--dp-scroll-bar-color);border-radius:10px}.dp__overlay:focus{border:none;outline:none}.dp__container_flex{display:flex}.dp__container_block{display:block}.dp__overlay_container{flex-direction:column;overflow-y:auto;height:var(--dp-overlay-height)}.dp__time_picker_overlay_container{height:100%}.dp__overlay_row{padding:0;box-sizing:border-box;display:flex;margin-inline:auto auto;flex-wrap:wrap;max-width:100%;width:100%;align-items:center}.dp__flex_row{flex:1}.dp__overlay_col{box-sizing:border-box;width:33%;padding:var(--dp-overlay-col-padding);white-space:nowrap}.dp__overlay_cell_pad{padding:var(--dp-common-padding) 0}.dp__overlay_cell_active{cursor:pointer;border-radius:var(--dp-border-radius);text-align:center;background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp__overlay_cell{cursor:pointer;border-radius:var(--dp-border-radius);text-align:center}.dp__overlay_cell:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}.dp__cell_in_between{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__over_action_scroll{right:5px;box-sizing:border-box}.dp__overlay_cell_disabled{cursor:not-allowed;background:var(--dp-disabled-color)}.dp__overlay_cell_disabled:hover{background:var(--dp-disabled-color)}.dp__overlay_cell_active_disabled{cursor:not-allowed;background:var(--dp-primary-disabled-color)}.dp__overlay_cell_active_disabled:hover{background:var(--dp-primary-disabled-color)}.dp__btn,.dp--qr-btn,.dp--time-invalid,.dp--time-overlay-btn{border:none;font:inherit;transition:var(--dp-common-transition);line-height:normal}.dp--year-mode-picker{display:flex;width:100%;align-items:center;justify-content:space-between;height:var(--dp-cell-size)}.dp--tp-wrap{max-width:var(--dp-menu-min-width)}.dp__time_input{width:100%;display:flex;align-items:center;justify-content:center;user-select:none;font-family:var(--dp-font-family);color:var(--dp-text-color)}.dp__time_col_reg_block{padding:0 20px}.dp__time_col_reg_inline{padding:0 10px}.dp__time_col_reg_with_button{padding:0 15px}.dp__time_col_sec{padding:0 10px}.dp__time_col_sec_with_button{padding:0 5px}.dp__time_col{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column}.dp__time_col_block{font-size:var(--dp-time-font-size)}.dp__time_display_block{padding:0 3px}.dp__time_display_inline{padding:5px}.dp__time_picker_inline_container{display:flex;width:100%;justify-content:center}.dp__inc_dec_button{padding:5px;margin:0;height:var(--dp-time-inc-dec-button-size);width:var(--dp-time-inc-dec-button-size);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;color:var(--dp-icon-color);box-sizing:border-box}.dp__inc_dec_button svg{height:var(--dp-time-inc-dec-button-size);width:var(--dp-time-inc-dec-button-size)}.dp__inc_dec_button:hover{background:var(--dp-hover-color);color:var(--dp-primary-color)}.dp__time_display{cursor:pointer;color:var(--dp-text-color);border-radius:var(--dp-border-radius);display:flex;align-items:center;justify-content:center}.dp__time_display:hover:enabled{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__inc_dec_button_inline{width:100%;padding:0;height:8px;cursor:pointer;display:flex;align-items:center}.dp__inc_dec_button_disabled,.dp__inc_dec_button_disabled:hover{background:var(--dp-disabled-color);color:var(--dp-disabled-color-text);cursor:not-allowed}.dp__pm_am_button{background:var(--dp-primary-color);color:var(--dp-primary-text-color);border:none;padding:var(--dp-common-padding);border-radius:var(--dp-border-radius);cursor:pointer}.dp__tp_inline_btn_bar{width:100%;height:4px;background-color:var(--dp-secondary-color);transition:var(--dp-common-transition);border-collapse:collapse}.dp__tp_inline_btn_top:hover .dp__tp_btn_in_r{background-color:var(--dp-primary-color);transform:rotate(12deg) scale(1.15) translateY(-2px)}.dp__tp_inline_btn_top:hover .dp__tp_btn_in_l{background-color:var(--dp-primary-color);transform:rotate(-12deg) scale(1.15) translateY(-2px)}.dp__tp_inline_btn_bottom:hover .dp__tp_btn_in_r{background-color:var(--dp-primary-color);transform:rotate(-12deg) scale(1.15) translateY(-2px)}.dp__tp_inline_btn_bottom:hover .dp__tp_btn_in_l{background-color:var(--dp-primary-color);transform:rotate(12deg) scale(1.15) translateY(-2px)}.dp--time-overlay-btn{background:none}.dp--time-invalid{background-color:var(--dp-disabled-color)}.dp__action_row{display:flex;align-items:center;width:100%;padding:var(--dp-action-row-padding);box-sizing:border-box;color:var(--dp-text-color);flex-flow:row nowrap}.dp__action_row svg{height:var(--dp-button-icon-height);width:auto}.dp__selection_preview{display:block;color:var(--dp-text-color);font-size:var(--dp-preview-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dp__action_buttons{display:flex;flex:0;white-space:nowrap;align-items:center;justify-content:flex-end;margin-inline-start:auto}.dp__action_button{display:inline-flex;align-items:center;background:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);padding:var(--dp-action-buttons-padding);line-height:var(--dp-action-button-height);margin-inline-start:3px;height:var(--dp-action-button-height);cursor:pointer;border-radius:var(--dp-border-radius);font-size:var(--dp-preview-font-size);font-family:var(--dp-font-family)}.dp__action_cancel{color:var(--dp-text-color);border:1px solid var(--dp-border-color)}.dp__action_cancel:hover{border-color:var(--dp-primary-color);transition:var(--dp-action-row-transtion)}.dp__action_buttons .dp__action_select{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp__action_buttons .dp__action_select:hover{background:var(--dp-primary-color);transition:var(--dp-action-row-transtion)}.dp__action_buttons .dp__action_select:disabled{background:var(--dp-primary-disabled-color);cursor:not-allowed}.dp-quarter-picker-wrap{display:flex;flex-direction:column;height:100%;min-width:var(--dp-menu-min-width)}.dp--qr-btn-disabled{cursor:not-allowed;background:var(--dp-disabled-color)}.dp--qr-btn-disabled:hover{background:var(--dp-disabled-color)}.dp--qr-btn{width:100%;padding:var(--dp-common-padding)}.dp--qr-btn:not(.dp--highlighted,.dp--qr-btn-active,.dp--qr-btn-disabled,.dp--qr-btn-between){background:none}.dp--qr-btn:hover:not(.dp--qr-btn-active,.dp--qr-btn-disabled){background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}.dp--quarter-items{display:flex;flex-direction:column;flex:1;width:100%;height:100%;justify-content:space-evenly}.dp--qr-btn-active{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp--qr-btn-between{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__btn,.dp--time-overlay-btn,.dp--time-invalid,.dp--qr-btn{border:none;font:inherit;transition:var(--dp-common-transition);line-height:normal}.dp--year-mode-picker{display:flex;width:100%;align-items:center;justify-content:space-between;height:var(--dp-cell-size)}:root{--dp-common-transition: all 0.1s ease-in;--dp-menu-padding: 6px 8px;--dp-animation-duration: 0.1s;--dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1);--dp-transition-timing: ease-out;--dp-action-row-transtion: all 0.2s ease-in;--dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;--dp-border-radius: 4px;--dp-cell-border-radius: 4px;--dp-transition-length: 22px;--dp-transition-timing-general: 0.1s;--dp-button-height: 35px;--dp-month-year-row-height: 35px;--dp-month-year-row-button-size: 25px;--dp-button-icon-height: 20px;--dp-calendar-wrap-padding: 0 5px;--dp-cell-size: 35px;--dp-cell-padding: 5px;--dp-common-padding: 10px;--dp-input-icon-padding: 35px;--dp-input-padding: 6px 30px 6px 12px;--dp-menu-min-width: 260px;--dp-action-buttons-padding: 1px 6px;--dp-row-margin: 5px 0;--dp-calendar-header-cell-padding: 0.5rem;--dp-multi-calendars-spacing: 10px;--dp-overlay-col-padding: 3px;--dp-time-inc-dec-button-size: 32px;--dp-font-size: 1rem;--dp-preview-font-size: 0.8rem;--dp-time-font-size: 2rem;--dp-action-button-height: 22px;--dp-action-row-padding: 8px}.dp__theme_dark{--dp-background-color: #212121;--dp-text-color: #fff;--dp-hover-color: #484848;--dp-hover-text-color: #fff;--dp-hover-icon-color: #959595;--dp-primary-color: #005cb2;--dp-primary-disabled-color: #61a8ea;--dp-primary-text-color: #fff;--dp-secondary-color: #a9a9a9;--dp-border-color: #2d2d2d;--dp-menu-border-color: #2d2d2d;--dp-border-color-hover: #aaaeb7;--dp-border-color-focus: #aaaeb7;--dp-disabled-color: #737373;--dp-disabled-color-text: #d0d0d0;--dp-scroll-bar-background: #212121;--dp-scroll-bar-color: #484848;--dp-success-color: #00701a;--dp-success-color-disabled: #428f59;--dp-icon-color: #959595;--dp-danger-color: #e53935;--dp-marker-color: #e53935;--dp-tooltip-color: #3e3e3e;--dp-highlight-color: rgb(0 92 178 / 20%);--dp-range-between-dates-background-color: var(--dp-hover-color, #484848);--dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);--dp-range-between-border-color: var(--dp-hover-color, #fff);--dp-loader: 5px solid #005cb2}.dp__theme_light{--dp-background-color: #fff;--dp-text-color: #212121;--dp-hover-color: #f3f3f3;--dp-hover-text-color: #212121;--dp-hover-icon-color: #959595;--dp-primary-color: #1976d2;--dp-primary-disabled-color: #6bacea;--dp-primary-text-color: #f8f5f5;--dp-secondary-color: #c0c4cc;--dp-border-color: #ddd;--dp-menu-border-color: #ddd;--dp-border-color-hover: #aaaeb7;--dp-border-color-focus: #aaaeb7;--dp-disabled-color: #f6f6f6;--dp-scroll-bar-background: #f3f3f3;--dp-scroll-bar-color: #959595;--dp-success-color: #76d275;--dp-success-color-disabled: #a3d9b1;--dp-icon-color: #959595;--dp-danger-color: #ff6f60;--dp-marker-color: #ff6f60;--dp-tooltip-color: #fafafa;--dp-disabled-color-text: #8e8e8e;--dp-highlight-color: rgb(25 118 210 / 10%);--dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);--dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);--dp-range-between-border-color: var(--dp-hover-color, #f3f3f3);--dp-loader: 5px solid #1976d2}.dp__flex{display:flex;align-items:center}.dp__btn{background:none}.dp__main{font-family:var(--dp-font-family);user-select:none;box-sizing:border-box;position:relative;width:100%}.dp__pointer{cursor:pointer}.dp__icon{stroke:currentcolor;fill:currentcolor}.dp__button{width:100%;text-align:center;color:var(--dp-icon-color);cursor:pointer;display:flex;align-items:center;place-content:center center;padding:var(--dp-common-padding);box-sizing:border-box;height:var(--dp-button-height)}.dp__button.dp__overlay_action{position:absolute;bottom:0}.dp__button:hover{background:var(--dp-hover-color);color:var(--dp-hover-icon-color)}.dp__button svg{height:var(--dp-button-icon-height);width:auto}.dp__button_bottom{border-bottom-left-radius:var(--dp-border-radius);border-bottom-right-radius:var(--dp-border-radius)}.dp__flex_display{display:flex}.dp__flex_display_with_input{flex-direction:column;align-items:flex-start}.dp__relative{position:relative}.calendar-next-enter-active,.calendar-next-leave-active,.calendar-prev-enter-active,.calendar-prev-leave-active{transition:all var(--dp-transition-timing-general) ease-out}.calendar-next-enter-from{opacity:0;transform:translateX(var(--dp-transition-length))}.calendar-next-leave-to{opacity:0;transform:translateX(calc(var(--dp-transition-length) * -1))}.calendar-prev-enter-from{opacity:0;transform:translateX(calc(var(--dp-transition-length) * -1))}.calendar-prev-leave-to{opacity:0;transform:translateX(var(--dp-transition-length))}.dp-menu-appear-bottom-enter-active,.dp-menu-appear-bottom-leave-active,.dp-menu-appear-top-enter-active,.dp-menu-appear-top-leave-active,.dp-slide-up-enter-active,.dp-slide-up-leave-active,.dp-slide-down-enter-active,.dp-slide-down-leave-active{transition:all var(--dp-animation-duration) var(--dp-transition-timing)}.dp-menu-appear-top-enter-from,.dp-menu-appear-top-leave-to,.dp-slide-down-leave-to,.dp-slide-up-enter-from{opacity:0;transform:translateY(var(--dp-transition-length))}.dp-menu-appear-bottom-enter-from,.dp-menu-appear-bottom-leave-to,.dp-slide-down-enter-from,.dp-slide-up-leave-to{opacity:0;transform:translateY(calc(var(--dp-transition-length) * -1))}.dp--arrow-btn-nav{transition:var(--dp-common-transition)}.dp--highlighted{background-color:var(--dp-highlight-color)}/*# sourceMappingURL=main.css.map */
@@ -2144,91 +2149,92 @@ svg.leaflet-image-layer.leaflet-interactive path {
2144
2149
  font-size: var(--label-font-size);
2145
2150
  }
2146
2151
 
2147
- .bagel-input textarea[data-v-8e712ba3] {
2152
+ .bagel-input textarea[data-v-5e9a753f] {
2148
2153
  min-height: unset;
2149
2154
  font-size: var(--input-font-size);
2150
2155
  }
2151
- .bagel-input.text-input textarea[data-v-8e712ba3] {
2156
+ .bagel-input.text-input textarea[data-v-5e9a753f] {
2152
2157
  resize: none;
2153
2158
  }
2154
- .code textarea[data-v-8e712ba3] {
2159
+ .code textarea[data-v-5e9a753f] {
2155
2160
  font-family: 'Inconsolata', monospace;
2156
2161
  background: var(--bgl-black) !important;
2157
2162
  color: var(--bgl-white) !important;
2158
2163
  }
2159
- .code textarea[data-v-8e712ba3]::placeholder {
2164
+ .code textarea[data-v-5e9a753f]::placeholder {
2160
2165
  color: var(--bgl-white) !important;
2161
2166
  opacity: 0.3;
2162
2167
  }
2163
- .bagel-input.small[data-v-8e712ba3] {
2168
+ .bagel-input.small[data-v-5e9a753f] {
2164
2169
  margin-bottom: 0;
2165
2170
  height: 30px;
2166
2171
  }
2167
- .bagel-input.dense label[data-v-8e712ba3] {
2172
+ .bagel-input.dense label[data-v-5e9a753f] {
2168
2173
  display: flex;
2169
2174
  align-items: center;
2170
2175
  gap: 0.5rem;
2171
2176
  }
2172
- .bagel-input input[data-v-8e712ba3]:disabled {
2177
+ .bagel-input input[data-v-5e9a753f]:disabled {
2173
2178
  background: #f5f5f5;
2174
2179
  }
2175
- .bagel-input label[data-v-8e712ba3] {
2180
+ .bagel-input label[data-v-5e9a753f] {
2176
2181
  font-size: var(--label-font-size);
2177
2182
  }
2178
- .textInputIconWrap[data-v-8e712ba3] {
2183
+ .textInputIconWrap[data-v-5e9a753f] {
2179
2184
  position: relative;
2180
2185
  }
2181
- .textInputIconWrap .bgl_icon-font[data-v-8e712ba3] {
2186
+ .textInputIconWrap .bgl_icon-font[data-v-5e9a753f] {
2182
2187
  position: absolute;
2183
2188
  inset-inline-end: 0.7rem;
2184
2189
  bottom: 50%;
2185
2190
  line-height: 0;
2186
2191
  color: var(--bgl-gray);
2187
2192
  }
2188
- .txtInputIconStart .iconStart[data-v-8e712ba3] {
2193
+ .txtInputIconStart .iconStart[data-v-5e9a753f] {
2189
2194
  position: absolute;
2190
2195
  inset-inline-start: 0.7rem;
2191
2196
  top: 50%;
2192
2197
  line-height: 0;
2193
2198
  color: var(--bgl-gray);
2194
2199
  }
2195
- .txtInputIconStart textarea[data-v-8e712ba3] {
2200
+ .txtInputIconStart textarea[data-v-5e9a753f] {
2196
2201
  padding-inline-start: 2rem;
2197
2202
  }
2198
- .bagel-input.small textarea[data-v-8e712ba3] {
2203
+ .bagel-input.small textarea[data-v-5e9a753f] {
2199
2204
  height: 30px;
2200
2205
  }
2201
2206
 
2202
- .primary-checkbox input[data-v-2f03e6ec] {
2203
- display: none;
2204
- }
2205
- .primary-checkbox[data-v-2f03e6ec] {
2206
- margin-top: 8px;
2207
- }
2208
- .primary-checkbox span[data-v-2f03e6ec] {
2207
+ .primary-checkbox input[data-v-0878583e] {
2208
+ appearance: none;
2209
+ accent-color: var(--bgl-primary);
2210
+ height: calc(var(--input-height) / 2.75);
2211
+ width: calc(var(--input-height) / 2.75);
2212
+ min-width: 0;
2209
2213
  display: flex;
2210
- padding-top: 1px;
2211
- align-items: center;
2212
2214
  justify-content: center;
2213
- color: var(--bgl-white);
2215
+ align-items: center;
2216
+ cursor: pointer;
2214
2217
  border-radius: 100%;
2215
- width: 26px;
2216
- height: 26px;
2217
2218
  background: var(--bgl-white);
2218
- border: 4px solid var(--bgl-gray-light);
2219
- cursor: pointer;
2219
+ border: 2px solid var(--input-bg);
2220
+ }
2221
+ .primary-checkbox[data-v-0878583e] {
2222
+ height:var(--input-height);
2223
+ width:var(--input-height);
2224
+ display: flex;
2225
+ justify-content: center;
2226
+ align-items: center;
2220
2227
  transition: var(--bgl-transition);
2221
- user-select: none;
2228
+ transform: scale(0.8);
2222
2229
  }
2223
- .primary-checkbox span[data-v-2f03e6ec]:hover {
2230
+ .primary-checkbox[data-v-0878583e]:hover {
2224
2231
  filter: brightness(90%);
2225
2232
  }
2226
- .primary-checkbox span[data-v-2f03e6ec]:active {
2233
+ .primary-checkbox[data-v-0878583e]:active {
2227
2234
  filter: brightness(80%);
2228
2235
  }
2229
- .primary-checkbox input:checked + span[data-v-2f03e6ec] {
2236
+ .primary-checkbox input[data-v-0878583e]:checked {
2230
2237
  background: var(--bgl-primary);
2231
- border: none;
2232
2238
  }
2233
2239
 
2234
2240
  .datetime-wrap {
@@ -2471,68 +2477,30 @@ img.preview.single[data-v-6716fd45] {
2471
2477
  color: var(--bgl-green);
2472
2478
  }
2473
2479
 
2474
- .bgl-checkbox[data-v-dbc06a4f] {
2475
- position: relative;
2476
- transition: var(--bgl-transition);
2477
- flex-direction: row !important;
2480
+ .bagel-input.bgl-toggle[data-v-06b95183]{
2481
+ display: unset !important;
2482
+ }
2483
+ .bagel-input.bgl-toggle[data-v-06b95183] *{
2484
+ cursor: pointer !important;
2478
2485
  }
2479
- .bagel-input.bgl-checkbox input[data-v-dbc06a4f]{
2480
- /* background: unset !important; */
2486
+ .bagel-input.bgl-toggle input[data-v-06b95183]{
2481
2487
  padding: unset !important;
2482
- /* border-radius: var(--input-border-radius); */
2483
- /* color: var(--input-color); */
2484
2488
  min-width: unset !important;
2485
- width: unset !important;
2486
- height: unset !important;
2487
- /* font-size:unset !important; */
2488
- }
2489
- .bgl-checkbox input[type=checkbox][data-v-dbc06a4f] {
2490
- appearance: none;
2491
- }
2492
- .bgl-checkbox label[data-v-dbc06a4f] {
2493
- padding-inline-start: calc(var(--input-height) - 1rem);
2494
- transition: var(--bgl-transition);
2495
- cursor: pointer;
2496
- user-select: none;
2497
- line-height: var(--input-height);
2498
2489
  }
2499
- .bgl-checkbox[data-v-dbc06a4f]:hover {
2500
- filter: brightness(90%);
2501
- }
2502
- .bgl-checkbox[data-v-dbc06a4f]:active {
2503
- filter: var(--bgl-active-filter);
2504
- }
2505
- .switch[data-v-dbc06a4f] {
2506
- position: absolute;
2507
- display: inline-block;
2508
- height: calc(var(--input-height) / 2);
2509
- width: calc(var(--input-height) - 2px);
2510
- border-radius: var(--input-height);
2511
- background: var(--bgl-gray);
2512
- outline: 1px solid var(--border-color);
2513
- margin-top: 0.15rem;
2514
- pointer-events: none;
2515
- }
2516
- .switch input[data-v-dbc06a4f] {
2517
- opacity: 0;
2518
- width: 0;
2519
- height: 0;
2520
- }
2521
- .slider[data-v-dbc06a4f] {
2522
- position: absolute;
2523
- cursor: pointer;
2524
- top: 0;
2525
- left: 0;
2526
- right: 0;
2527
- bottom: 0;
2528
- background: var(--input-bg);
2529
- -webkit-transition: 0.2s;
2530
- transition: 0.2s;
2531
- border-radius: calc(var(--input-height) / 2);
2532
- box-shadow: inset 0 0 10px #00000020;
2533
- background: var(--input-bg);
2490
+ .bgl-toggle input[data-v-06b95183] {
2491
+ appearance: none;
2492
+ position: relative;
2493
+ display: inline-block;
2494
+ background: var(--input-bg);
2495
+ height: calc(var(--input-height) / 2);
2496
+ width: calc(var(--input-height) - 2px);
2497
+ vertical-align: middle;
2498
+ border-radius: 2rem;
2499
+ box-shadow: 0px 1px 3px #0003 inset;
2500
+ transition: 0.25s linear all;
2501
+ outline: 1px solid var(--border-color);
2534
2502
  }
2535
- .slider[data-v-dbc06a4f]:before {
2503
+ .bgl-toggle input[data-v-06b95183]::before {
2536
2504
  position: absolute;
2537
2505
  content: "";
2538
2506
  height: calc(var(--input-height) / 2 - 2px);
@@ -2545,12 +2513,40 @@ img.preview.single[data-v-6716fd45] {
2545
2513
  transition: 0.2s;
2546
2514
  box-shadow:0 1px 5px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
2547
2515
  }
2548
- .checked .slider[data-v-dbc06a4f] {
2516
+ .bgl-toggle label[data-v-06b95183] {
2517
+ padding-inline-start: 0.5rem;
2518
+ transition: var(--bgl-transition);
2519
+ cursor: pointer;
2520
+ user-select: none;
2521
+ line-height: var(--input-height);
2522
+ font-size: var(--input-font-size);
2523
+ }
2524
+ .bgl-toggle label[data-v-06b95183]:hover {
2525
+ filter: brightness(90%);
2526
+ }
2527
+ .bgl-toggle label[data-v-06b95183]:active {
2528
+ filter: var(--bgl-active-filter);
2529
+ }
2530
+ .bgl-toggle input[data-v-06b95183]:focus-visible {
2531
+ outline: -webkit-focus-ring-color auto 1px;
2532
+ outline-offset: 2px
2533
+ }
2534
+ .bgl-toggle input[data-v-06b95183]:focus {
2535
+ outline-color: transparent;
2536
+ }
2537
+ .bgl-toggle input[data-v-06b95183]:focus-visible {
2538
+ outline: -webkit-focus-ring-color auto 1px;
2539
+ outline-offset: 2px
2540
+ }
2541
+ .bgl-toggle[data-v-06b95183] :checked{
2549
2542
  background: var(--bgl-primary);
2550
2543
  }
2551
- .checked .slider[data-v-dbc06a4f]:before {
2544
+ .bgl-toggle[data-v-06b95183] :checked::before{
2552
2545
  margin-inline-start:calc(var(--input-height) / 2 - 2px) ;
2553
2546
  }
2547
+ .bgl-toggle input:checked + label[data-v-06b95183] {
2548
+ color: var(--bgl-primary) !important;
2549
+ }
2554
2550
 
2555
2551
  /* Basic editor styles */
2556
2552
  .tiptap > * + * {
@@ -7000,13 +6996,22 @@ select {
7000
6996
  min-width: calc(var(--input-height) * 3);
7001
6997
  width: 100%;
7002
6998
  }
7003
- .input.active,
6999
+ .input.active
7004
7000
  .bagel-input input:focus-visible,
7005
7001
  .bagel-input select:focus-visible,
7006
- .bagel-input textarea:focus-visible {
7007
- outline-color: transparent;
7002
+ .bagel-input textarea:focus-visible,
7003
+ .bagel-input button:focus-visible,
7004
+ .bgl_btn:focus-visible {
7005
+ outline-color: var(--bgl-primary-tint);
7008
7006
  box-shadow: inset 0 0 10px #00000012;
7009
7007
  }
7008
+ .bagel-input input:focus,
7009
+ .bagel-input select:focus,
7010
+ .bagel-input textarea:focus,
7011
+ .bagel-input .bgl_btn:focus,
7012
+ .bagel-input button:focus {
7013
+ outline-color: rgba(0, 0, 0, 0.05);
7014
+ }
7010
7015
  .bagel-input.light-input input,
7011
7016
  .bagel-input.light-input textarea,
7012
7017
  .bagel-input.light-input select,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.612",
4
+ "version": "0.0.614",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
@@ -53,7 +53,7 @@
53
53
  "devDependencies": {
54
54
  "@types/leaflet": "^1.9.12",
55
55
  "@types/signature_pad": "^2.3.6",
56
- "@vue-macros/reactivity-transform": "^0.4.7",
56
+ "@vue-macros/reactivity-transform": "^1.0.0",
57
57
  "vue": "^3.4.33"
58
58
  },
59
59
  "peerDependencies": {
@@ -124,7 +124,10 @@ data {
124
124
  .data-row .bagel-input,
125
125
  .data-row .bagel-input input {
126
126
  min-width: 140px !important;
127
- /* margin-top: 0.5rem !important; */
128
127
  height: calc(var(--input-height) - 0.25rem) !important;
129
128
  }
129
+
130
+ .data-row .bagel-input.bgl-toggle input {
131
+ height:20px !important;
132
+ }
130
133
  </style>
@@ -50,6 +50,9 @@ onMounted(() => {
50
50
  height: calc(var(--input-height) / 2.75);
51
51
  width: calc(var(--input-height) / 2.75);
52
52
  min-width: 0;
53
+ display: flex;
54
+ justify-content: center;
55
+ align-items: center;
53
56
  }
54
57
  .bgl-checkbox input[type='checkbox']::before {
55
58
  content: '';
@@ -1,6 +1,4 @@
1
1
  <script setup lang="ts">
2
- import { MaterialIcon } from '@bagelink/vue'
3
-
4
2
  const val = defineModel('modelValue', {
5
3
  type: Boolean,
6
4
  default: false,
@@ -10,47 +8,44 @@ const val = defineModel('modelValue', {
10
8
  <template>
11
9
  <label class="primary-checkbox">
12
10
  <input v-model="val" type="checkbox">
13
- <span>
14
- <MaterialIcon icon="check" />
15
- </span>
16
11
  </label>
17
12
  </template>
18
13
 
19
14
  <style scoped>
20
15
  .primary-checkbox input {
21
- display: none;
16
+ appearance: none;
17
+ accent-color: var(--bgl-primary);
18
+ height: calc(var(--input-height) / 2.75);
19
+ width: calc(var(--input-height) / 2.75);
20
+ min-width: 0;
21
+ display: flex;
22
+ justify-content: center;
23
+ align-items: center;
24
+ cursor: pointer;
25
+ border-radius: 100%;
26
+ background: var(--bgl-white);
27
+ border: 2px solid var(--input-bg);
22
28
  }
23
29
 
24
30
  .primary-checkbox {
25
- margin-top: 8px;
26
- }
27
-
28
- .primary-checkbox span {
31
+ height:var(--input-height);
32
+ width:var(--input-height);
29
33
  display: flex;
30
- padding-top: 1px;
31
- align-items: center;
32
34
  justify-content: center;
33
- color: var(--bgl-white);
34
- border-radius: 100%;
35
- width: 26px;
36
- height: 26px;
37
- background: var(--bgl-white);
38
- border: 4px solid var(--bgl-gray-light);
39
- cursor: pointer;
35
+ align-items: center;
40
36
  transition: var(--bgl-transition);
41
- user-select: none;
37
+ transform: scale(0.8);
42
38
  }
43
39
 
44
- .primary-checkbox span:hover {
40
+ .primary-checkbox:hover {
45
41
  filter: brightness(90%);
46
42
  }
47
43
 
48
- .primary-checkbox span:active {
44
+ .primary-checkbox:active {
49
45
  filter: brightness(80%);
50
46
  }
51
47
 
52
- .primary-checkbox input:checked + span {
48
+ .primary-checkbox input:checked {
53
49
  background: var(--bgl-primary);
54
- border: none;
55
50
  }
56
51
  </style>
@@ -99,8 +99,8 @@ onMounted(() => {
99
99
  :disabled
100
100
  :required="required"
101
101
  :pattern="pattern"
102
- @focusout="onFocusout"
103
102
  v-bind="nativeInputAttrs"
103
+ @focusout="onFocusout"
104
104
  @input="updateInputVal"
105
105
  >
106
106
  <textarea