@functionalcms/svelte-components 4.36.10 → 5.0.0-beta1

package/dist/components/presentation/Link.svelte

@@ -1,362 +0,0 @@
-<script lang="ts">
-	import { AlignItmes, ComponentSize, Justify, Orientation } from '../Styling.js';
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		children: Snippet;
-		href: string;
-		css?: string;
-		isPrimary?: boolean;
-		isDisabled?: boolean;
-		isBordered?: boolean;
-		isSecondary?: boolean;
-		idRounded?: boolean;
-		idPill?: boolean;
-		idBlock?: boolean;
-		idCapsule?: boolean;
-		idCircle?: boolean;
-		idGrouped?: boolean;
-		isCircle?: boolean;
-		isFlex?: boolean;
-		size?: ComponentSize;
-		justify?: Justify;
-		alignItems?: AlignItmes;
-		orientation?: Orientation;
-		role?: string;
-	}
-
-	let {
-		children,
-		href,
-		css = '',
-		isPrimary = false,
-		isDisabled = false,
-		isBordered = false,
-		isSecondary = false,
-		idRounded = false,
-		idPill = false,
-		idBlock = false,
-		idCapsule = false,
-		idCircle = false,
-		idGrouped = false,
-		isCircle = false,
-		isFlex = true,
-		size = ComponentSize.Normal,
-		justify = Justify.Center,
-		alignItems = AlignItmes.Center,
-		orientation = Orientation.Row,
-		role = 'link',
-		...restProps
-	}: Props = $props();
-
-	let isSmall = $derived(size === ComponentSize.Small);
-	let isLarge = $derived(size === ComponentSize.Large);
-
-	let classes = $derived(
-		cn(
-			isPrimary ? 'btn-primary' : '',
-			isDisabled ? 'disabled' : '',
-
-			isBordered ? 'btn-bordered' : '',
-			isSecondary ? 'btn-secondary' : '',
-
-			idRounded ? 'btn-rounded' : '',
-			idPill ? 'btn-pill' : '',
-			idBlock ? 'btn-block' : '',
-			idCapsule ? 'btn-capsule' : '',
-			idCircle ? 'btn-circle' : '',
-			idGrouped ? 'btn-grouped' : '',
-
-			isLarge ? 'btn-large' : '',
-			isSmall ? 'btn-small' : '',
-
-			isLarge && isCircle ? 'btn-large btn-circle-large' : '',
-			isSmall && idCircle ? 'btn-small btn-circle-small' : '',
-
-			isFlex ? `flex` : '',
-			isFlex ? `${orientation}` : '',
-			isFlex ? `${justify}` : '',
-			isFlex ? `${alignItems}` : '',
-
-			css ? css : 'btn'
-		)
-	);
-</script>
-
-<a class={classes} {href} {...restProps}>
-	{@render children()}
-</a>
-
-<style>.btn-base {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  user-select: none;
-  appearance: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  transition-property: all;
-  transition-duration: var(--timing-medium);
-}
-
-.btn {
-  /* TODO test this fallback override syntax is correct */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  user-select: none;
-  appearance: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  transition-property: all;
-  transition-duration: var(--timing-medium);
-}
-
-.btn-skin,
-.btn {
-  color: var(--btn-font-color, var(--dark));
-  background-color: var(--btn-bgcolor, var(--gray-light));
-  border-color: var(--btn-bgcolor, var(--gray-light));
-  /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
-  border-style: solid;
-  border-width: var(--btn-border-size, 1px);
-  font-family: var(--btn-font-family, var(--font-family-body));
-  font-weight: var(--btn-font-weight, 400);
-  font-size: var(--btn-font-size, 1rem);
-  /* this can be overriden, but it might mess with the balance of the button heights across variants */
-  line-height: var(--line-height, var(--fluid-20, 1.25rem));
-  padding-block-start: var(--vertical-pad, 0.5rem);
-  padding-block-end: var(--vertical-pad, 0.5rem);
-  padding-inline-start: var(--side-padding, 0.75rem);
-  padding-inline-end: var(--side-padding, 0.75rem);
-  text-decoration: none;
-  text-align: center;
-  outline: none;
-}
-
-.btn:visited {
-  color: var(--btn-font-color, var(--dark));
-}
-
-.btn:hover {
-  opacity: 85%;
-  text-decoration: none;
-}
-
-.btn:active {
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
-  text-decoration: none;
-  transition-duration: 0s;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.btn:focus {
-  box-shadow: 0 0 0 var(--focus-ring-outline-width) var(--focus-ring-color);
-  /* Needed for High Contrast mode */
-  outline: var(--focus-ring-outline-width) var(--focus-ring-outline-style) var(--focus-ring-outline-color);
-  transition: box-shadow var(--timing-fast) ease-out;
-  /* In order for the focused element's box-shadow to appear above its siblings we need to
-  establish a new stacking context: https://stackoverflow.com/a/28042700 */
-  isolation: isolate;
-}
-
-/*
-* Disabled State
-*
-* The disabled state uses the class .disabled, is-disabled,
-* and the form attribute disabled="disabled".
-* The use of !important is only added because this is a state
-* that must be applied to all buttons when in a disabled state.
-*/
-.btn.disabled,
-.btn:disabled {
-  top: 0 !important;
-  background: var(--btn-disabled-bg, var(--gray-mid-dark)) !important;
-  text-shadow: 0 1px 1px rgb(255, 255, 255) !important;
-  /* primary, secondary, natural, all look same when disabled; and we don't want to
-  have an inadvertant looking blue primary border when disabled so it's transparent */
-  border-color: transparent;
-  color: var(--btn-disabled-color, var(--gray-dark)) !important;
-  cursor: default !important;
-  appearance: none !important;
-  box-shadow: none !important;
-  opacity: 80% !important;
-}
-
-.btn-primary {
-  background-color: var(--btn-primary, var(--primary));
-  border-color: var(--btn-primary, var(--primary));
-  color: var(--btn-primary-color, var(--light));
-}
-
-/* Border and font is primary. When hovered, we invert with primary background and white font */
-.btn-primary.btn-bordered {
-  color: var(--btn-primary, var(--primary));
-}
-
-.btn-primary.btn-bordered:hover,
-.btn-primary.btn-bordered:focus {
-  background-color: var(--btn-primary, var(--primary));
-  color: var(--btn-primary-color, var(--light));
-}
-
-.btn-primary:visited {
-  color: var(--btn-primary-color, var(--light));
-}
-
-.btn-secondary {
-  background-color: var(--btn-secondary, var(--secondary));
-  border-color: var(--btn-secondary, var(--secondary));
-  color: var(--btn-secondary-color, var(--light));
-}
-
-/* Border and font is secondary. When hovered, we invert with secondary background and white font */
-.btn-secondary.btn-bordered {
-  color: var(--btn-secondary, var(--secondary));
-}
-
-.btn-secondary.btn-bordered:hover,
-.btn-secondary.btn-bordered:focus {
-  background-color: var(--btn-secondary, var(--secondary));
-  color: var(--btn-secondary-color, var(--light));
-}
-
-.btn-secondary:visited {
-  color: var(--btn-secondary-color, var(--light));
-}
-
-/*
-/**
-  * Border Buttons
-  */
-.btn-bordered {
-  border-width: 1px;
-  background: transparent;
-}
-
-/**
-  * Sizes
-  */
-.btn-large {
-  font-size: calc(var(--btn-font-size, 1rem) + 0.25rem);
-  height: 3rem;
-  line-height: 3rem;
-  padding: 0 3rem;
-}
-
-.btn-small {
-  font-size: calc(var(--btn-font-size, 1rem) - 0.25rem);
-  height: 2rem;
-  line-height: 2rem;
-  padding: 0 2rem;
-}
-
-/**
-  * Rounded
-  */
-.btn-rounded {
-  border-radius: var(--btn-radius, var(--radius, 0.25rem));
-}
-
-.btn-pill {
-  border-radius: 200px;
-}
-
-/*
-  * Size Adjustment for equal height & width buttons
-  *
-  * Remove padding
-  */
-.btn-circle {
-  border-radius: 100%;
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0 !important;
-}
-
-.btn-circle-large {
-  font-size: calc(var(--btn-font-size, 1rem) + 0.25rem);
-  width: 3rem;
-  height: 3rem;
-}
-
-.btn-circle-small {
-  font-size: calc(var(--btn-font-size, 1rem) - 0.25rem);
-  width: 2rem;
-  height: 2rem;
-}
-
-/**
- * Button Block (stacked)
- */
-.btn-block {
-  width: 100%;
-}
-
-/* This is a utility class used if you literally want to stack block buttons one after another.
-Apply this class to the nth-of-type(2) onwards to ensure the borders line up properly. */
-.btn-block-following {
-  margin-block-start: -1px;
-}
-
-.btn-grouped {
-  border-radius: var(--btn-radius, var(--radius, 0.25rem));
-}
-
-.btn-grouped:not(:last-child) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  margin-inline-end: -1px;
-}
-
-.btn-grouped:not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.btn-capsule {
-  --padding-side: calc(var(--side-padding, 0.75rem) * 1.5);
-  border-radius: var(--radius-capsule);
-  padding-inline-start: var(--padding-side);
-  padding-inline-end: var(--padding-side);
-}
-
-@media (prefers-reduced-motion), (update: slow) {
-  .btn,
-  .btn:focus {
-    transition-duration: 0.001ms !important;
-  }
-}
-/**
- * Invisible buttons. Generally used for a Cancel or icon button that behaves like a button,
- * semantically and for a11y, but, does so without all the typical "button chrome" behind it.
- */
-:is(.btn-link, .btn-blank) {
-  font-family: var(--btn-font-family, var(--font-family-body));
-  font-size: var(--btn-font-size, 1rem);
-  background-color: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  transition: none;
-}
-
-/* Since blank buttons can be used for things like input addons we don't want to go crazy
-on the side padding. As such, these have a good bit less then regular buttons. */
-.btn-blank {
-  --btn-blank-side-padding: var(--btn-blank-side-padding, 0.25rem);
-  padding-inline-start: var(--btn-blank-side-padding);
-  padding-inline-end: var(--btn-blank-side-padding);
-}
-
-/* A button blank with link color text */
-.btn-link {
-  color: var(--btn-primary, var(--primary));
-}
-
-.btn-link:hover {
-  cursor: pointer;
-}</style>

