kemet-ui 3.0.1 → 4.0.0

package/dist/components/kemet-icon/types.d.ts

@@ -1,5 +0,0 @@
-export interface KemetIconInterface {
-    set: string;
-    icon: string;
-    size: string;
-}

package/dist/components/kemet-icon/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/components/kemet-icon/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-icon/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetIconInterface {\n  set: string,\n  icon: string,\n  size: string\n}\n"]}

package/dist/components/kemet-input/docs/stories.d.ts

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-input';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Standard: Story;
-export declare const Rounded: Story;
-export declare const Filled: Story;
-export declare const LeftIcon: Story;
-export declare const ValidateOnBlur: Story;

package/dist/components/kemet-input/docs/stories.js

@@ -1,83 +0,0 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import '../kemet-input';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-const meta = {
-    title: 'Components / Input',
-    component: 'kemet-input',
-    argTypes: {
-        type: {
-            name: 'Type',
-            control: { type: 'select' },
-            options: ['text', 'color', 'date', 'datetime-local', 'email', 'password', 'hidden', 'month', 'number', 'reset', 'search', 'tel', 'time', 'url', 'week'],
-        },
-        status: {
-            control: { type: 'radio' },
-            options: ['standard', 'error', 'success', 'warning'],
-        },
-        autocomplete: {
-            control: { type: 'radio' },
-            options: ['off', 'on'],
-        },
-        inputmode: {
-            control: { type: 'select' },
-            options: ['none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url'],
-        },
-    }
-};
-export default meta;
-const Template = (args) => html `<kemet-input
-  type="${args.type}"
-  status="${args.status}"
-  pattern=${ifDefined(args.pattern !== '' ? args.pattern : undefined)}
-  ?required=${args.required}
-  ?validate-on-blur=${args.validateOnBlur}
-  ?rounded=${args.rounded}
-  ?filled=${args.filled}
-  icon-left=${ifDefined(args.iconLeft !== '' ? args.iconLeft : undefined)}
-  icon-right=${ifDefined(args.iconRight !== '' ? args.iconRight : undefined)}
-  placeholder=${ifDefined(args.placeholder !== '' ? args.placeholder : undefined)}
-  minlength=${ifDefined(args.minlength || undefined)}
-  maxlength=${ifDefined(args.maxlength || undefined)}
-  min=${ifDefined(args.min || undefined)}
-  max=${ifDefined(args.max || undefined)}
-  step=${ifDefined(args.step || undefined)}
-  autocomplete="${args.autocomplete}"
-  inputmode="${args.inputmode}"
-  ?autofocus=${args.autofocus}
-  ?disabled=${args.disabled}
-  ?readonly=${args.readonly}
-></kemet-input>`;
-export const Standard = {
-    render: args => Template(args),
-};
-export const Rounded = {
-    render: args => Template(args),
-    args: {
-        rounded: true,
-    },
-};
-export const Filled = {
-    render: args => Template(args),
-    args: {
-        filled: true,
-    },
-};
-export const LeftIcon = {
-    render: args => Template(args),
-    args: {
-        iconLeft: 'phone',
-    },
-};
-export const ValidateOnBlur = {
-    render: args => Template(args),
-    args: {
-        validateOnBlur: true,
-        required: true,
-        pattern: '^[a-zA-Z0-9]*$',
-        placeholder: "Enter a special character."
-    },
-};
-//# sourceMappingURL=stories.js.map

