@aws-amplify/ui-svelte 0.0.0-next-b4d0af6-20220107001542 → 0.0.0-next-23d2233-20251017111356

package/dist/components/SignIn.svelte

@@ -1,69 +0,0 @@
-<script >import AmplifyFormField from './primitives/AmplifyFormField.svelte';
-import AmplifyError from './primitives/AmplifyError.svelte';
-import UserNameAlias from './UserNameAlias.svelte';
-import AmplifyButton from './primitives/AmplifyButton.svelte';
-import { translate } from '@aws-amplify/ui';
-import { updateForm, submitForm, isPending, error, toResetPassword, } from './authStore';
-const forgotPasswordText = translate('Forgot your password? ');
-const signInButtonText = translate('Sign in');
-const signingButtonText = translate('Signing in');
-function onInput(event) {
-    event.preventDefault();
-    const { name, value } = event.target;
-    updateForm({ name, value });
-}
-function onSubmit(event) {
-    event.preventDefault();
-    submitForm();
-}
-</script>
-
-<div data-amplify-container>
-  <form
-    data-amplify-form
-    on:submit|preventDefault={onSubmit}
-    on:input={onInput}
-  >
-    <fieldset
-      class="amplify-flex"
-      style="flex-direction: column"
-      data-amplify-fieldset
-      disabled={$isPending}
-    >
-      <UserNameAlias />
-      <AmplifyFormField
-        data-amplify-password
-        name="password"
-        type="password"
-        autocomplete="current-password"
-      />
-      <AmplifyButton
-        disabled={$isPending}
-        variation="primary"
-        fullWidth="true"
-        type="submit"
-      >
-        {$isPending ? signingButtonText : signInButtonText}
-      </AmplifyButton>
-
-      {#if $error}
-        <AmplifyError>
-          {$error}
-        </AmplifyError>
-      {/if}
-    </fieldset>
-  </form>
-
-  <div data-amplify-footer>
-    <AmplifyButton
-      amplify-button
-      fontWeight="normal"
-      data-size="small"
-      variation="link"
-      fullWidth="true"
-      on:click={toResetPassword}
-    >
-      {forgotPasswordText}
-    </AmplifyButton>
-  </div>
-</div>

package/dist/components/SignIn.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {};
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type SignInProps = typeof __propDef.props;
-export declare type SignInEvents = typeof __propDef.events;
-export declare type SignInSlots = typeof __propDef.slots;
-export default class SignIn extends SvelteComponentTyped<SignInProps, SignInEvents, SignInSlots> {
-}
-export {};

package/dist/components/UserNameAlias.svelte

@@ -1,29 +0,0 @@
-<script >import AmplifyFormField from './primitives/AmplifyFormField.svelte';
-import { onMount } from 'svelte';
-import { authState } from './authStore';
-import { getAliasInfoFromContext } from '@aws-amplify/ui';
-export let name = 'username';
-export let disabled = false;
-export let initialValue = '';
-export let required = true;
-let label;
-let type;
-let error;
-let placeholder;
-onMount(() => {
-    const { label, type } = getAliasInfoFromContext($authState.context);
-    placeholder = label;
-});
-</script>
-
-<AmplifyFormField
-  data-amplify-usernamealias
-  {name}
-  {label}
-  {type}
-  {placeholder}
-  {initialValue}
-  {disabled}
-  {required}
-  autocomplete="username"
-/>

package/dist/components/UserNameAlias.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        name?: string;
-        disabled?: boolean;
-        initialValue?: string;
-        required?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type UserNameAliasProps = typeof __propDef.props;
-export declare type UserNameAliasEvents = typeof __propDef.events;
-export declare type UserNameAliasSlots = typeof __propDef.slots;
-export default class UserNameAlias extends SvelteComponentTyped<UserNameAliasProps, UserNameAliasEvents, UserNameAliasSlots> {
-}
-export {};

package/dist/components/authStore.d.ts

@@ -1,20 +0,0 @@
-export declare const error: import("svelte/store").Writable<any>;
-export declare const route: import("svelte/store").Writable<any>;
-export declare const isPending: import("svelte/store").Writable<any>;
-export declare const hasValidationErrors: import("svelte/store").Writable<any>;
-export declare const user: import("svelte/store").Writable<any>;
-export declare const validationErrors: import("svelte/store").Writable<any>;
-export declare const codeDeliveryDetails: import("svelte/store").Writable<any>;
-/** @deprecated For internal use only */
-export declare const authState: import("svelte/store").Writable<any>;
-export declare function setupMachine(initialState: any, loginMechanisms: any, services: any, signUpAttributes: any, socialProviders: any): import("xstate").Subscription;
-export declare function updateForm(...args: any[]): void;
-export declare function updateBlur(...args: any[]): void;
-export declare function resendCode(...args: any[]): void;
-export declare function signOut(...args: any[]): void;
-export declare function submitForm(...args: any[]): void;
-export declare function toFederatedSignIn(...args: any[]): void;
-export declare function toResetPassword(...args: any[]): void;
-export declare function toSignIn(...args: any[]): void;
-export declare function toSignUp(...args: any[]): void;
-export declare function skipVerification(...args: any[]): void;

package/dist/components/authStore.js

@@ -1,101 +0,0 @@
-import { createAuthenticatorMachine, getSendEventAliases, translate, getServiceContextFacade, } from '@aws-amplify/ui';
-import { interpret } from 'xstate';
-import { writable, get } from 'svelte/store';
-let _facade = writable(null);
-export const error = writable(null);
-export const route = writable(null);
-export const isPending = writable(null);
-export const hasValidationErrors = writable(null);
-export const user = writable(null);
-export const validationErrors = writable(null);
-export const codeDeliveryDetails = writable(null);
-const _sendEventAliases = writable(null);
-const contextFacade = getServiceContextFacade;
-/** @deprecated For internal use only */
-export const authState = writable(null);
-export function setupMachine(initialState, loginMechanisms, services, signUpAttributes, socialProviders) {
-    const machine = createAuthenticatorMachine({
-        initialState,
-        loginMechanisms,
-        services,
-        signUpAttributes,
-        socialProviders,
-    });
-    const authService = interpret(machine, {
-        devTools: process.env.NODE_ENV === 'development',
-    }).start();
-    const subscription = authService.subscribe((state) => {
-        authState.update(() => state);
-        _facade.update(() => contextFacade(state));
-        setError();
-        setRoute();
-        setHasValidationErrors();
-        setCodeDeliveryDetails();
-        setIsPending();
-        setUser();
-        setValidationErrors();
-    });
-    _sendEventAliases.set(getSendEventAliases(authService.send));
-    const _authService = authService;
-    return subscription;
-}
-/**
- * Context facades
- */
-function setError() {
-    error.set(translate(get(_facade).error));
-}
-function setRoute() {
-    route.set(get(_facade).route);
-}
-function setHasValidationErrors() {
-    hasValidationErrors.set(get(_facade).hasValidationErrors);
-}
-function setIsPending() {
-    isPending.set(get(_facade).isPending);
-}
-function setUser() {
-    user.set(get(_facade).user);
-}
-function setValidationErrors() {
-    validationErrors.set(get(_facade).validationErrors);
-}
-function setCodeDeliveryDetails() {
-    codeDeliveryDetails.set(get(_facade).codeDeliveryDetails);
-}
-// /**
-//  * Service facades
-//  */
-export function updateForm(...args) {
-    return get(_sendEventAliases).updateForm(...args);
-}
-export function updateBlur(...args) {
-    return get(_sendEventAliases).updateBlur(...args);
-}
-export function resendCode(...args) {
-    return get(_sendEventAliases).resendCode(...args);
-}
-export function signOut(...args) {
-    return get(_sendEventAliases).signOut(...args);
-}
-export function submitForm(...args) {
-    return get(_sendEventAliases).submitForm(...args);
-}
-// /**
-//  * Transition facades
-//  */
-export function toFederatedSignIn(...args) {
-    return get(_sendEventAliases).toFederatedSignIn(...args);
-}
-export function toResetPassword(...args) {
-    return get(_sendEventAliases).toResetPassword(...args);
-}
-export function toSignIn(...args) {
-    return get(_sendEventAliases).toSignIn(...args);
-}
-export function toSignUp(...args) {
-    return get(_sendEventAliases).toSignUp(...args);
-}
-export function skipVerification(...args) {
-    return get(_sendEventAliases).skipVerification(...args);
-}

package/dist/components/primitives/AmplifyButton.svelte

@@ -1,23 +0,0 @@
-<script >import { createEventDispatcher } from 'svelte';
-export let type = 'button';
-export let fullWidth = false;
-export let size = 'medium';
-export let variation = 'default';
-export let fontWeight = 'normal';
-const dispatch = createEventDispatcher();
-</script>
-
-<button
-  {...$$restProps}
-  on:click={() => dispatch('click')}
-  class={`amplify-button ${$$props.class ?? ''}`}
-  {type}
-  style="font-weight: {fontWeight} "
-  data-fullwidth={fullWidth}
-  data-size={size}
-  data-fontWeight={fontWeight}
-  data-variation={variation}
-  data-amplify-button=""
->
-  <slot />
-</button>

package/dist/components/primitives/AmplifyButton.svelte.d.ts

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        type?: 'submit' | 'button';
-        fullWidth?: boolean | string;
-        size?: 'small' | 'medium' | 'large';
-        variation?: 'primary' | 'default' | 'link';
-        fontWeight?: 'normal' | 'bold' | 'lighter';
-    };
-    events: {
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type AmplifyButtonProps = typeof __propDef.props;
-export declare type AmplifyButtonEvents = typeof __propDef.events;
-export declare type AmplifyButtonSlots = typeof __propDef.slots;
-export default class AmplifyButton extends SvelteComponentTyped<AmplifyButtonProps, AmplifyButtonEvents, AmplifyButtonSlots> {
-}
-export {};

package/dist/components/primitives/AmplifyError.svelte

@@ -1,46 +0,0 @@
-<script >import AmplifyButton from './AmplifyButton.svelte';
-let isVisible = true;
-function close() {
-    isVisible = false;
-}
-</script>
-
-{#if isVisible}
-	<div
-		class="amplify-flex amplify-alert"
-		data-variation="error"
-		style="align-items: center; justify-content: space-between"
-		role="alert"
-	>
-		<div class="amplify-flex" style="align-items: center">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="amplify-icon"
-				viewBox="0 0 24 24"
-				fill="currentColor"
-			>
-				<path
-					d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
-				/>
-			</svg>
-			<div><slot /></div>
-		</div>
-		<AmplifyButton
-			class="amplify-field-group__control"
-			variation="link"
-			fullWidth={false}
-			on:click={close}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="amplify-icon"
-				viewBox="0 0 24 24"
-				fill="currentColor"
-			>
-				<path
-					d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-				/>
-			</svg>
-		</AmplifyButton>
-	</div>
-{/if}

package/dist/components/primitives/AmplifyError.svelte.d.ts

@@ -1,16 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {};
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type AmplifyErrorProps = typeof __propDef.props;
-export declare type AmplifyErrorEvents = typeof __propDef.events;
-export declare type AmplifyErrorSlots = typeof __propDef.slots;
-export default class AmplifyError extends SvelteComponentTyped<AmplifyErrorProps, AmplifyErrorEvents, AmplifyErrorSlots> {
-}
-export {};

package/dist/components/primitives/AmplifyFormField.svelte

@@ -1,121 +0,0 @@
-<script >import AmplifyPhoneNumberField from './AmplifyPhoneNumberField.svelte';
-import AmplifyPasswordField from './AmplifyPasswordField.svelte';
-import AmplifyTextField from './AmplifyTextField.svelte';
-import AmplifyError from './AmplifyError.svelte';
-import { authState, updateForm, updateBlur } from '../authStore';
-import { authInputAttributes, getActorContext, translate, } from '@aws-amplify/ui';
-import { onMount } from 'svelte';
-export let name;
-export let type;
-export let required = true;
-export let placeholder = '';
-export let label = '';
-export let initialValue = '';
-export let disabled = false;
-export let autocomplete = '';
-export let labelHidden = true;
-const getAttributeMap = () => authInputAttributes;
-let defaultCountryCode;
-onMount(() => {
-    if (isPhoneField) {
-        const state = $authState;
-        const { country_code } = getActorContext(state);
-        defaultCountryCode = country_code;
-        // TODO: remove this side-effect
-        updateForm({
-            name: 'country_code',
-            value: country_code,
-        });
-    }
-});
-const attributeMap = getAttributeMap();
-let error;
-$: {
-    const formContext = getActorContext($authState);
-    const { validationError } = formContext;
-    error = translate(validationError[name]);
-}
-function onBlur($event) {
-    let { name } = $event?.detail?.target;
-    updateBlur({ name });
-}
-let inferLabel;
-$: {
-    const myLabel = label || attributeMap[name]?.label;
-    inferLabel = translate(myLabel);
-}
-let inferPlaceholder;
-$: {
-    const myPlaceholder = placeholder || attributeMap[name]?.placeholder || inferLabel;
-    inferPlaceholder = translate(myPlaceholder);
-}
-// infers what the `type` of underlying input element should be.
-let inferType;
-$: {
-    inferType = type ?? attributeMap[name]?.type ?? 'text';
-}
-let inferAutocomplete;
-$: {
-    inferAutocomplete = autocomplete || attributeMap[name]?.autocomplete;
-}
-// TODO(enhancement): use enum to differentiate special field types
-let isPasswordField;
-$: {
-    isPasswordField = inferType === 'password';
-}
-let isPhoneField;
-isPhoneField = inferType === 'tel';
-</script>
-
-<div class="amplify-flex amplify-field" style="flex-direction: column">
-  <!-- Country code field -->
-  {#if isPhoneField}
-    <AmplifyPhoneNumberField
-      {defaultCountryCode}
-      type={inferType}
-      {name}
-      label={inferLabel}
-      placeholder={inferPlaceholder}
-      {required}
-      {initialValue}
-      {disabled}
-      {labelHidden}
-      autocomplete={inferAutocomplete}
-    />
-  {/if}
-
-  {#if isPasswordField}
-    <AmplifyPasswordField
-      {...$$restProps}
-      {name}
-      label={inferLabel}
-      placeholder={inferPlaceholder}
-      {required}
-      {initialValue}
-      {disabled}
-      {labelHidden}
-      autocomplete={inferAutocomplete}
-    />
-  {/if}
-
-  {#if !isPasswordField && !isPhoneField}
-    <AmplifyTextField
-      on:blur={onBlur}
-      type={inferType}
-      {name}
-      label={inferLabel}
-      placeholder={inferPlaceholder}
-      {required}
-      {initialValue}
-      {disabled}
-      {labelHidden}
-      autocomplete={inferAutocomplete}
-    />
-  {/if}
-
-  {#if error}
-    <AmplifyError>
-      {error}
-    </AmplifyError>
-  {/if}
-</div>

package/dist/components/primitives/AmplifyFormField.svelte.d.ts

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        name: string;
-        type: string;
-        required?: boolean;
-        placeholder?: string;
-        label?: string;
-        initialValue?: string;
-        disabled?: boolean;
-        autocomplete?: string;
-        labelHidden?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type AmplifyFormFieldProps = typeof __propDef.props;
-export declare type AmplifyFormFieldEvents = typeof __propDef.events;
-export declare type AmplifyFormFieldSlots = typeof __propDef.slots;
-export default class AmplifyFormField extends SvelteComponentTyped<AmplifyFormFieldProps, AmplifyFormFieldEvents, AmplifyFormFieldSlots> {
-}
-export {};

package/dist/components/primitives/AmplifyFormSelect.svelte

@@ -1,38 +0,0 @@
-<script >export let items;
-export let name;
-export let label;
-export let id;
-export let defaultValue;
-</script>
-
-<label class="amplify-label sr-only" for={id}>
-	{label}
-</label>
-<div class="amplify-select__wrapper">
-	<select
-		class="amplify-select amplify-field-group__control"
-		autocomplete="tel-country-code"
-		{id}
-		{name}
-	>
-		{#each items as item}
-			<option value={item} selected={item === defaultValue}>
-				{item}
-			</option>
-		{/each}
-	</select>
-	<div
-		class="amplify-flex amplify-select__icon-wrapper"
-		style="align-items: center; justify-content: center"
-	>
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			class="amplify-icon"
-			viewBox="0 0 24 24"
-			data-size="large"
-			fill="currentColor"
-		>
-			<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
-		</svg>
-	</div>
-</div>

package/dist/components/primitives/AmplifyFormSelect.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        items: string[];
-        name: string;
-        label: string;
-        id: string;
-        defaultValue: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type AmplifyFormSelectProps = typeof __propDef.props;
-export declare type AmplifyFormSelectEvents = typeof __propDef.events;
-export declare type AmplifyFormSelectSlots = typeof __propDef.slots;
-export default class AmplifyFormSelect extends SvelteComponentTyped<AmplifyFormSelectProps, AmplifyFormSelectEvents, AmplifyFormSelectSlots> {
-}
-export {};

package/dist/components/primitives/AmplifyPasswordField.svelte

@@ -1,75 +0,0 @@
-<script >import AmplifyButton from './AmplifyButton.svelte';
-import { nanoid } from 'nanoid';
-import { translate } from '@aws-amplify/ui';
-export let autocomplete = 'new-password';
-export let disabled = false;
-export let fieldId = `amplify-field-${nanoid(12)}`;
-export let initialValue = '';
-export let label = '';
-export let name;
-export let placeholder = '';
-export let required = true;
-export let labelHidden = false;
-export let type = 'password';
-let showPassword = false;
-let showPasswordButtonlabel = translate('Show password');
-function togglePasswordText() {
-    showPassword = !showPassword;
-    showPasswordButtonlabel = showPassword
-        ? translate('Show password')
-        : translate('Hide password');
-    type = showPassword ? 'text' : 'password';
-}
-</script>
-
-<label class="amplify-label {labelHidden ? 'sr-only' : ''}" for={fieldId}>
-	{label}
-</label>
-<div class="amplify-flex amplify-field-group">
-	<input
-		{...$$restProps}
-		class={`amplify-input amplify-field-group__control ${$$props.class ?? ''}`}
-		id={fieldId}
-		{type}
-		{name}
-		{placeholder}
-		{required}
-		value={initialValue}
-		{disabled}
-		{autocomplete}
-	/>
-	<div class="amplify-field-group__outer-end">
-		<AmplifyButton
-			amplify-button
-			aria-label={showPasswordButtonlabel}
-			class="amplify-field-group__control amplify-field__show-password"
-			on:click={togglePasswordText}
-		>
-			{#if !showPassword}
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="currentColor"
-					viewBox="0 0 24 24"
-					class="amplify-icon"
-				>
-					<path
-						d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
-					/>
-				</svg>
-			{/if}
-			{#if showPassword}
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="currentColor"
-					viewBox="0 0 24 24"
-					class="amplify-icon"
-				>
-					<path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none" />
-					<path
-						d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
-					/>
-				</svg>
-			{/if}
-		</AmplifyButton>
-	</div>
-</div>

package/dist/components/primitives/AmplifyPasswordField.svelte.d.ts

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        autocomplete?: string;
-        disabled?: boolean;
-        fieldId?: string;
-        initialValue?: string;
-        label?: string;
-        name: string;
-        placeholder?: string;
-        required?: boolean;
-        labelHidden?: boolean;
-        type?: 'text' | 'password';
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type AmplifyPasswordFieldProps = typeof __propDef.props;
-export declare type AmplifyPasswordFieldEvents = typeof __propDef.events;
-export declare type AmplifyPasswordFieldSlots = typeof __propDef.slots;
-export default class AmplifyPasswordField extends SvelteComponentTyped<AmplifyPasswordFieldProps, AmplifyPasswordFieldEvents, AmplifyPasswordFieldSlots> {
-}
-export {};