@aws-amplify/ui-svelte 0.0.0-next-c8114c5-20220105200507

package/dist/components/primitives/AmplifyError.svelte

@@ -0,0 +1,46 @@
+<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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,121 @@
+<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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,38 @@
+<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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,75 @@
+<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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,50 @@
+<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

@@ -0,0 +1,27 @@
+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.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  AmplifyTabItemProps */
+/** @typedef {typeof __propDef.events}  AmplifyTabItemEvents */
+/** @typedef {typeof __propDef.slots}  AmplifyTabItemSlots */
+export default class AmplifyTabItem extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type AmplifyTabItemProps = typeof __propDef.props;
+export type AmplifyTabItemEvents = typeof __propDef.events;
+export type AmplifyTabItemSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/primitives/AmplifyTabs.svelte

@@ -0,0 +1,50 @@
+<script >//tab list
+const tabs = [
+    {
+        active: true,
+        labelledById: '1',
+        id: '1',
+        title: 'Sign In'
+    },
+    {
+        active: false,
+        labelledById: '2',
+        id: '2',
+        title: 'Sign Up'
+    }
+];
+function handleTabClick(e) {
+    // future
+}
+</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>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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

@@ -0,0 +1,31 @@
+<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

@@ -0,0 +1,28 @@
+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/index.d.ts

@@ -0,0 +1,3 @@
+import Authenticator from './components/Authenticator.svelte';
+import * as authStore from './components/authStore';
+export { Authenticator, authStore };

package/dist/index.js

@@ -0,0 +1,3 @@
+import Authenticator from './components/Authenticator.svelte';
+import * as authStore from './components/authStore';
+export { Authenticator, authStore };

package/dist/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@aws-amplify/ui-svelte",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "svelte": "index.js",
+  "exports": {
+    "./package.json": "./package.json",
+    "./components/Authenticator.svelte": "./components/Authenticator.svelte",
+    "./components/SignIn.svelte": "./components/SignIn.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"
+  },
+  "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",
+    "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.5",
+    "@rollup/plugin-replace": "^3.0.0",
+    "nanoid": "^3.1.30",
+    "qrcode": "^1.5.0",
+    "svelte2tsx": "^0.4.12",
+    "xstate": "^4.26.1"
+  }
+}

package/dist/styles.css

@@ -0,0 +1 @@
+@import '@aws-amplify/ui/styles.css';