@aws-amplify/ui-svelte 0.0.0-next-9a4f1cf-20220113211745 → 0.0.0-next-23d2233-20251017111356

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 {};

package/dist/components/primitives/AmplifyPhoneNumberField.svelte

@@ -1,50 +0,0 @@
-<script >import AmplifyFormSelect from './AmplifyFormSelect.svelte';
-import { nanoid } from 'nanoid';
-import { countryDialCodes } from '@aws-amplify/ui';
-export let autocomplete = 'new-password';
-export let disabled = false;
-export let defaultCountryCode;
-export let selectFieldId = `amplify-field-${nanoid(12)}`;
-export let textFieldId = `amplify-field-${nanoid(12)}`;
-export let initialValue = '';
-export let label = '';
-export let name;
-export let placeholder = '';
-export let required = true;
-export let type;
-export let labelHidden = false;
-</script>
-
-<label class="amplify-label {labelHidden ? 'sr-only' : ''}" for={textFieldId}>
-	{label}
-</label>
-<div class="amplify-flex amplify-phonenumberfield" amplify-field-group style="gap: 0px">
-	<div class="amplify-field-group__outer-start">
-		<div
-			class="
-        amplify-flex amplify-field amplify-selectfield amplify-countrycodeselect
-      "
-			style="flex-direction: column"
-		>
-			<AmplifyFormSelect
-				name="country_code"
-				label="Country Code"
-				id={selectFieldId}
-				items={countryDialCodes}
-				defaultValue={defaultCountryCode}
-			/>
-		</div>
-	</div>
-
-	<input
-		class="amplify-input"
-		id={textFieldId}
-		{type}
-		{name}
-		{placeholder}
-		{required}
-		value={initialValue}
-		{disabled}
-		{autocomplete}
-	/>
-</div>

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

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        autocomplete?: string;
-        disabled?: boolean;
-        defaultCountryCode: string;
-        selectFieldId?: string;
-        textFieldId?: string;
-        initialValue?: string;
-        label?: string;
-        name: string;
-        placeholder?: string;
-        required?: boolean;
-        type: string;
-        labelHidden?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type AmplifyPhoneNumberFieldProps = typeof __propDef.props;
-export declare type AmplifyPhoneNumberFieldEvents = typeof __propDef.events;
-export declare type AmplifyPhoneNumberFieldSlots = typeof __propDef.slots;
-export default class AmplifyPhoneNumberField extends SvelteComponentTyped<AmplifyPhoneNumberFieldProps, AmplifyPhoneNumberFieldEvents, AmplifyPhoneNumberFieldSlots> {
-}
-export {};

package/dist/components/primitives/AmplifyTabItem.svelte

@@ -1,19 +0,0 @@
-<script >import 'svelte';
-export let active = false;
-export let id;
-export let labelledById;
-export let tabIndex;
-</script>
-
-<div
-  data-orientation="horizontal"
-  role="tabpanel"
-  {id}
-  aria-labelledby={labelledById}
-  data-state={active ? 'active' : 'inactive'}
-  tabindex={tabIndex}
->
-  {#if active}
-    <slot />
-  {/if}
-</div>

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

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        active?: boolean;
-        id: string;
-        labelledById: string;
-        tabIndex: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type AmplifyTabItemProps = typeof __propDef.props;
-export declare type AmplifyTabItemEvents = typeof __propDef.events;
-export declare type AmplifyTabItemSlots = typeof __propDef.slots;
-export default class AmplifyTabItem extends SvelteComponentTyped<AmplifyTabItemProps, AmplifyTabItemEvents, AmplifyTabItemSlots> {
-}
-export {};

package/dist/components/primitives/AmplifyTabs.svelte

@@ -1,72 +0,0 @@
-<script >import SignIn from '../SignIn.svelte';
-import SignUp from '../SignUp.svelte';
-import { toSignIn, toSignUp } from '../authStore';
-//tab list
-let tabs = [
-    {
-        active: true,
-        labelledById: '1',
-        id: '1',
-        title: 'Sign In',
-        tabIndex: 0,
-        component: SignIn,
-    },
-    {
-        active: false,
-        labelledById: '2',
-        id: '2',
-        title: 'Sign Up',
-        tabIndex: -1,
-        component: SignUp,
-    },
-];
-function handleTabClick(e) {
-    if (e.id === '1') {
-        toSignIn();
-    }
-    else {
-        toSignUp();
-    }
-    tabs = tabs.map((tab) => {
-        if (tab.id === e.id) {
-            return { ...tab, active: true };
-        }
-        else {
-            return { ...tab, active: false };
-        }
-    });
-}
-</script>
-
-<div
-  tabindex="0"
-  aria-orientation="horizontal"
-  data-orientation="horizontal"
-  role="tablist"
-  style="outline: none"
->
-  <div
-    class="amplify-flex amplify-tabs"
-    data-indicator-position="top"
-    style="gap: 0px; justify-content: center"
-  >
-    {#each tabs as tab}
-      <div
-        class="amplify-tabs-item"
-        data-spacing="equal"
-        data-orientation="horizontal"
-        role="tab"
-        id={tab.labelledById}
-        tabindex={tab.active ? 0 : 1}
-        aria-selected={tab.active}
-        aria-controls={tab.id}
-        data-state={tab.active ? 'active' : 'inactive'}
-        on:click={() => handleTabClick(tab)}
-      >
-        {tab.title}
-      </div>
-    {/each}
-  </div>
-</div>
-
-<slot {tabs} />

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

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import SignIn from '../SignIn.svelte';
-declare const __propDef: {
-    props: {};
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            tabs: {
-                active: boolean;
-                labelledById: string;
-                id: string;
-                title: string;
-                tabIndex: number;
-                component: typeof SignIn;
-            }[];
-        };
-    };
-};
-export declare type AmplifyTabsProps = typeof __propDef.props;
-export declare type AmplifyTabsEvents = typeof __propDef.events;
-export declare type AmplifyTabsSlots = typeof __propDef.slots;
-export default class AmplifyTabs extends SvelteComponentTyped<AmplifyTabsProps, AmplifyTabsEvents, AmplifyTabsSlots> {
-}
-export {};

