@inizioevoke/astro-core 1.7.0 → 2.0.1

package/src/components/ScrollContainer/ScrollContainer.astro

@@ -1,51 +1,55 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
+import type { Scrolling } from './ScrollContainer';
 import './ScrollContainer.css';
 
 export interface Props extends HTMLAttributes<'div'> { 
-  outerWidth?: string | number;
-  innerWidth?: string | number;
+  width?: string | number;
   height?: string | number;
-  vertical?: boolean;
-  horizontal?: boolean;
+  scrolling?: Scrolling;
 }
 
 const {
-  outerWidth,
-  innerWidth,
+  width,
   height,
-  vertical = true,
-  horizontal = false,
+  scrolling = 'vertical',
   ...rest
 } = Astro.props;
 
-const containerAttrs = {...rest};
-const cssClass = containerAttrs['class'] ?? '';
-['class'].forEach((a) => {
-  delete containerAttrs[a as keyof typeof containerAttrs];
-});
+const containerAttrs = {...rest, 'data-scrolling': scrolling};
+const cssClassList = ['evo-scroll-container', containerAttrs['class']];
+delete containerAttrs['class'];
+
+switch (scrolling) {
+  case 'horizontal':
+    cssClassList.push('evo-scroll-horz');
+    break;
+  case 'vertical':
+    cssClassList.push('evo-scroll-vert')
+    break;
+  default:
+    cssClassList.push('evo-scroll-both')
+    break;
+}
 
 containerAttrs.style = typeof containerAttrs.style == 'string' ? `${containerAttrs.style}${containerAttrs.style.endsWith(';') ? '' : ';'}` : '';
