remove inbox element and style slotted directly

Author: javadbat

README.md

@@ -326,17 +326,11 @@ if you want to change opened date picker style please read [jb-calendar](https:/
 ## add custom element in input box
 
 in jb-input you can put icon or any other custom html DOM in input box. to doing so you just have to place custom DOM in `jb-date-input` tag and add `slot="start-section"` or `slot="end-section"` to place it before or after input field.
-for better result i suggest you use `jb-date-input-inbox-element` tag but its optional and you can use your own custom tag too.
-`jb-input-inbox-element` will add some style to make sure your icon will place in center and will not overflow nad make your job easier if you want more controll you can skip it and use your own tag.
 example:
 
 ```HTML
 <jb-date-input>
-    <jb-date-input-inbox-element slot="end-section">
-        <div>after</div>
-    </jb-date-input-inbox-element>
-    <jb-date-input-inbox-element slot="start-section">
-        <div>before</div>
-    </jb-date-input-inbox-element>
+    <div slot="end-section">after</div>
+    <div slot="start-section">before</div>
 </jb-date-input>
 ```

lib/inbox-element/inbox-element.html

@@ -95,6 +95,18 @@
                 }
             }
         }
+        ::slotted([slot="start-section"]), ::slotted([slot="end-section"]){
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            max-height: 100%;
+            overflow-y: hidden;
+            background-color: transparent;
+            padding: 8px 16px;
+            width: auto;
+            box-sizing: border-box;
+        }
     }
 
     .message-box {

lib/inbox-element/inbox-element.scss

@@ -4,9 +4,6 @@ import 'jb-calendar';
 // eslint-disable-next-line no-duplicate-imports
 import { JBCalendarWebComponent } from 'jb-calendar';
 
-import './inbox-element/inbox-element';
-// eslint-disable-next-line no-duplicate-imports
-import {JBDDateInputInboxElementWebComponent} from './inbox-element/inbox-element';
 //import cloneDeep from 'lodash.clonedeep';
 
 import { InputTypes, ValueTypes, ElementsObject, DateRestrictions, JBDateInputValueObject, ValueType, InputType, ValidationValue, JBCalendarValue } from './types';
@@ -17,7 +14,7 @@ import { ValidationHelper } from '../../../common/scripts/validation/validation-
 import { ValidationItem, WithValidation } from '../../../common/scripts/validation/validation-helper-types';
 import { requiredValidation } from './validations';
 
-export {ValidationItem,InputTypes as JBDateInputInputTypes,ValueTypes, JBDateInputValueObject,JBDDateInputInboxElementWebComponent};
+export {ValidationItem,InputTypes as JBDateInputInputTypes,ValueTypes, JBDateInputValueObject};
 
 if(HTMLElement== undefined){
   //in case of server render or old browser