polymorph-ui-components 0.1.0

package/dist/ListItem/ListItem.svelte

@@ -0,0 +1,309 @@
+<script lang="ts">
+  import Accordion from '../Accordion/Accordion.svelte';
+  import Loader from '../Loader/Loader.svelte';
+  import Img from '../Img/Img.svelte';
+  import type { ListItemProperties } from './properties';
+
+  let {
+    leftImageUrl,
+    leftImageFallbackUrl,
+    rightImageUrl,
+    label,
+    useAccordion = false,
+    rightContentText,
+    testId,
+    topSectionTestId,
+    rightImageTestId,
+    leftImageTestId,
+    centerTextTestId,
+    showLoader = false,
+    showRightContentLoader = false,
+    expand = $bindable(false),
+    preventFocus = false,
+    leftContent,
+    centerContent,
+    rightContent,
+    bottomContent,
+    onleftimageclick,
+    onrightimageclick,
+    oncentertextclick,
+    onitemclick,
+    ontopsectionclick,
+    onkeydown,
+    classes,
+    role: itemRole,
+    ariaSelected,
+    id
+  }: ListItemProperties = $props();
+
+  function handleLeftImageClick(event: MouseEvent): void {
+    onleftimageclick?.(event);
+  }
+
+  function handleRightImageClick(event: MouseEvent): void {
+    onrightimageclick?.(event);
+  }
+
+  function handleCenterTextClick(event: MouseEvent): void {
+    oncentertextclick?.(event);
+  }
+
+  function handleItemClick(event: MouseEvent): void {
+    onitemclick?.(event);
+  }
+
+  function handleTopSectionClick(event: MouseEvent): void {
+    ontopsectionclick?.(event);
+  }
+</script>
+
+{#if (typeof leftImageUrl === 'string' && leftImageUrl.length > 0) || (typeof rightImageUrl === 'string' && rightImageUrl.length > 0) || (typeof label === 'string' && label.length > 0) || typeof leftContent === 'function' || typeof centerContent === 'function' || typeof rightContent === 'function' || typeof bottomContent === 'function'}
+  <div class="item-container {classes ?? ''}">
+    {#if showLoader}
+      <div class="item-loader"></div>
+    {/if}
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <div
+      class="item"
+      class:prevent-focus={preventFocus}
+      onclick={handleItemClick}
+      {onkeydown}
+      role={itemRole ?? 'button'}
+      tabindex={itemRole === 'option' ? -1 : 0}
+      aria-selected={ariaSelected}
+      {id}
+      data-pw={testId}
+    >
+      <div
+        class="top-section"
+        class:prevent-focus={preventFocus}
+        onclick={handleTopSectionClick}
+        {onkeydown}
+        role="button"
+        tabindex="0"
+        data-pw={topSectionTestId}
+      >
+        <div class="left-content">
+          {#if typeof leftImageUrl === 'string' && leftImageUrl.length > 0}
+            <div
+              class:prevent-focus={preventFocus}
+              onclick={handleLeftImageClick}
+              {onkeydown}
+              role="button"
+              tabindex="0"
+              data-pw={leftImageTestId}
+            >
+              <Img src={leftImageUrl} alt="" fallback={leftImageFallbackUrl} />
+            </div>
+          {/if}
+          {#if typeof leftContent === 'function'}
+            {@render leftContent?.()}
+          {/if}
+        </div>
+        <div class="center-content">
+          {#if typeof label === 'string' && label.length > 0}
+            <div
+              class="center-text"
+              class:prevent-focus={preventFocus}
+              onclick={handleCenterTextClick}
+              {onkeydown}
+              role="button"
+              tabindex="0"
+              data-pw={centerTextTestId}
+            >
+              <!-- eslint-disable-next-line -->
+              {@html label}
+            </div>
+          {/if}
+          {#if typeof centerContent === 'function'}
+            {@render centerContent?.()}
+          {/if}
+        </div>
+        <div class="right-content">
+          {#if typeof rightContent === 'function'}
+            {@render rightContent?.()}
+          {/if}
+          {#if typeof rightImageUrl === 'string' && rightImageUrl.length > 0}
+            <div
+              class:prevent-focus={preventFocus}
+              onclick={handleRightImageClick}
+              {onkeydown}
+              role="button"
+              tabindex="0"
+              data-pw={rightImageTestId}
+            >
+              <div class="right-img-wrapper">
+                <Img src={rightImageUrl} alt="" />
+              </div>
+            </div>
+          {/if}
+          {#if showRightContentLoader}
+            <div class="right-content-loader">
+              <Loader />
+            </div>
+          {/if}
+          {#if typeof rightContentText === 'string' && rightContentText.length > 0}
+            <span class="right-content-text">{rightContentText}</span>
+          {/if}
+        </div>
+      </div>
+      <div class="bottom-section">
+        {#if typeof bottomContent === 'function' && useAccordion}
+          <Accordion {expand}>
+            {@render bottomContent()}
+          </Accordion>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .item-container {
+    position: relative;
+    --loader-foreground: var(--list-item-loader-foreground, currentColor);
+    --loader-background: var(--list-item-loader-background, #ffffff);
+    --loader-foreground-end: var(--list-item-loader-foreground-end, #ffffff);
+  }
+
+  .item-loader {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: var(--list-item-loader-background-color, #00000030);
+    z-index: 20;
+    animation: fill-loader ease-in-out var(--list-item-loader-duration, 8s);
+  }
+
+  @keyframes fill-loader {
+    0% {
+      width: 0;
+    }
+
+    100% {
+      width: 100%;
+    }
+  }
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--list-item-background-color, transparent);
+    -webkit-tap-highlight-color: transparent;
+    cursor: var(--list-item-cursor, pointer);
+    -moz-box-shadow: var(--list-item-box-shadow, none);
+    -webkit-box-shadow: var(--list-item-box-shadow, none);
+    box-shadow: var(--list-item-box-shadow, none);
+    width: var(--list-item-box-width);
+    border-radius: var(--list-item-border-radius, 0px);
+    margin: var(--list-item-margin);
+    padding: var(--list-item-padding);
+    border: var(--list-item-border);
+    transition: var(--list-item-transition);
+  }
+
+  .item:hover {
+    background-color: var(--list-item-hover-background-color, var(--list-item-background-color));
+    border: var(--list-item-hover-border, var(--list-item-border));
+  }
+
+  .top-section {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 0;
+  }
+
+  .left-content {
+    display: var(--list-item-left-content-display, flex);
+    --image-height: var(--list-item-left-image-height, 24px);
+    --image-width: var(--list-item-left-image-width, 24px);
+    --image-padding: var(--list-item-left-image-padding, 0px);
+    --image-border-radius: var(--list-item-left-image-border-radius, 0px);
+    --image-margin: var(--list-item-left-image-margin, 0px);
+    --image-filter: var(--list-item-left-image-filter, none);
+    --image-background: var(--list-item-left-image-background);
+    --image-border: var(--list-item-left-image-border);
+    --image-transition: var(--list-item-transition);
+    --image-object-fit: var(--list-item-left-image-object-fit);
+    --image-hover-background: var(
+      --list-item-left-image-hover-background,
+      var(--list-item-left-image-background)
+    );
+    --image-hover-border: var(
+      --list-item-left-image-hover-border,
+      var(--list-item-left-image-border)
+    );
+  }
+
+  .center-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: var(--list-item-center-text-justify-content, flex-start);
+    padding: var(--list-item-center-text-padding, 0px 20px);
+    color: var(--list-item-center-text-color, inherit);
+    font-size: var(--list-item-center-text-font-size, inherit);
+    font-weight: var(--list-item-center-text-font-weight, inherit);
+    align-items: var(--list-item-center-text-vertical-align);
+    margin: var(--list-item-center-text-margin);
+    border: var(--list-item-center-text-border);
+    cursor: var(--list-item-center-text-cursor, pointer);
+    font-family: var(--list-item-center-text-font-family);
+  }
+
+  .center-content {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .right-content {
+    display: var(--list-item-right-content-display, flex);
+  }
+
+  .right-content-loader {
+    margin: var(--list-item-right-content-loader-margin);
+  }
+
+  .bottom-section {
+    flex-direction: row;
+    margin-top: 0;
+  }
+
+  .right-img-wrapper {
+    --image-height: var(--list-item-right-image-height, 18px);
+    --image-width: var(--list-item-right-image-width, 18px);
+    --image-padding: var(--list-item-right-image-padding, 0px);
+    --image-border-radius: var(--list-item-right-image-border-radius, 0px);
+    --image-margin: var(--list-item-right-image-margin, 0px);
+    --image-filter: var(--list-item-right-image-filter);
+    --image-background: var(--list-item-right-image-background);
+    --image-border: var(--list-item-right-image-border);
+    --image-transition: var(--list-item-transition);
+    --image-hover-background: var(
+      --list-item-right-image-hover-background,
+      var(--list-item-right-image-background)
+    );
+    --image-hover-border: var(
+      --list-item-right-image-hover-border,
+      var(--list-item-right-image-border)
+    );
+  }
+
+  .right-content-text {
+    color: var(--list-item-right-content-text-color, inherit);
+    font-size: var(--list-item-right-content-text-font-size, inherit);
+    font-weight: var(--list-item-right-content-text-font-weight, inherit);
+    display: var(--list-item-right-content-display, flex);
+    align-items: var(--list-item-right-content-text-vertical-align);
+    padding: var(--list-item-right-content-text-padding, 0px);
+    margin: var(--list-item-right-content-text-margin, 0px);
+    border: var(--list-item-right-content-text-border);
+    cursor: var(--list-item-right-content-text-cursor, pointer);
+    font-family: var(--list-item-right-content-text-font-family);
+    justify-content: var(--list-item-right-content-text-justify-content);
+  }
+
+  .prevent-focus:focus {
+    outline: none;
+  }
+</style>

package/dist/ListItem/ListItem.svelte.d.ts

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

package/dist/ListItem/properties.d.ts

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+export type ListItemProperties = ListItemEventProperties & {
+    leftImageUrl?: string | null;
+    leftImageFallbackUrl?: string | null;
+    rightImageUrl?: string | null;
+    label?: string | null;
+    useAccordion?: boolean;
+    rightContentText?: string | null;
+    testId?: string;
+    topSectionTestId?: string;
+    rightImageTestId?: string;
+    leftImageTestId?: string;
+    centerTextTestId?: string;
+    showLoader?: boolean;
+    showRightContentLoader?: boolean;
+    expand?: boolean;
+    preventFocus?: boolean;
+    leftContent?: Snippet;
+    centerContent?: Snippet;
+    rightContent?: Snippet;
+    bottomContent?: Snippet;
+    classes?: string;
+    role?: string;
+    ariaSelected?: boolean;
+    id?: string;
+};
+export type ListItemEventProperties = {
+    onleftimageclick?: (event: MouseEvent) => void;
+    onrightimageclick?: (event: MouseEvent) => void;
+    oncentertextclick?: (event: MouseEvent) => void;
+    onitemclick?: (event: MouseEvent) => void;
+    ontopsectionclick?: (event: MouseEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+};

package/dist/ListItem/properties.js

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

package/dist/Loader/Loader.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import type { LoaderProperties } from './properties';
+
+  let { testId, classes }: LoaderProperties = $props();
+</script>
+
+<div class="loader {classes ?? ''}" data-pw={testId}></div>
+
+<style>
+  .loader {
+    font-size: var(--loader-font-size, 10px);
+    text-indent: var(--loader-text-indent, -9999em);
+    width: var(--loader-width, 20px);
+    height: var(--loader-height, 20px);
+    border-radius: var(--loader-border-radius, 50%);
+    background: var(--loader-foreground, currentColor);
+    background: -moz-linear-gradient(
+      left,
+      var(--loader-foreground, currentColor) 10%,
+      var(--loader-foreground-end, transparent) 42%
+    );
+    background: -webkit-linear-gradient(
+      left,
+      var(--loader-foreground, currentColor) 10%,
+      var(--loader-foreground-end, transparent) 42%
+    );
+    background: -o-linear-gradient(
+      left,
+      var(--loader-foreground, currentColor) 10%,
+      var(--loader-foreground-end, transparent) 42%
+    );
+    background: -ms-linear-gradient(
+      left,
+      var(--loader-foreground, currentColor) 10%,
+      var(--loader-foreground-end, transparent) 42%
+    );
+    background: linear-gradient(
+      to right,
+      var(--loader-foreground, currentColor) 10%,
+      var(--loader-foreground-end, transparent) 42%
+    );
+    position: relative;
+    -webkit-animation: load3 1.4s infinite linear;
+    animation: load3 1.4s infinite linear;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+  .loader:before {
+    width: var(--loader-before-width, 10px);
+    height: var(--loader-before-height, 10px);
+    background: var(--loader-foreground, currentColor);
+    border-radius: var(--loader-before-border-radius, 100% 0 0 0);
+    position: var(--loader-before-position, absolute);
+    top: var(--loader-before-top, 0);
+    left: var(--loader-before-left, 0);
+    content: '';
+  }
+  .loader:after {
+    background: var(--loader-background, #ffffff);
+    width: var(--loader-after-width, 15px);
+    height: var(--loader-after-height, 15px);
+    border-radius: var(--loader-after-border-radius, 50%);
+    content: '';
+    position: var(--loader-after-position, absolute);
+    top: var(--loader-after-top, 50%);
+    left: var(--loader-after-left, 50%);
+    transform: translate(-50%, -50%);
+  }
+  @-webkit-keyframes load3 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes load3 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/dist/Loader/Loader.svelte.d.ts

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

package/dist/Loader/properties.d.ts

@@ -0,0 +1,4 @@
+export type LoaderProperties = {
+    testId?: string;
+    classes?: string;
+};

package/dist/Loader/properties.js

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

package/dist/LoadingDots/LoadingDots.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { LoadingDotsProperties } from './properties';
+
+  let { dots = 3, animation = 'bounce', testId, classes }: LoadingDotsProperties = $props();
+
+  let count = $derived(Math.max(1, Math.round(dots)));
+</script>
+
+<span class="loading-dots {classes ?? ''}" role="status" aria-label="Loading" data-pw={testId}>
+  {#each { length: count } as _, i (i)}
+    <span class="dot" class:pulse={animation === 'pulse'} style="--i: {i}"></span>
+  {/each}
+</span>
+
+<style>
+  .loading-dots {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--loading-dots-gap, 3px);
+    vertical-align: middle;
+    line-height: 1;
+  }
+
+  .dot {
+    display: block;
+    width: var(--loading-dots-size, 6px);
+    height: var(--loading-dots-size, 6px);
+    border-radius: var(--loading-dots-border-radius, 50%);
+    background-color: var(--loading-dots-color, currentColor);
+    animation: loading-dots-bounce var(--loading-dots-duration, 1.4s) ease-in-out infinite;
+    animation-delay: calc(var(--i) * var(--loading-dots-stagger, 0.16s));
+  }
+
+  .dot.pulse {
+    animation-name: loading-dots-pulse;
+  }
+
+  @keyframes loading-dots-bounce {
+    0%,
+    80%,
+    100% {
+      transform: translateY(0);
+    }
+    40% {
+      transform: translateY(var(--loading-dots-bounce-height, -6px));
+    }
+  }
+
+  @keyframes loading-dots-pulse {
+    0%,
+    80%,
+    100% {
+      opacity: var(--loading-dots-pulse-min-opacity, 0.2);
+    }
+    40% {
+      opacity: 1;
+    }
+  }
+</style>

package/dist/LoadingDots/LoadingDots.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const LoadingDots: import("svelte").Component<import("./properties").OptionalLoadingDotsProperties, {}, "">;
+type LoadingDots = ReturnType<typeof LoadingDots>;
+export default LoadingDots;

package/dist/LoadingDots/properties.d.ts

@@ -0,0 +1,8 @@
+export type LoadingDotsAnimation = 'bounce' | 'pulse';
+export type LoadingDotsProperties = OptionalLoadingDotsProperties;
+export type OptionalLoadingDotsProperties = {
+    dots?: number;
+    animation?: LoadingDotsAnimation;
+    testId?: string;
+    classes?: string;
+};

package/dist/LoadingDots/properties.js

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