package/dist/components/presentation/Link.svelte.d.ts

@@ -1,27 +0,0 @@
-import { AlignItmes, ComponentSize, Justify, Orientation } from '../Styling.js';
-import type { Snippet } from 'svelte';
-interface Props {
-    children: Snippet;
-    href: string;
-    css?: string;
-    isPrimary?: boolean;
-    isDisabled?: boolean;
-    isBordered?: boolean;
-    isSecondary?: boolean;
-    idRounded?: boolean;
-    idPill?: boolean;
-    idBlock?: boolean;
-    idCapsule?: boolean;
-    idCircle?: boolean;
-    idGrouped?: boolean;
-    isCircle?: boolean;
-    isFlex?: boolean;
-    size?: ComponentSize;
-    justify?: Justify;
-    alignItems?: AlignItmes;
-    orientation?: Orientation;
-    role?: string;
-}
-declare const Link: import("svelte").Component<Props, {}, "">;
-type Link = ReturnType<typeof Link>;
-export default Link;

package/dist/components/utils.d.ts

@@ -1,3 +0,0 @@
-export interface Component {
-    css: string;
-}

package/dist/components/utils.js

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

package/dist/index.server.d.ts

@@ -1,11 +0,0 @@
-export { authenticationHandle } from './auth/authenticationHandle.ts';
-export { default as authorizationHandle } from './auth/authorizationHandle.ts';
-export { default as errorHandler } from './auth/errorHandle.ts';
-export { redisSessionProvider } from './auth/redisSessionProvider.ts';
-export { machineAuthenticationProvider } from './auth/machineAuthenticationProvider.ts';
-export { userAuthenticationProvider } from './auth/userAuthenticationProvider.ts';
-export { getBlobService, getCommunicationService, getDataService, getTemplateService, getWebsiteService, getAIService, getAuthService, getFileService, } from './server-side/getServices.ts';
-export type { RedirectResponse } from './auth/RedirectResponse.ts';
-export { createMachineTokenApprovedLocals } from './auth/getMachineAccessToken.ts';
-export { isHuman } from './components/form/AntiBot.ts';
-export { default as getRedirectPipeline } from './server-side/getRedirectPipeline.js';

