@inizioevoke/astro-core 2.2.9 → 2.3.1

package/docs/components/BottomISI.md

@@ -0,0 +1,187 @@
+# BottomISI
+
+The BottomISI component renders a custom element (`<evo-isi>`) that displays Important Safety Information anchored to the bottom of the page. It supports two modes:
+
+- **Full-only** — the ISI is hidden by default (collapsed to `--evo-isi-collapsed-height`) and a single toggle button expands/collapses it.
+- **Partial + Full** — a short teaser excerpt (`partial-isi` slot) stays visible at all times. Clicking its toggle expands the full ISI overlay on top; clicking the full ISI toggle collapses back to the partial view.
+
+The full ISI content is wrapped in a [ScrollContainer](./ScrollContainer.md) by default. Transitions are animated with configurable duration.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `partial` | `object` | — | Options for the partial (teaser) panel. Only relevant when the `partial-isi` slot is used |
+| `partial.renderButton` | `boolean` | `true` | Whether to render the built-in expand toggle inside the partial panel |
+| `partial.buttonAttrs` | `HTMLAttributes<'button'>` | — | Additional HTML attributes spread onto the partial toggle button |
+| `full` | `object` | — | Options for the full ISI panel |
+| `full.renderButton` | `boolean` | `true` | Whether to render the built-in collapse/toggle button inside the full panel |
+| `full.buttonAttrs` | `HTMLAttributes<'button'>` | — | Additional HTML attributes spread onto the full-panel toggle button |
+| `full.scrollContainer` | `ScrollContainerProps \| false` | — | Props forwarded to the inner `ScrollContainer`. Pass `false` to render the ISI content without a scroll container |
+| `transitionDuration` | `number` | — | Expand/collapse animation duration in milliseconds. Overrides `--evo-isi-transition-duration` via inline style |
+| `...rest` | `HTMLAttributes<'div'>` | — | Any additional HTML attributes are passed to the `<evo-isi>` element |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | The full ISI content. Rendered inside a `ScrollContainer` unless `full.scrollContainer` is `false` |
+| `partial-isi` | Short teaser ISI content shown at the bottom at all times. When present, enables partial+full mode |
+| `partial-toggle` | Custom element to replace the built-in expand button in the partial panel |
+| `full-toggle` | Custom element to replace the built-in collapse/toggle button in the full panel |
+
+## CSS Custom Properties
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--evo-isi-collapsed-height` | `0px` | Height of `<evo-isi>` when collapsed (full-only mode) or height of the full panel before it is expanded (partial mode) |
+| `--evo-isi-expanded-height` | `auto` | Target height for the full ISI panel when expanded. `auto` resolves at runtime to `min(body height, screen.availHeight)` |
+| `--evo-isi-expanded-height-adjust` | `0px` | Amount subtracted from `--evo-isi-expanded-height` when expanded — useful for offsetting surrounding chrome (e.g. a sticky header) |
+| `--evo-isi-transition-duration` | `333ms` | Duration for expand/collapse transitions |
+| `--evo-isi-bottom` | `0px` | Bottom offset of the absolutely-positioned full panel |
+| `--evo-isi-collapse-transition` | — | Full `transition` shorthand used during collapse |
+| `--evo-isi-expand-transition` | — | Full `transition` shorthand used during expand |
+
+## JavaScript API
+
+### Element methods
+
+Access the `<evo-isi>` element directly to call these methods:
+
+| Method | Signature | Description |
+|--------|-----------|-------------|
+| `expand` | `() => Promise<void>` | Expands the ISI to its full height. Resolves after the transition completes. No-op if already expanded. |
+| `collapse` | `() => Promise<void>` | Collapses the ISI. Scrolls the inner scroll container back to the top. Resolves after the transition completes. No-op if already collapsed. |
+| `toggle` | `() => Promise<void>` | Calls `expand()` if collapsed or `collapse()` if expanded. |
+
+---
+
+## Examples
+
+### Full ISI only (no partial)
+
+The ISI starts collapsed to zero height. The built-in button toggles it open and closed.
+
+```astro
+---
+import { BottomISI } from '@inizioevoke/astro-core';
+---
+<footer>
+  <BottomISI>
+    <h2>Important Safety Information</h2>
+    <p>Full ISI content here...</p>
+  </BottomISI>
+</footer>
+```
+
+### With a partial teaser
+
+The partial excerpt is always visible. Clicking it expands the full ISI on top.
+
+```astro
+---
+import { BottomISI } from '@inizioevoke/astro-core';
+---
+<footer>
+  <BottomISI>
+    <Fragment slot="partial-isi">
+      <h2>Important Safety Information</h2>
+      <p>Brief teaser excerpt...</p>
+    </Fragment>
+
+    <h2>Important Safety Information</h2>
+    <p>Complete ISI content...</p>
+  </BottomISI>
+</footer>
+```
+
+### Fixed collapsed height (IVA / kiosk)
+
+Set a visible collapsed height so the ISI is always partially shown even before expanding.
+
+```astro
+---
+import { BottomISI } from '@inizioevoke/astro-core';
+---
+<style>
+  footer evo-isi {
+    --evo-isi-collapsed-height: 150px;
+    --evo-isi-expanded-height: calc(1024px - 2rem);
+  }
+</style>
+<footer style="position: absolute; bottom: 0; width: 100%;">
+  <BottomISI>
+    <h2>Important Safety Information</h2>
+    <p>ISI content...</p>
+  </BottomISI>
+</footer>
+```
+
+### Disable the scroll container
+
+Render the full ISI content directly without a scroll container.
+
+```astro
+<BottomISI full={{ scrollContainer: false }}>
+  <p>ISI content...</p>
+</BottomISI>
+```
+
+### Custom toggle buttons
+
+Replace the built-in toggle with your own markup using the named slots.
+
+```astro
+<BottomISI partial={{ renderButton: false }} full={{ renderButton: false }}>
+  <Fragment slot="partial-toggle">
+    <button class="my-expand-btn">Show Full ISI ▲</button>
+  </Fragment>
+  <Fragment slot="full-toggle">
+    <button class="my-collapse-btn">Close ▼</button>
+  </Fragment>
+
+  <Fragment slot="partial-isi">
+    <p>Teaser content...</p>
+  </Fragment>
+
+  <p>Full ISI content...</p>
+</BottomISI>
+```
+
+### Programmatic control
+
+```astro
+<BottomISI id="page-isi">
+  <p>ISI content...</p>
+</BottomISI>
+
+<script>
+  import type { IEvoIsiElement } from '@inizioevoke/astro-core';
+
+  const isi = document.querySelector<IEvoIsiElement>('#page-isi');
+
+  document.querySelector('#open-btn').addEventListener('click', () => {
+    isi?.expand();
+  });
+
+  document.querySelector('#close-btn').addEventListener('click', () => {
+    isi?.collapse();
+  });
+</script>
+```
+
+### Custom transition duration
+
+```astro
+<!-- Via prop (sets inline CSS variable) -->
+<BottomISI transitionDuration={500}>
+  <p>ISI content...</p>
+</BottomISI>
+
+<!-- Via CSS -->
+<style>
+  evo-isi {
+    --evo-isi-transition-duration: 500ms;
+  }
+</style>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "2.2.9",
+  "version": "2.3.1",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -11,11 +11,12 @@
     "./integrations": "./src/integrations/index.ts",
     "./lib": "./src/lib/index.ts",
     "./lib/FlipCard": "./src/components/FlipCard/index.ts",