package/dist/components/primitives/AmplifyTextField.svelte

@@ -1,31 +0,0 @@
-<script >import { createEventDispatcher } from 'svelte';
-import { nanoid } from 'nanoid';
-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 type;
-export let labelHidden = false;
-const dispatch = createEventDispatcher();
-</script>
-
-<label class="amplify-label {labelHidden ? 'sr-only' : ''}" for={fieldId}>
-	{label}
-</label>
-<input
-	{...$$restProps}
-	on:blur={($event) => dispatch('blur', $event)}
-	class={`amplify-input ${$$props.class ?? ''}`}
-	id={fieldId}
-	{type}
-	{name}
-	{placeholder}
-	{required}
-	value={initialValue}
-	{disabled}
-	{autocomplete}
-/>

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

@@ -1,28 +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;
-        type: string;
-        labelHidden?: boolean;
-    };
-    events: {
-        blur: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type AmplifyTextFieldProps = typeof __propDef.props;
-export declare type AmplifyTextFieldEvents = typeof __propDef.events;
-export declare type AmplifyTextFieldSlots = typeof __propDef.slots;
-export default class AmplifyTextField extends SvelteComponentTyped<AmplifyTextFieldProps, AmplifyTextFieldEvents, AmplifyTextFieldSlots> {
-}
-export {};

package/dist/package.json

@@ -1,69 +0,0 @@
-{
-  "name": "@aws-amplify/ui-svelte",
-  "version": "0.0.1",
-  "type": "module",
-  "main": "dist/index.js",
-  "svelte": "dist/index.js",
-  "exports": {
-    "./package.json": "./package.json",
-    "./components/AmplifySignUpFormFields.svelte": "./components/AmplifySignUpFormFields.svelte",
-    "./components/Authenticator.svelte": "./components/Authenticator.svelte",
-    "./components/ConfirmSignUp.svelte": "./components/ConfirmSignUp.svelte",
-    "./components/FederatedSignIn.svelte": "./components/FederatedSignIn.svelte",
-    "./components/SignIn.svelte": "./components/SignIn.svelte",
-    "./components/SignUp.svelte": "./components/SignUp.svelte",
-    "./components/UserNameAlias.svelte": "./components/UserNameAlias.svelte",
-    "./components/authStore": "./components/authStore.js",
-    "./components/primitives/AmplifyButton.svelte": "./components/primitives/AmplifyButton.svelte",
-    "./components/primitives/AmplifyError.svelte": "./components/primitives/AmplifyError.svelte",
-    "./components/primitives/AmplifyFormField.svelte": "./components/primitives/AmplifyFormField.svelte",
-    "./components/primitives/AmplifyFormSelect.svelte": "./components/primitives/AmplifyFormSelect.svelte",
-    "./components/primitives/AmplifyPasswordField.svelte": "./components/primitives/AmplifyPasswordField.svelte",
-    "./components/primitives/AmplifyPhoneNumberField.svelte": "./components/primitives/AmplifyPhoneNumberField.svelte",
-    "./components/primitives/AmplifyTabItem.svelte": "./components/primitives/AmplifyTabItem.svelte",
-    "./components/primitives/AmplifyTabs.svelte": "./components/primitives/AmplifyTabs.svelte",
-    "./components/primitives/AmplifyTextField.svelte": "./components/primitives/AmplifyTextField.svelte",
-    ".": {
-      "import": "./dist/index.js"
-    },
-    "./styles.css": "./dist/styles.css"
-  },
-  "browser": {
-    "./styles.css": "./dist/styles.css"
-  },
-  "files": [
-    "dist",
-    "LICENSE"
-  ],
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "next",
-    "@sveltejs/adapter-node": "^1.0.0-next.56",
-    "@sveltejs/adapter-static": "^1.0.0-next.23",
-    "@sveltejs/kit": "next",
-    "@typescript-eslint/eslint-plugin": "^4.31.1",
-    "@typescript-eslint/parser": "^4.31.1",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^3.2.1",
-    "prettier": "^2.4.1",
-    "prettier-plugin-svelte": "^2.4.0",
-    "shx": "^0.3.3",
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.2.6",
-    "svelte-preprocess": "^4.9.4",
-    "svelte2tsx": "^0.4.12",
-    "tslib": "^2.3.1",
-    "typescript": "^4.4.3"
-  },
-  "peerDependencies": {
-    "aws-amplify": "^4.2.2"
-  },
-  "dependencies": {
-    "@aws-amplify/ui": "3.0.6",
-    "@rollup/plugin-replace": "^3.0.0",
-    "nanoid": "^3.1.30",
-    "qrcode": "^1.5.0",
-    "svelte2tsx": "^0.4.12",
-    "xstate": "^4.26.1"
-  }
-}