polymorph-ui-components 0.1.0

package/dist/Carousel/Carousel.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import type { CarouselProperties } from './properties';
+
+  let {
+    views,
+    autoplay = false,
+    autoplayInterval = 1000,
+    showDots = false,
+    isScrollableLast = false,
+    testId,
+    onkeydown,
+    classes
+  }: CarouselProperties = $props();
+
+  let slidesDiv: HTMLDivElement | null = $state(null);
+  let intervalId: number;
+  let endTouch: number;
+  let startTouch: number;
+  let startMouse: number;
+  let endMouse: number;
+  let carouselWidth: string;
+  let carouselDiv: HTMLDivElement | null = $state(null);
+  let activeSlideIndex = $state(0);
+  let widthUnits: string;
+
+  function handleDotKeydown(event: KeyboardEvent, index: number) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      moveSlideToIndex(index);
+    }
+    onkeydown?.(event);
+  }
+
+  function nextSlide() {
+    if (activeSlideIndex != views.length - 1 || isScrollableLast) {
+      activeSlideIndex++;
+      changeCurrentSlide();
+      if (autoplay) {
+        resetInterval();
+      }
+    }
+  }
+
+  function previousSlide() {
+    if (activeSlideIndex != 0 || isScrollableLast) {
+      activeSlideIndex--;
+      changeCurrentSlide();
+      if (autoplay) {
+        resetInterval();
+      }
+    }
+  }
+
+  function changeCurrentSlide() {
+    if (activeSlideIndex > views.length - 1) {
+      activeSlideIndex = 0;
+    } else if (activeSlideIndex < 0) {
+      activeSlideIndex = views.length - 1;
+    }
+    if (slidesDiv) {
+      slidesDiv.style.transform = `translateX(${
+        -activeSlideIndex * parseInt(carouselWidth)
+      }${widthUnits})`;
+    }
+  }
+
+  function moveSlideToIndex(index: number) {
+    activeSlideIndex = index;
+    changeCurrentSlide();
+  }
+
+  function resetInterval() {
+    clearInterval(intervalId);
+    intervalId = window.setInterval(nextSlide, autoplayInterval);
+  }
+
+  function handleTouchStart(event: TouchEvent) {
+    if (event.touches.length > 0) {
+      const touch = event.touches.item(0);
+      if (touch !== null) {
+        startTouch = touch.clientX;
+      }
+    }
+  }
+
+  function handleTouchEnd(event: TouchEvent) {
+    if (event.changedTouches.length > 0) {
+      const changedTouch = event.changedTouches.item(0);
+      if (changedTouch !== null) {
+        endTouch = changedTouch.clientX;
+        if (startTouch - endTouch > 20) {
+          nextSlide();
+        } else {
+          if (endTouch - startTouch > 20) {
+            previousSlide();
+          }
+        }
+      }
+    }
+  }
+
+  function handleMouseDown(event: MouseEvent) {
+    if (typeof event.clientX !== 'undefined') {
+      startMouse = event.clientX;
+    }
+  }
+
+  function handeMouseUp(event: MouseEvent) {
+    if (typeof event.clientX !== 'undefined') {
+      endMouse = event.clientX;
+      if (startMouse - endMouse > 20) {
+        nextSlide();
+      } else {
+        if (endMouse - startMouse > 20) {
+          previousSlide();
+        }
+      }
+    }
+  }
+
+  function setWidthUnit(carouselWidth: string) {
+    widthUnits = carouselWidth.slice(-3);
+    if (/^-?\d+$/.test(widthUnits.at(0) ?? '')) {
+      widthUnits = widthUnits.slice(-2);
+    }
+  }
+
+  onMount(() => {
+    if (carouselDiv) {
+      carouselWidth = getComputedStyle(carouselDiv).getPropertyValue('--carousel-width');
+      setWidthUnit(carouselWidth);
+      carouselDiv.addEventListener('touchstart', handleTouchStart);
+      carouselDiv.addEventListener('touchend', handleTouchEnd);
+      carouselDiv.addEventListener('mousedown', handleMouseDown);
+      carouselDiv.addEventListener('mouseup', handeMouseUp);
+    }
+    if (autoplay) {
+      intervalId = window.setInterval(nextSlide, autoplayInterval);
+    }
+  });
+
+  onDestroy(() => {
+    if (autoplay) {
+      clearInterval(intervalId);
+    }
+  });
+</script>
+
+<div class="carousel-container {classes ?? ''}" data-pw={testId}>
+  {#if views.length > 0}
+    <div class="carousel" bind:this={carouselDiv}>
+      <div class="slidesDiv" bind:this={slidesDiv}>
+        {#each views as view, index (index)}
+          <div class="current-slide">
+            {#if typeof view.properties === 'object'}
+              <view.component properties={view.properties} />
+            {:else}
+              <view.component />
+            {/if}
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+  {#if showDots}
+    <div class="dots-wrapper">
+      <!-- eslint-disable-next-line -->
+      {#each views as _, index}
+        <div
+          class={activeSlideIndex == index ? 'active-dot' : 'dot'}
+          onclick={() => moveSlideToIndex(index)}
+          onkeydown={(event) => handleDotKeydown(event, index)}
+          role="button"
+          tabindex="0"
+          aria-label={`Go to slide ${index + 1}`}
+          aria-current={activeSlideIndex == index}
+        ></div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .carousel-container {
+    width: var(--carousel-width);
+  }
+  .current-slide {
+    width: var(--carousel-width, 300px);
+    height: var(--carousel-height, 100px);
+    flex-shrink: 0;
+  }
+  .carousel {
+    box-shadow: var(--carousel-shadow);
+    height: var(--carousel-height, 100px);
+    width: var(--carousel-width, 300px);
+    overflow: hidden;
+    border-radius: var(--carousel-border-radius, 0%);
+  }
+  .carousel:active {
+    cursor: grabbing;
+  }
+  .slidesDiv {
+    display: flex;
+    transform: translateX(0);
+    transition: transform 0.5s ease-in-out;
+  }
+  .dots-wrapper {
+    gap: var(--carousel-dot-gap, 10px);
+    padding-top: var(--carousel-dot-padding-top, 10px);
+    display: flex;
+    justify-content: center;
+  }
+  .dot {
+    width: var(--carousel-dot-width, 5px);
+    height: var(--carousel-dot-height, 5px);
+    border-radius: 50%;
+    background: var(--carousel-dot-color, currentColor);
+    cursor: pointer;
+    transition: 0.3s ease;
+  }
+
+  .active-dot {
+    width: var(--carousel-dot-width, 5px);
+    height: var(--carousel-dot-height, 5px);
+    border-radius: 50%;
+    cursor: pointer;
+    background: var(--carousel-active-dot-color, currentColor);
+    transition: 0.3s ease;
+  }
+  /*
+  @media only screen and (max-width: 324px) {
+
+    .carousel-container {
+      width:270px;
+
+    }
+    .current-slide {
+    width: 270px;
+    }
+    .carousel {
+      width:270px;
+    }
+  }
+
+  @media only screen and (max-width: 269px) {
+    .carousel-container {
+      width:240px;
+    }
+    .current-slide {
+    width: 240px;
+    }
+    .carousel {
+      width:240px;
+    }
+
+  } */
+</style>

package/dist/Carousel/Carousel.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CarouselProperties } from './properties';
+declare const Carousel: import("svelte").Component<CarouselProperties, {}, "">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/Carousel/properties.d.ts

@@ -0,0 +1,20 @@
+import type { Component } from 'svelte';
+export type CarouselView = {
+    properties?: Record<string, unknown>;
+    component: Component<Record<string, unknown>>;
+};
+export type CarouselProperties = CarouselEventProperties & OptionalCarouselProperties & MandatoryCarouselProperties;
+export type MandatoryCarouselProperties = {
+    views: CarouselView[];
+};
+export type OptionalCarouselProperties = {
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    showDots?: boolean;
+    isScrollableLast?: boolean;
+    testId?: string;
+    classes?: string;
+};
+export type CarouselEventProperties = {
+    onkeydown?: (event: KeyboardEvent) => void;
+};

package/dist/Carousel/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/CheckListItem/CheckListItem.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { CheckListItemProperties } from './properties';
+  import Checkbox from '../Checkbox/Checkbox.svelte';
+
+  let {
+    text,
+    checked = $bindable(false),
+    disabled = false,
+    checkboxLabel,
+    testId,
+    onclick,
+    classes
+  }: CheckListItemProperties = $props();
+
+  function handleClick(value: boolean): void {
+    checked = value;
+    onclick?.(checked);
+  }
+</script>
+
+<div class="container {classes ?? ''}" class:disabled data-pw={testId}>
+  <div class="checkbox-wrapper">
+    <Checkbox
+      text=""
+      bind:checked
+      {disabled}
+      onclick={handleClick}
+      {...typeof testId === 'string' ? { testId: `${testId}-checkbox` } : {}}
+    />
+  </div>
+  {#if typeof checkboxLabel === 'function'}
+    {@render checkboxLabel()}
+  {:else}
+    <span class="text" class:checked>{text}</span>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: var(--check-list-item-display, flex);
+    align-items: var(--check-list-item-align-items, center);
+    width: var(--check-list-item-width, 100%);
+    padding: var(--check-list-item-padding);
+    gap: var(--check-list-item-gap, 8px);
+  }
+
+  .container.disabled {
+    opacity: var(--check-list-item-disabled-opacity, 0.4);
+    cursor: not-allowed;
+  }
+
+  .checkbox-wrapper {
+    flex-shrink: 0;
+  }
+
+  .text {
+    font-size: var(--check-list-item-text-size, 14px);
+    color: var(--check-list-item-text-color);
+  }
+
+  .text.checked {
+    color: var(--check-list-item-checked-text-color);
+    font-weight: var(--check-list-item-checked-font-weight);
+  }
+</style>

package/dist/CheckListItem/CheckListItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CheckListItemProperties } from './properties';
+declare const CheckListItem: import("svelte").Component<CheckListItemProperties, {}, "checked">;
+type CheckListItem = ReturnType<typeof CheckListItem>;
+export default CheckListItem;

package/dist/CheckListItem/properties.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+export type CheckListItemProperties = MandatoryCheckListItemProperties & OptionalCheckListItemProperties & CheckListItemEventProperties;
+export type MandatoryCheckListItemProperties = {
+    text: string;
+};
+export type OptionalCheckListItemProperties = {
+    checked?: boolean;
+    disabled?: boolean;
+    checkboxLabel?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type CheckListItemEventProperties = {
+    onclick?: (checked: boolean) => void;
+};

package/dist/CheckListItem/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/Checkbox/Checkbox.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import type { CheckboxProperties } from './properties';
+  import checkmarkSvg from '../assets/checkmark.svg?raw';
+  import minusSvg from '../assets/minus.svg?raw';
+
+  let {
+    text,
+    checked = $bindable(false),
+    disabled = false,
+    indeterminate = $bindable(false),
+    testId,
+    checkedIcon,
+    indeterminateIcon,
+    onclick,
+    classes
+  }: CheckboxProperties = $props();
+
+  function handleClick(): void {
+    if (disabled) {
+      return;
+    }
+    checked = !checked;
+    if (indeterminate) {
+      indeterminate = false;
+    }
+    onclick?.(checked);
+  }
+
+  function handleKeyDown(e: KeyboardEvent): void {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      handleClick();
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<label class="container {classes ?? ''}" class:disabled onclick={handleClick} data-pw={testId}>
+  <input
+    type="checkbox"
+    class="native-checkbox"
+    {checked}
+    {disabled}
+    tabindex={-1}
+    aria-hidden="true"
+    onclick={(e: MouseEvent) => e.stopPropagation()}
+  />
+  <span
+    class="box"
+    class:checked
+    class:indeterminate
+    role="checkbox"
+    tabindex={disabled ? -1 : 0}
+    aria-checked={indeterminate ? 'mixed' : checked}
+    aria-disabled={disabled}
+    onkeydown={handleKeyDown}
+  >
+    {#if checked && !indeterminate}
+      {#if typeof checkedIcon === 'function'}
+        {@render checkedIcon()}
+      {:else}
+        <!-- eslint-disable svelte/no-at-html-tags -->
+        <span class="icon">{@html checkmarkSvg}</span>
+      {/if}
+    {/if}
+    {#if indeterminate}
+      {#if typeof indeterminateIcon === 'function'}
+        {@render indeterminateIcon()}
+      {:else}
+        <!-- eslint-disable svelte/no-at-html-tags -->
+        <span class="icon dash">{@html minusSvg}</span>
+      {/if}
+    {/if}
+  </span>
+  <span class="label" hidden={text.length === 0}>{text}</span>
+</label>
+
+<style>
+  .container {
+    display: var(--checkbox-container-display, inline-flex);
+    align-items: var(--checkbox-container-align-items, center);
+    gap: var(--checkbox-container-gap, 8px);
+    cursor: var(--checkbox-container-cursor, pointer);
+  }
+
+  .container.disabled {
+    opacity: var(--checkbox-disabled-opacity, 0.4);
+    cursor: var(--checkbox-disabled-cursor, not-allowed);
+  }
+
+  .native-checkbox {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
+
+  .box {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--checkbox-size, 20px);
+    height: var(--checkbox-size, 20px);
+    border: var(--checkbox-border, 2px solid currentColor);
+    border-radius: var(--checkbox-border-radius, 6px);
+    background-color: var(--checkbox-background, transparent);
+    transition:
+      background-color var(--checkbox-transition, 0.2s),
+      border var(--checkbox-transition, 0.2s);
+    flex-shrink: 0;
+  }
+
+  .box:focus-visible {
+    outline: none;
+    box-shadow: var(--checkbox-focus-ring, 0 0 0 3px currentColor);
+  }
+
+  .container:not(.disabled) .box:hover {
+    border-color: var(--checkbox-hover-border-color, currentColor);
+  }
+
+  .box.checked {
+    background-color: var(--checkbox-checked-background, currentColor);
+    border: var(--checkbox-checked-border, 2px solid currentColor);
+  }
+
+  .box.indeterminate {
+    background-color: var(--checkbox-indeterminate-background, currentColor);
+    border: var(--checkbox-indeterminate-border, 2px solid currentColor);
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--checkbox-icon-size, 14px);
+    height: var(--checkbox-icon-size, 14px);
+    color: var(--checkbox-checkmark-color, white);
+  }
+
+  .icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .icon.dash {
+    color: var(--checkbox-dash-color, white);
+  }
+
+  .label {
+    font-size: var(--checkbox-label-font-size, 14px);
+    font-weight: var(--checkbox-label-font-weight, 400);
+    color: var(--checkbox-label-color, currentColor);
+  }
+</style>

package/dist/Checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CheckboxProperties } from './properties';
+declare const Checkbox: import("svelte").Component<CheckboxProperties, {}, "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/Checkbox/properties.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+export type CheckboxProperties = MandatoryCheckboxProperties & OptionalCheckboxProperties & CheckboxEventProperties;
+export type MandatoryCheckboxProperties = {
+    text: string;
+};
+export type OptionalCheckboxProperties = {
+    checked?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    testId?: string;
+    checkedIcon?: Snippet;
+    indeterminateIcon?: Snippet;
+    classes?: string;
+};
+export type CheckboxEventProperties = {
+    onclick?: (checked: boolean) => void;
+};

package/dist/Checkbox/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/Choicebox/Choicebox.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import type { ChoiceboxProperties } from './properties';
+
+  let {
+    children,
+    selected = $bindable(false),
+    mode = 'radio',
+    disabled = false,
+    testId,
+    onclick,
+    classes
+  }: ChoiceboxProperties = $props();
+
+  function handleClick(): void {
+    if (disabled) {
+      return;
+    }
+    if (mode === 'radio' && selected) {
+      return;
+    }
+    selected = !selected;
+    onclick?.(selected);
+  }
+
+  function handleKeyDown(e: KeyboardEvent): void {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      handleClick();
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class="choicebox {classes ?? ''}"
+  class:selected
+  class:disabled
+  role={mode === 'radio' ? 'radio' : 'checkbox'}
+  aria-checked={selected}
+  aria-disabled={disabled}
+  tabindex={disabled ? -1 : 0}
+  onclick={handleClick}
+  onkeydown={handleKeyDown}
+  data-pw={testId}
+>
+  {#if typeof children === 'function'}
+    {@render children()}
+  {/if}
+</div>
+
+<style>
+  .choicebox {
+    display: var(--choicebox-display, flex);
+    align-items: var(--choicebox-align-items, center);
+    padding: var(--choicebox-padding, 16px);
+    border: var(--choicebox-border, 2px solid currentColor);
+    border-radius: var(--choicebox-border-radius, 6px);
+    background: var(--choicebox-background, #ffffff);
+    gap: var(--choicebox-gap, 12px);
+    cursor: var(--choicebox-cursor, pointer);
+    font-family: var(--choicebox-font-family, inherit);
+    transition: var(--choicebox-transition, border-color 0.2s, background 0.2s);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .choicebox:focus-visible {
+    outline: none;
+    box-shadow: var(--choicebox-focus-ring, 0 0 0 3px currentColor);
+  }
+
+  .choicebox:not(.disabled):hover {
+    border-color: var(--choicebox-hover-border-color, currentColor);
+    background: var(--choicebox-hover-background, var(--choicebox-background, #ffffff));
+  }
+
+  .choicebox.selected {
+    border-color: var(--choicebox-selected-border-color, currentColor);
+    background: var(--choicebox-selected-background, var(--choicebox-background, #ffffff));
+  }
+
+  .choicebox.disabled {
+    opacity: var(--choicebox-disabled-opacity, 0.4);
+    cursor: var(--choicebox-disabled-cursor, not-allowed);
+  }
+</style>

package/dist/Choicebox/Choicebox.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChoiceboxProperties } from './properties';
+declare const Choicebox: import("svelte").Component<ChoiceboxProperties, {}, "selected">;
+type Choicebox = ReturnType<typeof Choicebox>;
+export default Choicebox;

package/dist/Choicebox/properties.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+export type ChoiceboxProperties = OptionalChoiceboxProperties & ChoiceboxEventProperties;
+export type ChoiceboxMode = 'radio' | 'checkbox';
+export type OptionalChoiceboxProperties = {
+    children?: Snippet;
+    selected?: boolean;
+    mode?: ChoiceboxMode;
+    disabled?: boolean;
+    testId?: string;
+    classes?: string;
+};
+export type ChoiceboxEventProperties = {
+    onclick?: (selected: boolean) => void;
+};

package/dist/Choicebox/properties.js

@@ -0,0 +1 @@
+export {};