-if (outerWidth) {
-  containerAttrs.style = `${containerAttrs.style}width:${typeof outerWidth == 'number' || /^\d+$/.test(outerWidth) ? `${outerWidth}px` : outerWidth};`;
+if (width) {
+  containerAttrs.style = `${containerAttrs.style}width:${typeof width == 'number' || /^\d+$/.test(width) ? `${width}px` : width};`;
 }
 if (height) {
   containerAttrs.style = `${containerAttrs.style}height:${typeof height == 'number' || /^\d+$/.test(height) ? `${height}px` : height};`;
 }
-
-const contentAttrs: Record<string, string> = {};
-if (innerWidth) {
-  contentAttrs.style = `width:${typeof innerWidth == 'number' || /^\d+$/.test(innerWidth) ? `${innerWidth}px` : innerWidth};`
-}
 ---
-<evo-scroll-container class:list={['evo-scroll-container', cssClass]} {...containerAttrs}>
-  <div class="evo-scroll-content" {...contentAttrs}>
+<evo-scroll-container class:list={cssClassList} {...containerAttrs}>
+  <div class="evo-scroll-content">
     <slot />
   </div>
-  {vertical && <div class="evo-scroll-track evo-scroll-track-y">
+  {scrolling !== 'horizontal' && 
+  <div class="evo-scroll-track evo-scroll-track-vert">
     <div class="evo-scroll-thumb"></div>
   </div>}
-  {horizontal && <div class="evo-scroll-track evo-scroll-track-x">
+  {scrolling !== 'vertical' && 
+  <div class="evo-scroll-track evo-scroll-track-horz">
     <div class="evo-scroll-thumb"></div>
   </div>}
 </evo-scroll-container>

package/src/components/ScrollContainer/ScrollContainer.css

@@ -1,68 +1,113 @@
 @layer inizioevoke-astro-components {
   :root {
-    --evo-scroll-container-border-radius: 4px;
     --evo-scroll-container-track-width: 8px;
-    --evo-scroll-container-track-top: 0px;
-    --evo-scroll-container-track-bottom: 0px;
-    --evo-scroll-container-track-right: 0px;
+    --evo-scroll-container-width-offset: var(--evo-scroll-container-track-width);
+    --evo-scroll-container-height-offset: var(--evo-scroll-container-track-width);
+    --evo-scroll-container-border-radius: calc(var(--evo-scroll-container-track-width) / 2);
+    --evo-scroll-container-track-vert-top: 0px;
+    --evo-scroll-container-track-vert-bottom: 0px;
+    --evo-scroll-container-track-vert-right: 0px;
+    --evo-scroll-container-track-horz-bottom: 0px;
+    --evo-scroll-container-track-horz-left: 0px;
+    --evo-scroll-container-track-horz-right: 0px;
+    /* --evo-scroll-container-track-padding: calc(1rem + var(--evo-scroll-container-track-width)); */
     --evo-scroll-container-track-color: #dddddd;
     --evo-scroll-container-thumb-color: #666666;
     --evo-scroll-container-thumb-border-width: 0px;
     --evo-scroll-container-thumb-border-color: var(--evo-scroll-container-track-color);
-    --evo-scroll-container-content-padding-right: calc(1rem + var(--evo-scroll-container-track-width));
   }
 
   evo-scroll-container,
   .evo-scroll-container {
+    --evo-scroll-container-scrollbar-offset: 0px;
     position: relative;
     display: block;
     width: 100%;
     height: 100%;
     overflow: hidden;
     box-sizing: border-box;
+
+    &.evo-scroll-both {
+      --evo-scroll-container-scrollbar-offset: var(--evo-scroll-container-track-width);
+    }
     
     * { 
       box-sizing: border-box;
     }
 
     .evo-scroll-content {
-      height: 100%;
-      overflow-y: scroll;
-      padding-right: var(--evo-scroll-container-content-padding-right);
       -ms-overflow-style: none;
       scrollbar-width: none;
+      overflow: hidden;
+      width: 90%;
       &::-webkit-scrollbar {
         display: none;
       }
-
-      *:first-child {
-        margin-top: 0 !important;
-      }
-      *:last-child {
-        margin-bottom: 0 !important;
-      }
     }
 
     .evo-scroll-track {
       position: absolute;
-      top: var(--evo-scroll-container-track-top);
-      right: var(--evo-scroll-container-track-right);
-      width: var(--evo-scroll-container-track-width);
-      height: calc(100% - var(--evo-scroll-container-track-top) - var(--evo-scroll-container-track-bottom));
       background: var(--evo-scroll-container-track-color);
       border-radius: var(--evo-scroll-container-border-radius);
 
       .evo-scroll-thumb {
         box-sizing: border-box;
         position: absolute;
-        width: 100%;
         background-color: var(--evo-scroll-container-thumb-color);
         border: var(--evo-scroll-container-thumb-border-width) solid var(--evo-scroll-container-thumb-border-color);
         border-radius: var(--evo-scroll-container-border-radius);
-        height: 50px;
         cursor: grab;
         font-size: 0;
       }
+
+      &.evo-scroll-track-vert {
+        top: var(--evo-scroll-container-track-vert-top);
+        right: var(--evo-scroll-container-track-vert-right);
+        width: var(--evo-scroll-container-track-width);
+        height: calc(100% - var(--evo-scroll-container-track-vert-top) - var(--evo-scroll-container-track-vert-bottom) - var(--evo-scroll-container-scrollbar-offset));
+
+        .evo-scroll-thumb {
+          width: 100%;
+          height: 50px;
+        }
+      }
+      &.evo-scroll-track-horz {
+        left: var(--evo-scroll-container-track-horz-left);
+        bottom: var(--evo-scroll-container-track-horz-bottom);
+        width: calc(100% - var(--evo-scroll-container-track-horz-left) - var(--evo-scroll-container-track-horz-right) - var(--evo-scroll-container-scrollbar-offset));
+        height: var(--evo-scroll-container-track-width);
+
+        .evo-scroll-thumb {
+          width: 50px;
+          height: 100%;
+        }
+      }
+    }
+
+    &.evo-scroll-horz,
+    &.evo-scroll-both {
+      .evo-scroll-content {
+        height: calc(100% - var(--evo-scroll-container-track-width) - var(--evo-scroll-container-track-horz-bottom) - var(--evo-scroll-container-height-offset));
+        overflow-x: scroll;
+      }
+    }
+    &.evo-scroll-horz {
+      .evo-scroll-content {
+        width: 100%;
+      }
+    }
+
+    &.evo-scroll-vert,
+    &.evo-scroll-both {
+      .evo-scroll-content {
+        width: calc(100% - var(--evo-scroll-container-track-width) - var(--evo-scroll-container-track-vert-right) - var(--evo-scroll-container-width-offset));
+        overflow-y: scroll;
+      }
+    }
+    &.evo-scroll-vert {
+      .evo-scroll-content {
+        height: 100%;
+      }
     }
   }
 }

package/src/components/ScrollContainer/ScrollContainer.ts

@@ -24,22 +24,49 @@ const mutationObserver = new MutationObserver((mutations) => {
   });
 });
 
+export type Scrolling = 'horizontal' | 'vertical' | 'both';
 
-export class EvoScrollContainerElement extends HTMLElement {
+export interface IEvoScrollContainerElement {
+  content: HTMLElement;
+  scrollLeft: number;
+  scrollTop: number;
+  scrollWidth: number;
+  scrollHeight: number;
+  configureScrollbar: (settings: ScrollbarSettings) => void;
+  getScroll: () => { left: number, top: number };
+  resize: (opts: { height?: number }) => void;
+  resetScrollbar: () => void;
+  refresh: () => void;
+  scroll(opts?: ScrollToOptions): void;
+  scroll(x: number, y: number): void;
+  scrollTo(opts?: ScrollToOptions): void;
+  scrollTo(x: number, y: number): void;
+  scrollBy(opts?: ScrollToOptions): void;
+  scrollBy(x: number, y: number): void;
+}
+export class EvoScrollContainerElement extends HTMLElement implements IEvoScrollContainerElement {
   static get htmlTagName() {
     return 'evo-scroll-container';
   }
 
   #content!: HTMLElement;
-  #track!: HTMLElement;
-  #thumb!: HTMLElement;
-  #isDragging: boolean = false;
+  #trackHorz: HTMLElement | null = null;
+  #thumbHorz: HTMLElement | null = null;
+  #trackVert: HTMLElement | null = null;
+  #thumbVert: HTMLElement | null = null;
+  #isDraggingVert: boolean = false;
   #startY: number = 0;
   #startScrollTop: number = 0;
-  
+  #isDraggingHorz: boolean = false;
+  #startX: number = 0;
+  #startScrollLeft: number = 0;
+  #scrolling: Scrolling = 'vertical';
+
   #scrollbarSettings: ScrollbarSettings = {};
-  #mouseupHandler: any = undefined;
-  #mousemoveHandler: any = undefined;
+  #mouseupHandlerVert: any = undefined;
+  #mousemoveHandlerVert: any = undefined;
+  #mouseupHandlerHorz: any = undefined;
+  #mousemoveHandlerHorz: any = undefined;
   #boundResizeHandler: () => void;
 
   constructor() {
@@ -49,24 +76,36 @@ export class EvoScrollContainerElement extends HTMLElement {
 
   connectedCallback() {
     this.#content = this.querySelector('.evo-scroll-content') as HTMLElement;
-    this.#track = this.querySelector('.evo-scroll-track') as HTMLElement;
-    this.#thumb = this.querySelector('.evo-scroll-thumb') as HTMLElement;
-    this.#isDragging = false;
+    this.#trackHorz = this.querySelector<HTMLElement>('.evo-scroll-track-horz');
+    this.#thumbHorz = this.querySelector<HTMLElement>('.evo-scroll-track-horz .evo-scroll-thumb');
+    this.#trackVert = this.querySelector<HTMLElement>('.evo-scroll-track-vert');
+    this.#thumbVert = this.querySelector<HTMLElement>('.evo-scroll-track-vert .evo-scroll-thumb');
+    this.#isDraggingVert = false;
     this.#startY = 0;
     this.#startScrollTop = 0;
 
-    this.#thumb.addEventListener('mousedown', this.#thumbMouseDown.bind(this), { passive: true });
+    this.#thumbVert?.addEventListener('mousedown', this.#thumbMouseDownVert.bind(this));
+    this.#thumbHorz?.addEventListener('mousedown', this.#thumbMouseDownHorz.bind(this));
     this.#content.addEventListener('scroll', this.#scrollContent.bind(this), { passive: true });
+    this.#scrolling = (this.dataset.scrolling as Scrolling) ?? 'vertical';
 
     intersectionObserver.observe(this);
     mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
 
     window.addEventListener('resize', this.#boundResizeHandler, { passive: true });
+    if (this.#scrolling === 'horizontal') {
+      this.addEventListener('wheel', this.#wheelHorz, { passive: true });
+    }
   }
 
   disconnectedCallback() {
     intersectionObserver.unobserve(this);
-    window.removeEventListener('resize', this.#boundResizeHandler);
+    window.removeEventListener('resize', this.#boundResizeHandler); 
+    this.removeEventListener('wheel', this.#wheelHorz);
+  }
+
+  get content() {
+    return this.#content;
   }
 
   scroll(opts?: ScrollToOptions): void;
@@ -132,79 +171,138 @@ export class EvoScrollContainerElement extends HTMLElement {
   }
 
   #updateThumbSize() {
-    const scrollHeight = this.#content.scrollHeight - getPaddingY(this.#content);
-    const containerHeight = this.clientHeight - getPaddingY(this);
-    
-    if (scrollHeight <= 0) {
-      this.#thumb.style.height = '20px';
-      // this.#track.style.display = 'none';
-      return;
-    }
-    
-    const visibleRatio = containerHeight / scrollHeight;
-    const thumbHeight = visibleRatio * containerHeight;
-    if (this.#scrollbarSettings.thumbHeight != undefined) {
-      this.#thumb.style.height = `${this.#scrollbarSettings.thumbHeight < 0 ? 0 : this.#scrollbarSettings.thumbHeight > containerHeight ? containerHeight : this.#scrollbarSettings.thumbHeight}px`;
-    } else {
-      this.#thumb.style.height = `${thumbHeight > 20 ? thumbHeight : 20}px`;
+    if (this.#thumbVert && this.#trackVert) {
+      const scrollHeight = this.#content.scrollHeight - getPaddingY(this.#content);
+      const containerHeight = this.clientHeight - getPaddingY(this);
+      const trackHeight = this.#trackVert.clientHeight;
+
+      const visibleRatioVert = containerHeight / scrollHeight;
+      const thumbHeight = visibleRatioVert * trackHeight;
+      if (this.#scrollbarSettings.thumbHeight != undefined) {
+        this.#thumbVert.style.height = `${Math.max(0, Math.min(this.#scrollbarSettings.thumbHeight, trackHeight))}px`;
+      } else {
+        this.#thumbVert.style.height = `${Math.min(thumbHeight > 20 ? thumbHeight : 20, trackHeight)}px`;
+      }
+      if (this.#scrollbarSettings.trackVisible !== undefined) {
+        this.#trackVert.style.display = this.#scrollbarSettings.trackVisible === true ? 'block' : 'none';
+      } else {
+        this.#trackVert.style.display = visibleRatioVert < 1 ? 'block' : 'none';
+      }
     }
-    if (this.#scrollbarSettings.trackVisible !== undefined) {
-      this.#track.style.display = this.#scrollbarSettings.trackVisible === true ? 'block' : 'none';
-    } else {
-      this.#track.style.display = visibleRatio < 1 ? 'block' : 'none';
+
+    if (this.#thumbHorz && this.#trackHorz) {
+      const scrollWidth = this.#content.scrollWidth - getPaddingX(this.#content);
+      const containerWidth = this.clientWidth - getPaddingX(this);
+      const trackWidth = this.#trackHorz.clientWidth;
+
+      const visibleRatioHorz = containerWidth / scrollWidth;
+      const thumbWidth = visibleRatioHorz * trackWidth;
+      this.#thumbHorz.style.width = `${Math.min(thumbWidth > 20 ? thumbWidth : 20, trackWidth)}px`;
+      if (this.#scrollbarSettings.trackVisible !== undefined) {
+        this.#trackHorz.style.display = this.#scrollbarSettings.trackVisible === true ? 'block' : 'none';
+      } else {
+        this.#trackHorz.style.display = visibleRatioHorz < 1 ? 'block' : 'none';
+      }
     }
-    
   }
 
-  #thumbMouseDown(e: MouseEvent) {
-    this.#mouseupHandler = this.#mouseDetach.bind(this);
-    this.#mousemoveHandler = this.#thumbMouseMove.bind(this);
-    document.addEventListener('mouseup', this.#mouseupHandler, { passive: true });
-    document.addEventListener('dragend', this.#mouseupHandler, { passive: true });
-    document.addEventListener('mousemove', this.#mousemoveHandler, { passive: true });
-    this.#isDragging = true;
+  #thumbMouseDownVert(e: MouseEvent) {
+    e.preventDefault();
+    this.#mouseupHandlerVert = this.#mouseDetachVert.bind(this);
+    this.#mousemoveHandlerVert = this.#thumbMouseMoveVert.bind(this);
+    document.addEventListener('mouseup', this.#mouseupHandlerVert, { passive: true });
+    document.addEventListener('dragend', this.#mouseupHandlerVert, { passive: true });
+    document.addEventListener('mousemove', this.#mousemoveHandlerVert, { passive: true });
+    this.#isDraggingVert = true;
     this.#startY = e.clientY;
     this.#startScrollTop = this.#content.scrollTop;
-    this.#thumb.style.cursor = 'grabbing';
+    this.#thumbVert!.style.cursor = 'grabbing';
   }
 
-  #thumbMouseMove(e: MouseEvent) {
-    if (this.#isDragging) {
+  #thumbMouseMoveVert(e: MouseEvent) {
+    if (this.#isDraggingVert) {
       const deltaY = e.clientY - this.#startY;
-      const thumbTrackHeight = this.clientHeight - this.#thumb.clientHeight;
-      
-      if (thumbTrackHeight <= 0) {
-        return;
-      }
-      
-      const scrollRatio =
-        (this.#content.scrollHeight - this.clientHeight) / thumbTrackHeight;
-      
+      const thumbTrackHeight = this.clientHeight - this.#thumbVert!.clientHeight;
+      if (thumbTrackHeight <= 0) return;
+      const scrollRatio = (this.#content.scrollHeight - this.clientHeight) / thumbTrackHeight;
       this.#content.scrollTop = this.#startScrollTop + deltaY * scrollRatio;
     } else {
-      this.#mouseDetach();
+      this.#mouseDetachVert();
     }
   }
 
-  #mouseDetach() {
-    this.#isDragging = false;
-    this.#thumb.style.cursor = 'grab';
-    document.removeEventListener('mouseup', this.#mouseupHandler);
-    document.removeEventListener('dragend', this.#mouseupHandler);
-    document.removeEventListener('mousemove', this.#mousemoveHandler);
+  #mouseDetachVert() {
+    this.#isDraggingVert = false;
+    this.#thumbVert!.style.cursor = 'grab';
+    document.removeEventListener('mouseup', this.#mouseupHandlerVert);
+    document.removeEventListener('dragend', this.#mouseupHandlerVert);
+    document.removeEventListener('mousemove', this.#mousemoveHandlerVert);
   }
 
-  #scrollContent() {
-    const scrollHeight = this.#content.scrollHeight - getPaddingY(this.#content);
-    const containerHeight = this.clientHeight - getPaddingY(this);
-    const scrollableHeight = scrollHeight - containerHeight;
+  #thumbMouseDownHorz(e: MouseEvent) {
+    e.preventDefault();
+    this.#mouseupHandlerHorz = this.#mouseDetachHorz.bind(this);
+    this.#mousemoveHandlerHorz = this.#thumbMouseMoveHorz.bind(this);
+    document.addEventListener('mouseup', this.#mouseupHandlerHorz, { passive: true });
+    document.addEventListener('dragend', this.#mouseupHandlerHorz, { passive: true });
+    document.addEventListener('mousemove', this.#mousemoveHandlerHorz, { passive: true });
+    this.#isDraggingHorz = true;
+    this.#startX = e.clientX;
+    this.#startScrollLeft = this.#content.scrollLeft;
+    this.#thumbHorz!.style.cursor = 'grabbing';
+  }
 
-    if (scrollableHeight <= 0) {
-      this.#thumb.style.top = '0px';
+  #thumbMouseMoveHorz(e: MouseEvent) {
+    if (this.#isDraggingHorz) {
+      const deltaX = e.clientX - this.#startX;
+      const thumbTrackWidth = this.clientWidth - this.#thumbHorz!.clientWidth;
+      if (thumbTrackWidth <= 0) return;
+      const scrollRatio = (this.#content.scrollWidth - this.clientWidth) / thumbTrackWidth;
+      this.#content.scrollLeft = this.#startScrollLeft + deltaX * scrollRatio;
     } else {
-      const scrollRatio = this.#content.scrollTop / scrollableHeight;
-      const top = scrollRatio * (this.#track.clientHeight - this.#thumb.clientHeight);
-      this.#thumb.style.top = `${top}px`;
+      this.#mouseDetachHorz();
+    }
+  }
+
+  #mouseDetachHorz() {
+    this.#isDraggingHorz = false;
+    this.#thumbHorz!.style.cursor = 'grab';
+    document.removeEventListener('mouseup', this.#mouseupHandlerHorz);
+    document.removeEventListener('dragend', this.#mouseupHandlerHorz);
+    document.removeEventListener('mousemove', this.#mousemoveHandlerHorz);
+  }
+
+  #wheelHorz(e: WheelEvent) {
+    this.scrollLeft += e.deltaY;
+  }
+
+  #scrollContent() {
+    if (this.#thumbVert && this.#trackVert) {
+      const scrollHeight = this.#content.scrollHeight - getPaddingY(this.#content);
+      const containerHeight = this.clientHeight - getPaddingY(this);
+      const scrollableHeight = scrollHeight - containerHeight;
+      if (scrollableHeight <= 0) {
+        this.#thumbVert.style.top = '0px';
+      } else {
+        const scrollRatio = this.#content.scrollTop / scrollableHeight;
+        const maxTop = this.#trackVert.clientHeight - this.#thumbVert.clientHeight;
+        const top = Math.max(0, Math.min(scrollRatio * maxTop, maxTop));
+        this.#thumbVert.style.top = `${top}px`;
+      }
+    }
+
+    if (this.#thumbHorz && this.#trackHorz) {
+      const scrollWidth = this.#content.scrollWidth - getPaddingX(this.#content);
+      const containerWidth = this.clientWidth - getPaddingX(this);
+      const scrollableWidth = scrollWidth - containerWidth;
+      if (scrollableWidth <= 0) {
+        this.#thumbHorz.style.left = '0px';
+      } else {
+        const scrollRatio = this.#content.scrollLeft / scrollableWidth;
+        const maxLeft = this.#trackHorz.clientWidth - this.#thumbHorz.clientWidth;
+        const left = Math.max(0, Math.min(scrollRatio * maxLeft, maxLeft));
+        this.#thumbHorz.style.left = `${left}px`;
+      }
     }
   }
 }
@@ -270,3 +368,8 @@ function getPaddingY(content: HTMLElement): number {
   const style = getComputedStyle(content);
   return parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
 }
+
+function getPaddingX(content: HTMLElement): number {
+  const style = getComputedStyle(content);
+  return parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+}

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export { default as FlipCard } from './FlipCard/FlipCard.astro';
+export { default as RightISI } from './ISI/Right/RightISI.astro';
 export { default as Modal } from './Modal/Modal.astro';
 export { default as ModalOverlay } from './Modal/ModalOverlay.astro';
 export { default as ModalTrigger } from './Modal/ModalTrigger.astro';

package/src/lib/index.ts

@@ -1,4 +1,6 @@
 export * as FlipCard from '../components/FlipCard/FlipCard';
+export * as ISI from '../components/ISI/index';
+export * as gestures from './gestures';
 export * as Modal from '../components/Modal/Modal';
 export * as PdfViewer from '../components/PdfViewer/PdfViewer';
 export * as ScrollContainer from '../components/ScrollContainer/ScrollContainer';

package/src/components/ISI/RightISI.css

@@ -1,31 +0,0 @@
-:root {
-  --evo-isi-width: 25vw;
-  --evo-isi-width-expanded: 100vw;
-  --evo-isi-height: 100vh;
-  --evo-isi-header-height: 0px;
-  --evo-isi-footer-height: 0px;
-}
-.evo-isi {
-  position: fixed;
-  right: 0;
-  top: 0;
-  display: block;
-  width: var(--evo-isi-width);
-  height: var(--evo-isi-height);
-  overflow: hidden;
-  z-index: 99;
-  background-color: #ffffff;
-
-  transform-origin: right top;
-  transition-property: width;
-  transition-duration: 500ms;
-  transition-timing-function: ease-in-out;
-
-  .evo-isi-wrapper {
-    .evo-isi-text {
-      .evo-scroll-container {
-        /* height: calc(var(--evo-isi-height) - var(--evo-isi-header-height) - var(--evo-isi-footer-height)) */
-      }
-    }
-  }
-}

package/src/components/ISI/RightISI.ts

@@ -1,27 +0,0 @@
-import * as ScrollContainer from '../ScrollContainer/ScrollContainer';
-
-const isi = document.querySelector('.evo-isi') as HTMLElement;
-const isiHeader = isi.querySelector<HTMLElement>('.evo-isi-header');
-const isiFooter = isi.querySelector<HTMLElement>('.evo-isi-footer');
-const isiText = isi.querySelector('.evo-isi-text') as HTMLElement;
-
-export function resize() {
-  if (isi) {
-    const isiStyle = getComputedStyle(isi);
-    const isiHeight = parseInt(isiStyle.height);
-    const headerHeight = isiHeader ? parseInt(getComputedStyle(isiHeader).height) : 0;
-    const footerHeight = isiFooter ? parseInt(getComputedStyle(isiFooter).height) : 0;
-
-    const isiTextStyle = getComputedStyle(isiText);
-    const textPadTop = parseInt(isiTextStyle.paddingTop);
-    const textPadBot = parseInt(isiTextStyle.paddingBottom);
-
-    const scrollContainer = ScrollContainer.getScrollContainer(isi.querySelector('.evo-isi-text .evo-scroll-container') as HTMLElement);
-    if (scrollContainer) {
-      const height = isiHeight - headerHeight - footerHeight - textPadTop - textPadBot;
-      ScrollContainer.resize(scrollContainer, { height });
-    }
-  }
-}
-addEventListener('load', resize, { passive: true });
-window.addEventListener('resize', resize, { passive: true });

package/src/components/Modal/v2/Modal.astro

@@ -1,42 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types';
-import './Modal.css';
-
-interface Props extends HTMLAttributes<'div'> {
-  id: string;
-  closeButton?: 'default' | 'minimal' | 'none' | 'false' | false;
-  closeButtonAtts?: Record<string, string>;
-}
-
-const {
-  id,
-  closeButton = 'default',
-  closeButtonAtts,
-  ...rest
-} = Astro.props;
-
-const attrs = {...rest};
-const cssClass = attrs['class'] ?? '';
-
-['class'].forEach((a) => {
-  delete attrs[a as keyof typeof attrs];
-});
-
-const showCloseButton = closeButton !== false && closeButton !== 'false' && closeButton !== 'none';
-const closeButtonCssClassList = ['evo-modal-close', 'evo-modal-action-hide'];
-if (showCloseButton) {
-  closeButtonCssClassList.push(`evo-modal-theme-${closeButton}`)
-}
-
----
-<evo-modal id={id} class:list={['evo-modal', cssClass]} {...attrs}>
-  {showCloseButton && <button class:list={closeButtonCssClassList} {...closeButtonAtts}><span class="evo-modal-x"><slot name="close">X</slot></span></button>}
-  <slot name="outer" />
-  <div class="evo-modal-wrapper">
-    <slot />
-  </div>
-</evo-modal>
-
-<script>
-  import './Modal';
-</script>