fix(core/drawer|inputgroup): fixed drawer display issue

packages/core/src/components/drawer/drawer.scss

@@ -20,17 +20,19 @@
   visibility: hidden;
 
   display: flex;
-  position: absolute;
+  position: fixed;
   flex-flow: column nowrap;
   justify-content: flex-start;
   align-items: center;
+  transform: translateX(16rem);
+  opacity: 0;
 
   max-height: 100vh;
   min-height: $large-space;
   background-color: var(--theme-color-1);
   border-radius: $default-border-radius;
 
-  transition: all var(--theme-medium-time) ease-out;
+  transition: transform var(--theme-medium-time) ease-out;
 
   .toggle {
     z-index: 100;

packages/core/src/components/drawer/drawer.tsx

@@ -70,7 +70,8 @@ export class Drawer {
   private divElement?: HTMLElement;
 
   @Watch('show')
-  onShowChanged(newValue: boolean) {
+  onShowChanged(newValue: boolean, oldValue?:boolean) {
+    if(newValue === !!oldValue) return;
     this.show = newValue !== undefined ? newValue : !this.show;
     this.toggleDrawer(this.show);
   }
@@ -127,9 +128,6 @@ export class Drawer {
       translateX: [0, '16rem'],
       opacity: [1, 0],
       easing: 'easeInSine',
-      complete: () => {
-        el.classList.add('d-none');
-      },
     });
   }
 
@@ -140,9 +138,6 @@ export class Drawer {
       translateX: ['16rem', 0],
       opacity: [0, 1],
       easing: 'easeOutSine',
-      begin: () => {
-        el.classList.remove('d-none');
-      },
     });
   }
 
@@ -157,7 +152,7 @@ export class Drawer {
           'drawer-container': true,
           toggle: this.show,
           'full-height': this.fullHeight,
-          'd-none': true,
+
         }}
         style={{
           width: this.width === 'auto' ? this.width : `${this.width}rem`,

packages/core/src/components/input-group/input-group.tsx

@@ -22,6 +22,9 @@ export class InputGroup {
 
   @State() inputPaddingLeft = 0;
   @State() inputPaddingRight = 0;
+
+  startSlotRef: HTMLElement;
+  endSlotRef: HTMLElement;
 
   private get inputElement() {
     return this.hostElement.querySelector('input') as HTMLInputElement;
@@ -61,6 +64,7 @@ export class InputGroup {
     });
   }
 
+
   componentDidRender() {
     this.prepareInputElement();
   }
@@ -100,12 +104,7 @@ export class InputGroup {
   }
 
   private startSlotChanged() {
-    const slot = this.hostElement.shadowRoot.querySelector(
-      'slot[name="input-start"]'
-    );
-
-    setTimeout(() => {
-      const startPadding = this.getChildrenWidth(slot);
+      const startPadding = this.getChildrenWidth(this.startSlotRef);
 
       if (startPadding !== 0) {
         this.inputPaddingLeft = 11 + startPadding;
@@ -130,20 +129,16 @@ export class InputGroup {
         this.inputElement.style.backgroundPosition = `left ${left}px center`;
         this.inputPaddingLeft += 26;
       }
-    });
+
   }
 
   private endSlotChanged() {
-    const slot = this.hostElement.shadowRoot.querySelector(
-      'slot[name="input-end"]'
-    );
+      this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);
 
-    setTimeout(() => {
-      this.inputPaddingRight = 15 + this.getChildrenWidth(slot);
-    });
   }
 
   private getChildrenWidth(slotElement: Element) {
+
     if (!slotElement) {
       return 0;
     }
@@ -166,11 +161,11 @@ export class InputGroup {
     return (
       <Host class={{ disabled: this.disabled }}>
         <div class="group group-start">
-          <slot name="input-start"></slot>
+          <slot ref={(el:HTMLElement)=> this.startSlotRef =  el} name="input-start"></slot>
         </div>
         <slot></slot>
         <div class="group group-end">
-          <slot name="input-end"></slot>
+          <slot ref={(el:HTMLElement)=> this.endSlotRef =  el} name="input-end"></slot>
         </div>
       </Host>
     );