package/dist/components/kemet-input/docs/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-input/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-input';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Input',\n  component: 'kemet-input',\n  argTypes: {\n    type: {\n      name: 'Type',\n      control: { type: 'select' },\n      options: ['text', 'color', 'date', 'datetime-local', 'email', 'password', 'hidden', 'month', 'number', 'reset', 'search', 'tel', 'time', 'url', 'week'],\n    },\n    status: {\n      control: { type: 'radio' },\n      options: ['standard', 'error', 'success', 'warning'],\n    },\n    autocomplete: {\n      control: { type: 'radio' },\n      options: ['off', 'on'],\n    },\n    inputmode: {\n      control: { type: 'select' },\n      options: ['none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url'],\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`<kemet-input\n  type=\"${args.type}\"\n  status=\"${args.status}\"\n  pattern=${ifDefined(args.pattern !== '' ? args.pattern : undefined)}\n  ?required=${args.required}\n  ?validate-on-blur=${args.validateOnBlur}\n  ?rounded=${args.rounded}\n  ?filled=${args.filled}\n  icon-left=${ifDefined(args.iconLeft !== '' ? args.iconLeft : undefined)}\n  icon-right=${ifDefined(args.iconRight !== '' ? args.iconRight : undefined)}\n  placeholder=${ifDefined(args.placeholder !== '' ? args.placeholder : undefined)}\n  minlength=${ifDefined(args.minlength || undefined)}\n  maxlength=${ifDefined(args.maxlength || undefined)}\n  min=${ifDefined(args.min || undefined)}\n  max=${ifDefined(args.max || undefined)}\n  step=${ifDefined(args.step || undefined)}\n  autocomplete=\"${args.autocomplete}\"\n  inputmode=\"${args.inputmode}\"\n  ?autofocus=${args.autofocus}\n  ?disabled=${args.disabled}\n  ?readonly=${args.readonly}\n></kemet-input>`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Rounded: Story = {\n  render: args => Template(args),\n  args: {\n    rounded: true,\n  },\n};\n\nexport const Filled: Story = {\n  render: args => Template(args),\n  args: {\n    filled: true,\n  },\n};\n\nexport const LeftIcon: Story = {\n  render: args => Template(args),\n  args: {\n    iconLeft: 'phone',\n  },\n};\n\nexport const ValidateOnBlur: Story = {\n  render: args => Template(args),\n  args: {\n    validateOnBlur: true,\n    required: true,\n    pattern: '^[a-zA-Z0-9]*$',\n    placeholder: \"Enter a special character.\"\n  },\n};\n"]}

package/dist/components/kemet-input/kemet-input.d.ts

@@ -1,174 +0,0 @@
-import { LitElement } from 'lit';
-import { FormSubmitController } from '../../utilities/controllers/forms';
-import { KemetFieldInterface } from '../kemet-field/types';
-import { TypeAriaAutoComplete, TypeAutoComplete, TypeStatus } from './types';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-input
- * @summary An enhanced input element.
- *
- * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.
- * @prop {string} name - The name of the input
- * @prop {string} placeholder - The placeholder attribute
- * @prop {string} minlength - The minlength attribute
- * @prop {string} maxlength - The maxlength attribute
- * @prop {string} min - The min attribute
- * @prop {string} max - The max attribute
- * @prop {string} step - The step attribute
- * @prop {string} autocomplete - The autocomplete attribute
- * @prop {string} pattern - The pattern attribute
- * @prop {string} inputmode - The input mode attribute
- * @prop {boolean} autofocus - The autofocus attribute
- * @prop {boolean} disabled - The disable attribute
- * @prop {boolean} readonly - The readonly attribute
- * @prop {boolean} required - The required attribute
- * @prop {string} type - The type of input
- * @prop {string} value - The input's value
- * @prop {boolean} invalid - States whether the input is invalid
- * @prop {string} status - The status of the input
- * @prop {boolean} validateOnBlur - Activates validation on blur
- * @prop {string} ariaAutoComplete - Aria Autocomplete
- * @prop {string} ariaControls - Aria Controls
- * @prop {string} ariaActiveDescendant - Aria Active Descendant
- * @prop {boolean} rounded - Displays rounded corners
- * @prop {boolean} filled - Displays a filled input box
- * @prop {string} iconRight - Custom Icon to the right of the input
- * @prop {string} iconLeft - Custom Icon to the left of the input
- * @prop {number} iconSize - Size of the icons
- * @prop {object} validity - The HTML5 validity object.
- * @prop {boolean} isPasswordVisible - Manages password visibility
- * @prop {string} inputType - Input Type of keypress handled through handleInput(e)
- * @prop {boolean} focused - Determines if the input is focused
- *
- * @csspart input
- *
- * @cssproperty --kemet-input-height - The height of the input.
- * @cssproperty --kemet-input-padding - The padding on the input.
- * @cssproperty --kemet-input-border - The border of the input.
- * @cssproperty --kemet-input-border-color-error -  The border of the error state.
- * @cssproperty --kemet-input-border-color-success - The border of the success state.
- * @cssproperty --kemet-input-border-color-warning - The border of the warning state.
- * @cssproperty --kemet-input-icon-left-padding - The icon-left padding.
- * @cssproperty --kemet-input-icon-right-padding - The icon-right padding.
- * @cssproperty --kemet-input-border-radius-rounded - The border radius on rounded.
- * @cssproperty --kemet-input-border-filled - The border on filled.
- * @cssproperty --kemet-input-color-filled - The color on filled.
- * @cssproperty --kemet-input-background-color-filled - The background-color on filled.
- * @cssproperty --kemet-input-background-color-error - The error state background color.
- * @cssproperty --kemet-input-background-color-success - The success state background color.
- * @cssproperty --kemet-input-background-color-warning - The warning state background color.
- *
- * @event kemet-input-focused - Fires when the input receives and loses focus
- * @event kemet-input-status Fires when there's a change in status. This event includes an object that reports: 1) the status. 2) HTML5 validity object. 3) the component element.
- * Use the validity object to support custom validation messages.
- * @event kemet-input-input - Fires when the input receives input
- *
- */
-export default class KemetInput extends LitElement {
-    /** @internal */
-    formSubmitController: FormSubmitController;
-    static styles: import("lit").CSSResult[];
-    slug: string;
-    name: string;
-    placeholder: string;
-    minlength: number;
-    maxlength: number;
-    min: string;
-    max: string;
-    step: number;
-    autocomplete: TypeAutoComplete;
-    pattern: string;
-    inputmode: string;
-    autofocus: boolean;
-    disabled: boolean;
-    readonly: boolean;
-    required: boolean;
-    type: string;
-    value: string;
-    invalid: boolean;
-    status: TypeStatus;
-    validateOnBlur: boolean;
-    ariaAutoComplete: TypeAriaAutoComplete;
-    ariaControls: string;
-    ariaActiveDescendant: string;
-    rounded: boolean;
-    filled: boolean;
-    iconRight: string;
-    iconLeft: string;
-    iconSize: number;
-    validity: object;
-    isPasswordVisible: boolean;
-    inputType: string;
-    focused: boolean;
-    field: KemetFieldInterface;
-    form: HTMLFormElement;
-    input: HTMLInputElement;
-    constructor();
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    makeIconRight(): import("lit-html").TemplateResult<1>;
-    makeIconLeft(): import("lit-html").TemplateResult<1>;
-    makeIconClear(): import("lit-html").TemplateResult<1>;
-    makeVisibilityToggle(): import("lit-html").TemplateResult<1>;
-    setPasswordIcon(): "eye" | "eye-slash";
-    /**
-     * Handles when the input receives focus
-     * @private
-     */
-    handleFocus(): void;
-    /**
-     * Handles when the input loses focus
-     * @private
-     */
-    handleBlur(): void;
-    /**
-     * Handles when the input changes value
-     * @private
-     */
-    handleChange(): void;
-    /**
-     * Handles when the input receives input
-     * @private
-     */
-    handleInput(): void;
-    /**
-     * Handles when the input has an error
-     * @private
-     */
-    handleInvalid(): void;
-    handleStatus(event: CustomEvent): void;
-    /**
-     * Toggles password visibility
-     * @private
-     */
-    togglePasswordVisibility(): void;
-    /**
-     * Handles the clear button for search
-     * @private
-     */
-    handleClear(): void;
-    /**
-     * Checks the validity of the character limit for the count component
-     * @public
-     * @returns {boolean}
-     */
-    checkLimitValidity(): boolean;
-    /**
-     * Checks the validity of the standard input
-     * @public
-     * @returns {boolean}
-     */
-    checkValidity(): boolean;
-    /**
-     * Focuses the standard input
-     * @public
-     */
-    focus(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-input': KemetInput;
-    }
-}