package/dist/index.server.js

@@ -1,10 +0,0 @@
-export { authenticationHandle } from './auth/authenticationHandle.ts';
-export { default as authorizationHandle } from './auth/authorizationHandle.ts';
-export { default as errorHandler } from './auth/errorHandle.ts';
-export { redisSessionProvider } from './auth/redisSessionProvider.ts';
-export { machineAuthenticationProvider } from './auth/machineAuthenticationProvider.ts';
-export { userAuthenticationProvider } from './auth/userAuthenticationProvider.ts';
-export { getBlobService, getCommunicationService, getDataService, getTemplateService, getWebsiteService, getAIService, getAuthService, getFileService, } from './server-side/getServices.ts';
-export { createMachineTokenApprovedLocals } from './auth/getMachineAccessToken.ts';
-export { isHuman } from './components/form/AntiBot.ts';
-export { default as getRedirectPipeline } from './server-side/getRedirectPipeline.js';

package/dist/server-side/getRedirectPipeline.d.ts

@@ -1,6 +0,0 @@
-export interface Redirection {
-    pathname: string;
-    redirectTo: string;
-}
-declare const getRedirectPipeline: (redirections: Array<Redirection>) => ({ event, resolve }: any) => Promise<any>;
-export default getRedirectPipeline;

package/dist/utils.d.ts

@@ -1 +0,0 @@
-export declare function cn(...params: string[]): string;

package/dist/utils.js

@@ -1,3 +0,0 @@
-export function cn(...params) {
-    return Array.from(params).flat(2).filter((c) => c).join(' ');
-}