-    "./lib/ISI": "./src/components/ISI/index.ts",
+    "./lib/BottomISI": "./src/components/BottomISI/index.ts",
     "./lib/Modal": "./src/components/Modal/index.ts",
     "./lib/PdfViewer": "./src/components/PdfViewer/index.ts",
     "./lib/ScrollContainer": "./src/components/ScrollContainer/index.ts",
-    "./lib/gestures": "./src/lib/gestures/index.ts"
+    "./lib/gestures": "./src/lib/gestures/index.ts",
+    "./server": "./src/server/index.ts"
   },
   "scripts": {
     "postinstall": "node postinstall.mjs"

package/src/components/ISI/BottomISI/BottomISI.astro

@@ -0,0 +1,85 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types';
+import { addCssClassToAttrs } from '@/server/index';
+import ScrollContainer, { type Props as ScrollContainerProps } from '../../ScrollContainer/ScrollContainer.astro';
+import './BottomISI.css';
+
+export interface Props extends HTMLAttributes<'div'> {
+  partial?: {
+    renderButton?: boolean;
+    buttonAttrs?: HTMLAttributes<'button'>;
+  }
+  full?: {
+    renderButton?: boolean;
+    buttonAttrs?: HTMLAttributes<'button'>;
+    scrollContainer?: false | ScrollContainerProps;
+  }
+  transitionDuration?: number;
+}
+
+const {
+  partial,
+  full,
+  transitionDuration,
+  ...rest
+} = Astro.props;
+
+const attrs: HTMLAttributes<'div'> = {
+  ...rest
+};
+
+const style = [];
+if (typeof transitionDuration == 'number') {
+  style.push(`--evo-isi-transition-duration:${transitionDuration}ms`);
+}
+if (typeof attrs.style == 'string') {
+  style.push(attrs.style);
+  if (!attrs.style.endsWith(';')) {
+    style.push('');
+  }
+} else {
+  style.push('');
+}
+attrs.style = style.join(';');
+
+const partialButtonAttrs: HTMLAttributes<'button'> = {...partial?.buttonAttrs};
+addCssClassToAttrs(partialButtonAttrs, 'evo-isi-toggle');
+
+const fullButtonAttrs: HTMLAttributes<'button'> = {...full?.buttonAttrs};
+addCssClassToAttrs(fullButtonAttrs, 'evo-isi-toggle');
+
+---
+<evo-isi {...attrs}>
+  { Astro.slots.has('partial-isi') && 
+  <div class="evo-isi-partial-wrapper">
+    <div class="evo-isi-toggle-wrapper">
+      {partial?.renderButton !== false && 
+        <slot name="partial-toggle"><button {...partialButtonAttrs}></button></slot>
+      }
+    </div>
+    <div class="evo-isi-text">
+      <slot name="partial-isi" />
+    </div>
+  </div>
+  }
+  <div class="evo-isi-full-wrapper">
+    <div class="evo-isi-toggle-wrapper">
+      {full?.renderButton !== false && 
+        <slot name="full-toggle"><button {...fullButtonAttrs}></button></slot>
+      }
+    </div>
+    <div class="evo-isi-text">
+      { full?.scrollContainer !== false &&
+        <ScrollContainer {...full?.scrollContainer}>
+          <slot />
+        </ScrollContainer>
+      }
+      { full?.scrollContainer === false && 
+        <slot />
+      }
+    </div>
+  </div>
+</evo-isi>
+<script>
+  import './BottomISI';
+</script>

package/src/components/ISI/BottomISI/BottomISI.css

@@ -0,0 +1,161 @@
+@layer inizioevoke-astro-components {
+  :root {
+    --evo-isi-collapsed-height: 0px;
+    --evo-isi-expanded-height: auto;
+    --evo-isi-expanded-height-adjust: 0px;
+
+    --evo-isi-transition-duration: 333ms;
+
+    --evo-isi-bottom: 0px;
+    --evo-isi-height: var(--evo-isi-collapsed-height);
+
+
+    --evo-isi-collapse-transition-height: height var(--evo-isi-transition-duration) linear;
+    --evo-isi-collapse-transition: var(--evo-isi-collapse-transition-height), top var(--evo-isi-transition-duration) linear, opacity calc(var(--evo-isi-transition-duration) / 3) linear calc(var(--evo-isi-transition-duration) / 3 * 2);
+
+    --evo-isi-expand-transition-height: height var(--evo-isi-transition-duration) linear;
+    --evo-isi-expand-transition: var(--evo-isi-expand-transition-height), top var(--evo-isi-transition-duration) linear, opacity calc(var(--evo-isi-transition-duration) / 3) linear;
+  }
+  evo-isi {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: block;
+    width: 100%;
+    height: auto;
+
+    .evo-isi-partial-wrapper {
+      position: relative;
+      background-color: white;
+      z-index: 1;
+      .evo-isi-toggle-wrapper {
+        .evo-isi-toggle {
+          position: absolute;
+          right: 24px;
+          top: 0px;
+          width: 24px;
+          height: 24px;
+          margin: 0;
+          padding: 0;
+          text-align: left;
+          text-indent: -9999px;
+          border: 2px solid black;
+          border-radius: 50%;
+          background-color: white;
+          cursor: pointer;
+          z-index: 1;
+          &::before {
+            content: '';
+            position: absolute;
+            left: calc(50% - 6px);
+            top: calc(50% - 1px);
+            width: 12px;
+            height: 2px;
+            background-color: black;
+          }
+          &::after {
+            content: '';
+            position: absolute;
+            left: calc(50% - 1px);
+            top: calc(50% - 6px);
+            width: 2px;
+            height: 12px;
+            background-color: black;
+          }
+        }
+      }
+
+      .evo-isi-text {
+      }
+    }
+
+    .evo-isi-full-wrapper {
+      position: absolute;
+      bottom: var(--evo-isi-bottom);
+      height: var(--evo-isi-height);
+      overflow: hidden;
+      background-color: white;
+      opacity: 0;
+      transition: var(--evo-isi-collapse-transition);
+      z-index: 2;
+
+      .evo-isi-toggle-wrapper {
+        .evo-isi-toggle {
+          position: absolute;
+          right: 24px;
+          top: 0px;
+          width: 24px;
+          height: 24px;
+          margin: 0;
+          padding: 0;
+          text-align: left;
+          text-indent: -9999px;
+          border: 2px solid black;
+          border-radius: 50%;
+          background-color: white;
+          cursor: pointer;
+          z-index: 1;
+          &::before {
+            content: '';
+            position: absolute;
+            left: calc(50% - 6px);
+            top: calc(50% - 1px);
+            width: 12px;
+            height: 2px;
+            background-color: black;
+          }
+        }
+      }
+
+      .evo-isi-text {
+        /* height: var(--evo-isi-height); */
+        overflow: hidden;
+
+        .evo-scroll-container {
+          height: var(--evo-isi-height);
+          transition: var(--evo-isi-collapse-transition-height);
+        }
+      }
+    }
+    
+
+    &:not(:has(.evo-isi-partial-wrapper)) {
+      --evo-isi-height: var(--evo-isi-collapsed-height);
+      height: var(--evo-isi-height);
+
+      .evo-isi-full-wrapper {
+        opacity: 1;
+        .evo-isi-toggle-wrapper {
+          .evo-isi-toggle {
+            &::after {
+              content: '';
+              position: absolute;
+              left: calc(50% - 1px);
+              top: calc(50% - 6px);
+              width: 2px;
+              height: 12px;
+              background-color: black;
+            }
+          }
+        }
+      }
+    }
+
+    &.evo-isi-expand {
+
+      .evo-isi-full-wrapper {
+        --evo-isi-height: calc(var(--evo-isi-expanded-height) - var(--evo-isi-expanded-height-adjust));
+        opacity: 1;
+        
+        transition: var(--evo-isi-expand-transition);
+        .evo-isi-text {
+          transition: var(--evo-isi-expand-transition-height);
+
+          .evo-scroll-container {
+            /* height: var(--evo-isi-expanded-height); */
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/ISI/BottomISI/BottomISI.ts

@@ -0,0 +1,113 @@
+import { EvoScrollContainerElement } from '../../ScrollContainer/ScrollContainer';
+import type { IEvoIsiElement } from '../index.d.ts';
+
+const TAG_NAME = 'evo-isi';
+
+export { IEvoIsiElement };
+export class EvoIsiElement extends HTMLElement implements IEvoIsiElement {
+  #scrollContainer: EvoScrollContainerElement | null = null;
+  #transitionDuration: number | null = null;
+  
+  constructor() {
+    super();
+
+    window.addEventListener('DOMContentLoaded', () => {
+    });
+  }
+
+  connectedCallback() {
+    this.#scrollContainer = this.querySelector<EvoScrollContainerElement>('.evo-scroll-container');
+
+    const partialWrapper = this.querySelector<HTMLElement>('.evo-isi-partial-wrapper');
+
+    partialWrapper?.querySelector<HTMLElement>('.evo-isi-toggle-wrapper')?.querySelector<HTMLElement>('button, [role="button"]')?.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.expand();
+    });
+
+    this.querySelector<HTMLElement>('.evo-isi-full-wrapper .evo-isi-toggle-wrapper')?.querySelector<HTMLElement>('button, [role="button"]')?.addEventListener('click', (e) => {
+      e.preventDefault();
+      partialWrapper ? this.collapse() : this.toggle();
+    });
+  }
+
+  toggle() {
+    if (!this.classList.contains('evo-isi-expand')) {
+      return this.expand();
+    } else {
+      return this.collapse();
+    }
+  }
+
+  expand() {
+    return new Promise<void>((resolve) => {
+      if (!this.classList.contains('evo-isi-expand')) {
+        const style = getComputedStyle(this);
+        this.#initTransitionDuration(style);
+        if (style.getPropertyValue('--evo-isi-expanded-height') === 'auto') {
+          this.style.setProperty('--evo-isi-expanded-height', `${Math.min(parseInt(getComputedStyle(document.body).height, 10), screen.availHeight)}px`);
+        }
+
+        this.classList.add('evo-isi-expand');
+        let animating = true;
+        if (this.#scrollContainer) {
+          const refresh = () => {
+            if (animating) {
+              this.#scrollContainer!.refresh();
+              requestAnimationFrame(refresh);
+            }
+          }
+          refresh();
+        }
+        setTimeout(() => {
+          animating = false;
+          resolve();
+        }, this.#transitionDuration);
+      } else {
+        resolve();
+      }
+    });
+  }
+
+  collapse() {
+    return new Promise<void>((resolve) => {
+      if (this.classList.contains('evo-isi-expand')) {
+        this.#initTransitionDuration();
+
+        this.classList.remove('evo-isi-expand');
+        let animating = true;
+        if (this.#scrollContainer) {
+          this.#scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
+          const refresh = () => {
+            if (animating) {
+              this.#scrollContainer!.refresh();
+              requestAnimationFrame(refresh);
+            }
+          }
+          refresh();
+        }
+        setTimeout(() => {
+          animating = false;
+          resolve();
+        }, this.#transitionDuration);
+      } else {
+        resolve();
+      }
+    });
+  }
+
+  #initTransitionDuration(style?: CSSStyleDeclaration) {
+    if (!this.#transitionDuration) { 
+      style = style ?? getComputedStyle(this);
+      const duration = style.getPropertyValue('--evo-isi-transition-duration');
+      if (duration) {
+        this.#transitionDuration = parseInt(duration, 10) * (/\d+ms/.test(duration) ? 1 : 1000);
+      } else {
+        this.#transitionDuration = 500;
+      }
+    }
+  }
+}
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, EvoIsiElement);
+}

package/src/components/ISI/BottomISI/archive/BottomScrollableISI.astro

@@ -0,0 +1,68 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import ScrollContainer, { type Props as ScrollContainerProps } from '../../ScrollContainer/ScrollContainer.astro';
+import './BottomScrollableISI.css';
+
+export interface Props extends HTMLAttributes<'div'> {
+  scrollContainer?: false | ScrollContainerProps;
+  toggleButton?: boolean;
+  transitionDuration?: number;
+  height?: number | string;
+}
+
+const {
+  scrollContainer,
+  toggleButton,
+  transitionDuration,
+  height,
+  ...rest
+} = Astro.props;
+
+const attrs: HTMLAttributes<'div'> = {
+  ...rest
+};
+
+const style = [];
+if (typeof transitionDuration == 'number') {
+  style.push(`--evo-isi-transition-duration:${transitionDuration}ms`);
+}
+if (height) {
+  style.push(`height:${typeof height == 'number' ? `${height}px` : height}`);
+}
+if (typeof attrs.style == 'string') {
+  style.push(attrs.style);
+  if (!attrs.style.endsWith(';')) {
+    style.push('');
+  }
+} else {
+  style.push('');
+}
+attrs.style = style.join(';');
+
+const scrollContainerProps = {...scrollContainer};
+if (!scrollContainerProps.height) {
+  scrollContainerProps.height = height;
+}
+---
+<evo-isi {...attrs}>
+  <div class="evo-isi-wrapper">
+    <div class="evo-isi-toggle-wrapper">
+      {toggleButton !== false && 
+        <slot name="toggle"><button class="evo-isi-toggle"></button></slot>
+      }
+    </div>
+    <div class="evo-isi-text">
+      {scrollContainer !== false && 
+        <ScrollContainer {...scrollContainerProps}>
+          <slot />
+        </ScrollContainer>
+      }
+      {scrollContainer === false &&
+        <slot />
+      }
+    </div>
+  </div>
+</evo-isi>
+<script>
+  import './BottomScrollableISI';
+</script>

package/src/components/ISI/BottomISI/archive/BottomScrollableISI.css

@@ -0,0 +1,110 @@
+@layer inizioevoke-astro-components {
+  :root {
+    --evo-isi-collapsed-height: 200px;
+    --evo-isi-collapsed-top: 0px;
+    --evo-isi-expanded-height: 976px;
+    --evo-isi-expanded-top: -776px;
+    --evo-isi-transition-duration: 350ms;
+    --evo-isi-height: var(--evo-isi-collapsed-height);
+    --evo-isi-top: var(--evo-isi-collapsed-top);
+  }
+  evo-isi {
+    position: absolute;
+    left: 0;
+    top: var(--evo-isi-top);
+    display: block;
+    width: 100%;
+    height: var(--evo-isi-height);
+    transition-duration: var(--evo-isi-transition-duration);
+    transition-property: top, height;
+    transition-timing-function: ease-out;
+    background-color: white;
+
+    .evo-isi-wrapper {
+      position: relative;
+      .evo-isi-toggle-wrapper {
+        .evo-isi-toggle {
+          position: absolute;
+          right: 24px;
+          top: 0px;
+          width: 24px;
+          height: 24px;
+          margin: 0;
+          padding: 0;
+          text-align: left;
+          text-indent: -9999px;
+          border: 2px solid black;
+          border-radius: 50%;
+          background-color: transparent;
+          cursor: pointer;
+          z-index: 1;
+          &::before {
+            content: '';
+            position: absolute;
+            left: calc(50% - 6px);
+            top: calc(50% - 1px);
+            width: 12px;
+            height: 2px;
+            background-color: black;
+            transform: rotate(0deg);
+            transform-origin: center center;
+            transition-duration: var(--evo-isi-transition-duration);
+            transition-property: transform;
+            transition-timing-function: ease-out;
+          }
+          &::after {
+            content: '';
+            position: absolute;
+            left: calc(50% - 1px);
+            top: calc(50% - 6px);
+            width: 2px;
+            height: 12px;
+            background-color: black;
+            transform: rotate(0deg);
+            transform-origin: center center;
+            transition-duration: var(--evo-isi-transition-duration);
+            transition-property: transform;
+            transition-timing-function: ease-out;
+          }
+        }
+      }
+
+      .evo-isi-text {
+        /* height: var(--evo-isi-height); */
+        overflow: hidden;
+
+        .evo-scroll-container {
+          height: var(--evo-isi-height);
+          transition-duration: var(--evo-isi-transition-duration);
+          transition-property: height;
+          transition-timing-function: ease-out;
+        }
+      }
+    }
+
+    &.evo-isi-expand {
+      --evo-isi-height: var(--evo-isi-expanded-height);
+      --evo-isi-top: var(--evo-isi-expanded-top);
+
+      .evo-isi-wrapper {
+        .evo-isi-toggle-wrapper {
+          .evo-isi-toggle {
+            &::before {
+              transform: rotate(180deg);
+            }
+            &::after {
+              transform: rotate(90deg);
+            }
+          }
+        }
+        .evo-isi-text {
+          /* height: var(--evo-isi-expanded-height); */
+
+          .evo-scroll-container {
+            /* height: var(--evo-isi-expanded-height); */
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/ISI/BottomISI/archive/BottomScrollableISI.ts

@@ -0,0 +1,89 @@
+import { EvoScrollContainerElement } from '../../ScrollContainer/ScrollContainer';
+import type { IEvoIsiElement } from '../index.d.ts';
+
+const TAG_NAME = 'evo-isi';
+
+export class EvoIsiElement extends HTMLElement implements IEvoIsiElement {
+  #scrollContainer: EvoScrollContainerElement | null = null;
+  #transitionDuration = 500;
+  
+  constructor() {
+    super();
+
+    window.addEventListener('DOMContentLoaded', () => {
+      const style = getComputedStyle(this);
+      const duration = style.getPropertyValue('--evo-isi-transition-duration');
+      if (duration) {
+        this.#transitionDuration = parseInt(duration, 10) * (/\d+ms/.test(duration) ? 1 : 1000);
+      }
+    });
+  }
+
+  connectedCallback() {
+    this.#scrollContainer = this.querySelector<EvoScrollContainerElement>('.evo-scroll-container');
+    this.querySelector<HTMLElement>('.evo-isi-toggle-wrapper')?.querySelector<HTMLElement>('button, [role="button"]')?.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.toggle();
+    });
+  }
+
+  toggle() {
+    if (!this.classList.contains('evo-isi-expand')) {
+      return this.expand();
+    } else {
+      return this.collapse();
+    }
+  }
+
+  expand() {
+    return new Promise<void>((resolve) => {
+      if (!this.classList.contains('evo-isi-expand')) {
+        this.classList.add('evo-isi-expand');
+        let animating = true;
+        if (this.#scrollContainer) {
+          const refresh = () => {
+            if (animating) {
+              this.#scrollContainer!.refresh();
+              requestAnimationFrame(refresh);
+            }
+          }
+          refresh();
+        }
+        setTimeout(() => {
+          animating = false;
+          resolve();
+        }, this.#transitionDuration);
+      } else {
+        resolve();
+      }
+    });
+  }
+
+  collapse() {
+    return new Promise<void>((resolve) => {
+      if (this.classList.contains('evo-isi-expand')) {
+        this.classList.remove('evo-isi-expand');
+        let animating = true;
+        if (this.#scrollContainer) {
+          this.#scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
+          const refresh = () => {
+            if (animating) {
+              this.#scrollContainer!.refresh();
+              requestAnimationFrame(refresh);
+            }
+          }
+          refresh();
+        }
+        setTimeout(() => {
+          animating = false;
+          resolve();
+        }, this.#transitionDuration);
+      } else {
+        resolve();
+      }
+    });
+  }
+}
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, EvoIsiElement);
+}

package/src/components/ISI/BottomISI/index.ts

@@ -0,0 +1 @@
+export * from './BottomISI';

package/src/components/ISI/{Right → RightISI}/RightISI.astro

@@ -6,7 +6,7 @@ import './RightISI.css';
 export interface Props extends HTMLAttributes<'div'> {
   scrollContainer?: ScrollContainerProps;
   headerButton?: boolean;
-  transitionDuration?: number
+  transitionDuration?: number;
 }
 
 const {
@@ -32,7 +32,7 @@ const renderHeader = Astro.slots.has('header') || renderHeaderButton;
       <slot name="header" />
       {renderHeaderButton && 
       <div class="evo-isi-header-button">
-        <slot name="header-button"><button class="evo-isi-toggle">Expand</button></slot>
+        <slot name="header-button"><button class="evo-isi-toggle"></button></slot>
       </div>}
     </div>}
     <div class="evo-isi-text">

package/src/components/ISI/{Right → RightISI}/RightISI.css

@@ -33,6 +33,9 @@
       .evo-isi-header {
         height: var(--evo-isi-header-height);
       }
+      .evo-isi-toggle::before {
+        content: "\21D4";
+      }
       .evo-isi-text {
         height: calc(
           var(--evo-isi-height) - 
@@ -45,9 +48,6 @@
           var(--evo-isi-footer-padding-top) - 
           var(--evo-isi-footer-padding-bottom)
         );
-        evo-scroll-container {
-          
-        }
       }
       .evo-isi-footer {
         height: var(--evo-isi-footer-height);

package/src/components/ISI/{Right → RightISI}/RightISI.ts

@@ -1,8 +1,9 @@
 import { EvoScrollContainerElement } from '../../ScrollContainer/ScrollContainer';
-import type { IEvoIsiElement } from '../index';
+import type { IEvoIsiElement } from '../index.d.ts';
 
 const TAG_NAME = 'evo-isi';
 
+export { IEvoIsiElement };
 export class EvoIsiElement extends HTMLElement implements IEvoIsiElement {
   #scrollContainer!: EvoScrollContainerElement;
   #transitionDuration = 500;

package/src/components/ISI/index.d.ts

@@ -0,0 +1,5 @@
+export interface IEvoIsiElement {
+  toggle: () => Promise<void>;
+  expand: () => Promise<void>;
+  collapse: () => Promise<void>;
+}

package/src/components/PdfViewer/PdfViewer.astro

@@ -88,6 +88,7 @@ const scrollContainerScrolling: Scrolling = toolbar === undefined || (toolbar &&
           <slot name="toolbar-zoom-out">
             <svg class="evo-pdf-viewer-toolbar-icon" width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M6 12L18 12" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
           </slot>
         </button>
         <button class="evo-pdf-viewer-toolbar-zoom-in" title="Zoom in">

package/src/components/index.ts

@@ -16,10 +16,20 @@ export {
   type Props as FlipCardProps,
 } from "./FlipCard/FlipCard.astro";
 
+export {
+  default as BottomISI,
+  type Props as BottomISIProps
+} from "./ISI/BottomISI/BottomISI.astro";
+
+// export {
+//   default as BottomScrollableISI,
+//   type Props as BottomScrollableISIProps
+// } from "./ISI/Bottom/BottomScrollableISI.astro";
+
 export {
   default as RightISI,
   type Props as RightISIProps,
-} from "./ISI/Right/RightISI.astro";
+} from "./ISI/RightISI/RightISI.astro";
 
 export {
   default as Modal,

package/src/server/index.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, HTMLTag } from 'astro/types';
+
+export function addCssClassToAttrs<T extends HTMLTag>(attrs: HTMLAttributes<T>, cssClass: string | string[]) {
+  if (attrs['class:list']) {
+    attrs['class:list'] = [attrs['class:list'], ...(typeof cssClass == 'string' ? [cssClass] : cssClass)];
+  } else if (attrs['class']) {
+    attrs['class:list'] = [attrs['class'], ...(typeof cssClass == 'string' ? [cssClass] : cssClass)];
+    delete attrs['class'];
+  } else {
+    attrs['class:list'] = typeof cssClass == 'string' ? [cssClass] : cssClass;
+  }
+}

package/src/components/ISI/index.ts

@@ -1,5 +0,0 @@
-export interface IEvoIsiElement {
-  toggle: () => void;
-  expand: () => void;
-  collapse: () => void;
-}